Die font-sizeEigenschaft gibt die Größe oder Höhe der Schriftart an. font-sizewirkt sich nicht nur auf die Schriftart aus, auf die sie angewendet wird, sondern wird auch verwendet, um den Wert der Einheiten em, rem und ex length zu berechnen.
p ( font-size: 20px; )font-sizekann Schlüsselwörter, Längeneinheiten oder Prozentsätze als Werte akzeptieren. Es ist jedoch wichtig zu beachten, dass es ein obligatorischer Wert ist , wenn es als Teil der fontShorthand-Eigenschaft deklariert font-sizewird. Wenn es nicht in der Kurzform enthalten ist, wird die gesamte Zeile ignoriert.
Längenwerte (z. B. px, em, rem, ex usw.), auf die angewendet wird, font-sizedürfen nicht negativ sein.
Absolute Schlüsselwörter und Werte
.element ( font-size: small; )Es werden die folgenden absoluten Schlüsselwortwerte akzeptiert:
xx-smallx-smallsmallmediumlargex-largexx-large
Diese absoluten Werte werden bestimmten Schriftgrößen zugeordnet, die vom Browser berechnet werden. Sie können jedoch auch zwei Schlüsselwortwerte verwenden, die sich auf die Schriftgröße des übergeordneten Elements beziehen.
Andere absolute Werte sind mm(Millimeter), cm(Zentimeter), in(Zoll), pt(Punkte) und pc(Picas). Ein Punkt entspricht 1/72 Zoll, während ein Pica 12 Punkten entspricht. Diese Werte werden normalerweise für gedruckte Dokumente verwendet.
Relative Schlüsselwörter
.element ( font-size: larger; )largersmaller
Wenn das übergeordnete Element beispielsweise eine Schriftgröße von hat small, wird bei einem untergeordneten Element mit einer definierten relativen Größe von largerdie Schriftgröße mediumfür das untergeordnete Element gleichgesetzt .
Prozentwerte
.element ( font-size: 110%; )Prozentwerte, z. B. das Festlegen einer Schriftgröße von 110%, beziehen sich auch auf die Schriftgröße des übergeordneten Elements, wie in der folgenden Demo gezeigt:
Siehe den Stift qdbELL von CSS-Tricks (@ css-Tricks) auf CodePen.
Die em Einheit
.element ( font-size: 2em; )Die em-Einheit ist eine relative Einheit, die auf dem berechneten Wert der Schriftgröße des übergeordneten Elements basiert. Dies bedeutet, dass untergeordnete Elemente immer von ihren übergeordneten Elementen abhängig sind, um ihre Schriftgröße festzulegen. Zum Beispiel:
This is a heading
This is some text.
.container ( font-size: 16px; ) p ( font-size: 1em; ) h2 ( font-size: 2em; )Im obigen Beispiel hat der Absatz eine Schriftgröße von 16 Pixel, da 1 x 16 = 16 Pixel, während die Überschrift 32 Pixel beträgt, weil 2 x 16 = 32 Pixel. Das Skalieren des Typs bietet abhängig von der Schriftgröße des übergeordneten Elements viele Vorteile: Wir können Elemente in einen Container einschließen und wissen, dass alle untergeordneten Elemente immer relativ zueinander sind:
Siehe den Stift Herausfinden, wie die em-Einheit mit CSS-Tricks (@ css-Tricks) auf CodePen funktioniert.
Die Rem-Einheit
Bei rem-Einheiten hängt die Schriftgröße jedoch vom Wert des Stammelements (oder des htmlElements) ab.
html ( font-size: 16px; ) p ( font-size: 1.5rem; )Im obigen Beispiel ist die rem-Einheit gleich 16px (da sie vom html/ root-Element geerbt wird ), und daher wird die Schriftgröße für alle Absatzelemente auf 24px berechnet (1,5 x 16 = 24). Im Gegensatz zu em-Einheiten ignoriert der Absatz das Styling aller seiner Eltern außer der Wurzel.
Dieses Gerät wird von folgenden Browsern unterstützt:
| Chrom | Safari | Feuerfuchs | Oper | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Funktioniert | Funktioniert | Funktioniert | Funktioniert | 10+ | Funktioniert | Funktioniert |
Die Ex-Einheit
.element ( font-size: 20ex; )Für ex-Einheiten wäre 1ex gleich der berechneten Höhe des Kleinbuchstaben x des Wurzelelements. Im folgenden Beispiel wird das htmlElement auf gesetzt 20pxund alle anderen Schriftgrößen werden durch die x-Höhe dieser bestimmten Schriftart bestimmt.
Siehe den Stift Finden Sie heraus, wie die Ex-Einheit mit CSS-Tricks (@ css-Tricks) auf CodePen funktioniert.
Experimentieren Sie mit der Demo über dem Ersetzen des font-familyon- htmlElements, um zu sehen, wie sich die anderen Schriftgrößen ändern.
Ansichtsfenster-Einheiten
.element-one ( font-size: 100vh; ) .element-two ( font-size: 100vw; )Ansichtsfenstereinheiten wie vwund vhlegen die Schriftgröße eines Elements relativ zu den Abmessungen des Ansichtsfensters fest:
- 1vw = 1% der Breite des Ansichtsfensters
- 1vh = 1% der Höhe des Ansichtsfensters
Nehmen wir also das folgende Beispiel:
.element ( font-size: 100vh; )Dann wird angegeben, dass die Schriftgröße des Elements immer 100% der Höhe des Ansichtsfensters betragen sollte (50vh wären 50%, 15vh wären 15% usw.). Versuchen Sie in der folgenden Demo, die Höhe des Beispiels zu ändern, um zu sehen, wie sich der Typ streckt:
Siehe den Stiftgrößen-Typ mit vh-Einheiten nach CSS-Tricks (@ css-Tricks) auf CodePen.
vw Einheiten unterscheiden sich darin, dass sie die Höhe der Buchstabenformulare durch die Breite des Ansichtsfensters festlegen. In der folgenden Demo müssen Sie die Größe des Browserfensters horizontal ändern, um diese Änderungen anzuzeigen:
Siehe den Stiftgrößen-Typ mit vw-Einheiten nach CSS-Tricks (@ css-Tricks) auf CodePen.
Diese Geräte werden von folgenden Browsern unterstützt:
| Chrom | Safari | Feuerfuchs | Oper | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 31+ | 7+ | 31+ | 27+ | 9+ | 4.4+ | 7.1+ |
Es ist wichtig zu beachten, dass es zwei weitere Ansichtsfenstereinheiten gibt: vminund vmax. Der erste ermittelt die Werte von vhund vwund vmaxlegt die Schriftgröße als kleinsten der beiden Werte fest, während die Schriftgröße auf den größten dieser beiden Werte festgelegt wird.
Die ch-Einheit
.element ( font-size: 24ch; )Die chEinheit ist der exEinheit insofern ähnlich , als sie die Schriftgröße eines Elements in Bezug auf die Breite des Glyphen 0 (Null) der Schrift festlegt:
Siehe den Stiftgrößen-Typ mit ch-Einheiten nach CSS-Tricks (@ css-Tricks) auf CodePen.
Dieses Gerät wird unterstützt von:
| Chrom | Safari | Feuerfuchs | Oper | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 27+ | Funktioniert | 10+ | Funktioniert | 9+ | Funktioniert | Funktioniert |