Wir haben die Möglichkeit, Schriftart, Schriftgröße, -dicke, Farbe und Ausrichtung sowie die „Fallback-Schriftart“ zu definieren. Letztere nutzt der Browser nach Möglichkeit, falls die gewünschte Schrift nicht auf dem Computer des Benutzers installiert ist.
Mit speziellen Anweisungen ist es möglich, Text einzurücken oder die Groß- und Kleinschreibung zu erzwingen und zu steuern. Dadurch kann der Text in Normalschrift geschrieben werden. Er wird lediglich via CSS in Großbuchstaben oder Kleinbuchstaben umgewandelt – somit indiziert Google den Text in Normalschrift. Folgende CSS Befehle passen Schrift und Texte an:
| Befehl | Bedeutung | Mögliche Werte |
|---|---|---|
font-family | Schriftart | Verdana, Arial, Tahoma, … Custom Fonts (Google WebFonts, TypeKit, fonts.com) |
font-size | Schriftgröße | Integer Wert in Pixel (px), mm, cm oder em |
font-variant | Schriftvariante | normal, caps, small-caps |
font-weight | Schriftstärke / Dicke | normal, bold, light, 300, 500, 600, 700, je nach verwendeter Schrift |
font-style | Schriftstil | normal, italic |
color | Schriftfarbe | Wert als rgb(), rgba(), oder Hex (#). Auch möglich: Standardfarben wie „green“, „blue“, „red“, „yellow“, … |
text-align | Ausrichtung | links (left), mittig (center), rechts (right) oder Blocksatz (justify) |
text-decoration | Text Dekoration | unterstrichen (underline), überstrichen (overline), durchgestrichen (line-trough) |
text-transform | Transformation | Kapitälchen (capitalize), Versalien / Großbuchstaben (uppercase), Kleinbuchstaben (lowercase) |
text-indent | Einrückung | Integer Wert in Pixel (px), mm, cm oder em |
line-height | Zeilenhöhe | Integer Wert in Pixel (px), mm, cm oder em |
word-spacing | Wortabstand | Integer Wert in Pixel (px), mm, cm oder em |
letter-spacing | Zeichenabstand/ Buchstabenabstand | Integer Wert in Pixel (px), mm, cm oder em |
Beispiele
.element {
font-family:Arial, Verdana, Tahoma;
font-size:16px;
line-height:20px;
color:rgb(230,180,40);
}.element {
font-family:Arial, Verdana, Tahoma;
font-size:12px;
line-height:16px;
color:rgb(150,150,150);
font-weight:bold;
letter-spacing:4px;
text-transform:uppercase;
}.element {
font-family:Arial, Verdana, Tahoma;
font-size:12px;
line-height:16px;
color:rgb(150,150,150);
text-align:right;
font-style:italic;
}