CSS Schriftgestaltung: fett, kursiv & mehr...
In CSS gibt es eine Vielzahl an Möglichkeiten Schriften zu gestalten. So kann man eine Schrift zum Beispiel kursiv oder fett und auch die Größe und Schriftart verändern. Dieser Artikel schreibt die Optionen, die die Schrift selbst angehen. Wie man Texte unterstreicht oder mit Effekten ausstatten, Erfahren Sie im Artikel Textgestaltung.font-family: Schriftart
Diefont-family-Eigenschaft beschreibt die Schriftart oder Schriftfamilie. Dazu wird als Wert der Name einer Schriftart oder Schriftfamile angegeben. Schriftarten sind z.B. Arial oder Times New Roman; Schriftfamilien sind serif, sans-serif, cursive, fantasy und monospace. Die Schriftfamilien sind fest definiert. Wird eine Schriftfamilie als Wert angegeben, so wird bei der Darstellung des Dokumentes die Standardschriftart des Browsers in dieser Familie verwendet. Wird beispielsweise serif angegeben könnte der Browser diese mit der Schriftart Times New Roman darstellen, da diese zur serif-Schriftfamile gehört. Beispiel:
P { font-family: Arial, 'Times New Roman', serif; }
BODY { font-family: monospace; }
Zusätzlich ist es, wie im Beispiel dargestellt, möglich mehrere Schriftarten - durch Kommas getrennt - anzugeben. Die weiteren Schriftarten dienen dann als Alternativschriftarten und werden dann eingesetzt, wenn der Browser die erste (bzw. zweite, dritte oder vierte usw.) Schriftart nicht kennt.Bitte beachten Sie dabei, dass der Name der Schriftart Text darstellt. Sollte der Name aus mehreren Worten bestehen ist es daher ratsam diesen in Anführungszeichen zu setzten.
font-size: Schriftgröße
Diefont-size-Eigenschaft gibt die Schriftgröße an. Als Werte können hier relative und absolute Größen wie auch Längen(-maße) oder Prozentangaben angegeben werden. Beispiel:
BODY { font-size:smaller; }
P { font-size:10pt; }
P.Einfuehrung { font-size:x-large; }
H1 { font-size: 80%; }
font-style: Kursive Schrift
Diefont-style-Eigenschaft gibt den Stil der Schrift an. Dieser kann normal, italic (kursiv) oder oblique (schräg) sein. Diese Werte richten sich normalerweise nach der verwendeten Schriftart. Normal bezeichnet dabei den normalen (nicht schrägen) Stil der Schrift. Italic verwendet man, wenn die Schrift als Kursivschriftart im Browser (Benutzeragenten) enthalten ist. Meist existiert dazu direkt eine Schriftartenvorlage für kursiven Text beim Browser. Oblique wird dann verwendet, wenn der Browser diese Schriftart erst noch schrägen muss/soll. Grundsätztlich sollten aber italic und oblique das gleiche bewirken. Beispiel:
p.a { font-weight:bold; font-style: normal; font-family: 'Arial Kursiv'; }
P.b { font-weight:bold; font-style: italic; font-family: 'Arial'; }
P.c { font-weight:normal; font-style: oblique; font-family: 'Arial Fett'; }
Darstellung: Das obige Beispiel als Bild im Netscape 6.0
font-weight: Schrift in fett
Diefont-weight-Eigenschaft definiert das Gewicht der Schrift. Mit Gewicht ist dabei gemeint, wie dick/fett die Buchstaben dargestellt werden sollen. Mögliche Werte sind hierbei:
- 100 bis 900 - Beschreibt die Dicke der Schrift auf einer Skala von 100 bis 900 in Hunderterschritten.
-
normal- Beschreibt die Schrift als normal (400). -
bold- Beschreibt die Schrift als fett. (700) -
bolder- Beschreibt die Schrift um 100 dicker als der vererbte Wert. -
lighter- Beschreibt die Schrift um 100 dünner als der vererbte Wert.
body { font-weight: 200; }
p { font-weight: bold; }
span { font-weight: bolder; }
font-variant
Diefont-variant-Eigenschaft bezeichnet die Schriftveränderung. Dabei steht derzeit nur ein Effekt zur Verfügung: small-caps. Small-caps bedeutet "kleine Großbuchstaben". Dieser Effekt bewirkt, dass Großbuchstaben, die mit dieser Eigenschaft definiert sind etwas kleiner dargestellt werden. Dies ist besonders dann nützlich, wenn Schriftarten verwendet werden, die nur Großbuchstaben darstellen. Beispiel:
P { font-family: 'Engravers MT'; }
SPAN { font-variant: small-caps; }
Obwohl beide Worte im gleichen Absatz stehen, ist das zweite dennoch kleiner. Hierbei wurde um das zweite Wort das span-Element mit den im Beispiel genannten Eigenschaften definiert.
font
Diefont-Eigenschaft schließt alle oben genannten Schrift-Eigenschaften zusammen. Der Vorteil besteht darin, dass nur noch die Werte notiert werden müssen und keine Eigenschaftsnamen benötigt werden. Die Werte werden dabei nach dem folgenden Schema notiert:font-style font-variant font-weight font-size (/ line-height) font-family.Dabei ist folgendes zu beachten:
- Die vorgegebene Reihenfolge sollte eingehalten werden.
- Alle Eigenschaften sind optional - müssen also nicht gesetzt werden.
- Mindestens ein Wert der ersten drei Eigenschaften muss enthalten sein.
- Die
line-height-Eigenschaft kann nur notiert werden, wenn auch einefont-size-Eigenschaft notiert wurde. - Wird die
line-height-Eigenschaft verwendet, muss zwischen diesem Wert und dem Wert vonfont-sizeein Schrägstrich (/) stehen.
p { font: italic bold 11pt/12pt Arial; }
p { font: bolder 120% serif; }
p { font: oblique small-caps bolder 13px/120% 'Times New Roman',
Arial, serif; }
Alle weiteren Angaben zur Schrifart müssen separat getätigt werden.Nach CSS Level 2 kann des Weiteren an Stelle dieser Angaben die alleinige Angabe der Systemschriftarten erfolgen. Folgende Werte sind möglich:
-
caption- Es werden die Schrifteigenschaften verwendet, die bei Beschriftungen (z.B. Buttons oder Drop-Down-Menüs) verwendet werden. -
icon- Es werden die Schrifteigenschaften verwendet, die bei Icons verwendet werden. -
menu- Es werden die Schrifteigenschaften verwendet, die bei Menüs (z.B. Startmenü bei Window) verwendet werden. -
message-box- Es werden die Schrifteigenschaften verwendet, die bei Dialogen (z.B. Warnungsmeldungen etc.) verwendet werden. -
small-caption- Es werden die Schrifteigenschaften verwendet, die bei Kontrollfeldern verwendet werden. -
status-bar- Es werden die Schrifteigenschaften verwendet, die bei der Statusanzeige verwendet werden.
p { font: icon; }
em { font: status; }
font-size-adjust
Die font-size-adjust-Eigenschaft definiert, wie die Schriftgröße angepasst werden soll. Die Anpassung geschieht dabei an eine andere Schriftart. Ziel soll es letztlich sein, zu erreichen, dass die Alternativschriftart so angepasst wird (wenn die eigentliche Schriftart, die nicht verfügbar ist), dass diese ungefähr die gleiche Größe hat, wie die eigentliche Schriftart. Ein sehr extremes Beispiel:
Darstellung: Verdana, Onyx und Modern No. 20 bei gleicher Schriftgröße
font-size/x-height). Da dieser Wert bei den meisten Schriftarten unterschiedlich ist, wird dieser für die notierte Schriftart als Wert von font-size-adjust notiert. Steht diese Schriftart nun nicht zur Verfügung, so ist der Browser gezwungen eine andere Schriftart zu verwenden. Da der Browser den Seitenwert für die Alternativschriftart kennt, kann er nun daraus (a), aus dem angegebenen font-size-adjust-Wert (b) und der definierten Größe (c) für die Schriftart einen neuen Wert (d) berechnen (Die Formel dafür ist c*(b/a) = d). Dieser neue Wert (d) beschreibt nun die Größe der Alternativschriftart in der Einheit der gegebenen Schriftgröße und kann für die Darstellung der Schrift verwendet werden.Beispiel: Es werden Verdana als Normalschriftart und Times New Roman als Alternativschriftart definiert. Da diese Schriftart aber kleiner als Verdana ist, wird, um nun in etwa die gleiche Größe zu erreichen, zusätzlich die
font-size-adjust-Eigenschaft notiert. Der Seitenwert für Verdana liegt bei ungefähr 0.58 - also wird font-size-adjust: 0.58 notiert. Ist Verdana nun nicht verfügbar wird Times New Roman (Seitenwert 0.46) verwendet und um 1.26 (nämlich 0.58/0.46) vergrößert. Bei einer definierten Größe von 10pt würde die Schrift in Times New Roman nun mit 13pt (oder besser 12.6pt) Größe dargestellt werden. Rechnung: 10pt*(0.58/0.46) = 12.6pt
Beispiel:
P {font-family: 'Meine Schriftart'; font-size:12pt;
font-size-adjust:0.32; }
P {font-family: 'Times New Roman'; font-size:1.5em;
font-size-adjust:0.46; }
Die Seitenwerte einiger Schriftarten:
| Schriftart | Vergleich zu Verdana | Seitenwert |
|---|---|---|
| Verdana | 1.00 | 0.58 |
| Comic Sans MS | 1.07 | 0.54 |
| Trebuchet MS | 1.09 | 0.53 |
| Georgia | 1.16 | 0.50 |
| Myraid Web | 1.20 | 0.48 |
| Minion Web | 1.23 | 0.47 |
| Times New Roman | 1.26 | 0.46 |
| Gill Sans | 1.26 | 0.46 |
| Bernhard Modern | 1.45 | 0.40 |
| Caflish Script Web | 1.57 | 0.37 |
| Flemish Script | 2.07 | 0.28 |
none definiert werden. Er besagt, dass keine Ausrichtung vorgenommen werden soll. Dieser Wert ist als Standardwert gesetzt. Beispiel:
p { font-family: 'kennt Keiner'; font-size:1.2em; font-size-adjust:none; }
font-stretch
Diefont-stretch-Eigenschaft beschreibt, wie weit die Schrift eingedrückt oder gestreckt werden soll. Folgende Werte können dabei notiert werden (vom schmalsten zum weitesten):ultra-condensed (ultra schmal), extra-condensed, condensed, semi-condensed, normal (normale Breite), semi-expanded, expanded, extra-expanded und ultra-expanded (ultra gezerrt).Beispiel:
p { font-stretch:extra-condesed; }
h1 { font-stretch:semi-expand; }
body { font-stretch:normal; }
Du arbeitest in einer Agentur oder als Freelancer?
Dann wirf doch mal einen Blick auf unsere Software FeatValue.
Weiterlesen: ⯈ Regeln in CSS
Über uns
Wir entwickeln Webanwendungen mit viel Leidenschaft. Unser Wissen geben wir dabei gerne weiter. Mehr über a coding project