Die font-size
-CSS-Eigenschaft spezifiziert die Schriftgöße. Eine Änderung der Schriftgröße kann die Größe anderer Partien beeinflussen, da sie dazu benutzt wird, den Wert der em
- und ex
-<length>
-Einheiten zu berechnen.
/* <absolute-size>-Werte */
font-size: xx-small;
font-size: x-small;
font-size: small;
font-size: medium;
font-size: large;
font-size: x-large;
font-size: xx-large;
/* <relative-size>-Werte */
font-size: smaller;
font-size: larger;
/* <length>-Werte */
font-size: 12px;
font-size: 0.8em;
/* <percentage>-Werte */
font-size: 80%;
/* Globale Werte */
font-size: inherit;
font-size: initial;
font-size: unset;
Initialwert | medium |
---|---|
Anwendbar auf | alle Elemente. Auch anwendbar auf ::first-letter und ::first-line . |
Vererbt | Ja |
Prozentwerte | bezieht sich auf die Schriftgröße des Elternelements |
Berechneter Wert | relativ zur gleichen Achse der Innenabstandsbox des Scrollcontainers |
Animationstyp | Längenangabe |
Syntax
Die font-size
-Eigenschaft kann auf zwei Weisen spezifiziert werden:
- durch ein einzelnes Schlüsselwort, das entweder eine absolute oder relative Größe darstellt
- durch einen
<length-percentage>
-Wert
Werte
xx-small, x-small, small, medium, large, x-large, xx-large
- Ein Satz von Schlüsselwörtern absoluter Größe, basierend auf der vom Benutzer festgelegten Schriftgröße (welche
medium
entspricht). Ähnlich der HTML-Tags<font size="1">
bis<font size="7">
, bei denen die benutzerdefinierte Größe<font size="3">
entspricht. larger, smaller
- Größer oder kleiner als die Schriftgröße des Elternelements; grob das Verhältnis, das benutzt wird, um die obigen absoluten Schlüsselwörter zu unterscheiden.
<length-percentage>
-
Ein positiver
<length>
- oder<percentage>
-Wert. Werden die Einheiten der<length>
-Werte durchem
oderex
spezifiziert, ist die Größe relativ definiert zur Schriftgröße des Elternelements des gefragten Elements. Zum Beispiel entspricht 0.5em der Hälfte der Schriftgröße des aktuellen Elternelements. Werden die Einheiten inrem
spezifiziert, ist die Größe relativ definiert zur Schriftgröße des<html>
-(Wurzel-)Elements.<percentage>-Werte beziehen sich auf die Schriftgröße des Elternelements.
Am Besten werden Werte benutzt, die relativ zur benutzerdefinierten Schriftgröße stehen. Absolute Werte in Form von Längen mit Einheiten, außer em
oder ex
, sollten vermieden werden. Müssen trotzdem solche absoluten Werte benutzt werden, ist px
anderen Einheiten vorzuziehen, weil seine Bedeutung nicht abhängig davon, was das Betriebssystem (meist fälschlicherweise) für die Bildschirmauflösung hält, variiert.
Formale Syntax
<absolute-size> | <relative-size> | <length-percentage>wobei
<absolute-size> = xx-small | x-small | small | medium | large | x-large | xx-large | xxx-large
<relative-size> = larger | smaller
<length-percentage> = <length> | <percentage>
Mögliche Ansätze
Es gibt einige verschiedene Arten, die Schriftgröße zu spezifizieren, in Form von Schlüsselwörtern oder numerischen Werten für Pixel oder ems. Je nachdem, was die Ansprüche einer Webseite sind, kann die richtige Methode gewählt werden.
Schlüsselwörter
Schlüsselwörter sind eine gute Möglichkeit die Größe von Schriften im Web festzulegen. Indem ein Schlüsselwort für die Schriftgröße des body-Elements festgelegt wird, ist es möglich überall auf der restlichen Webseite relative Schriftgrößen zu benutzen, was einen befähigt, auf einfache Weise die Schrift auf der ganzen Seite entsprechend zu vergrößern oder zu verkleinern.
Pixel
Das Festlegen der Schriftgröße in Pixel-Werten (px
) ist eine gute Wahl, wenn Pixel-Genauigkeit gefordert ist. Ein px-Wert ist statisch und stellt eine Möglichkeit dar, die unabhängig von Betriebssystem und Browser ist und dem Browser unveränderlich mitteilt, die Buchstaben in genau der spezifizierten Höhe an Pixeln darzustellen. Das Ergebnis kann sich je nach Browser leicht unterscheiden, da diese eventuell verschiedene Algorithmen verwenden, um den selben Effekt zu erzielen.
Verschiedene Schriftgrößeneinstellungen können auch kombiniert werden. Zum Beispiel, wenn ein Elternelement 16px
festlegt und sein Kindelement larger
spezifiziert, dann wird das Kindelement größer dargestellt als das Elternelement auf der Seite.
Ems
Eine weitere Möglichkeit, die Schriftgröße festzulegen, ist die Verwendung von em
-Werten. Die Größe eines em
-Wertes ist dynamisch. Beim Spezifizieren der font-size
-Eigenschaft entspricht ein em
der für das gefragte Elternelement festgelegten Schriftgröße. Wird die Schriftgröße nirgendwo anders auf der Seite festgelegt, dann gilt die vom Browser definierte Größe, die oft 16px entspricht. Demnach gilt im Normalfall 1em = 16px, also 2em = 32px. Wenn dem body-Element eine Schriftgröße von 20px zugewiesen wird, dann gilt 1em = 20px und 2em = 40px. Es ist zu beachten, dass der Wert 2 notwendigerweise ein Multiplikator der aktuellen em-Größe ist.
Um das em-Äquivalent für einen beliebigen benötigten Pixel-Wert zu berechnen, kann die folgende Formel benutzt werden:
em = gewünschter Pixel-Wert des Elements / Elternelementschriftgröße in Pixeln
Angenommen die Schriftgröße des Body der Seite entspricht 16px. Wenn die gewünschte Schriftgröße 12px ist, dann sollten 0.75em spezifiziert werden (da 12/16 = 0,75). Es verhält sich ähnlich, wenn eine Schriftgröße von 10px gewollt ist; dann sollte 0.625em spezifiziert werden (10/16 = 0,625) und für 22px sollten es 1.375em (22/16) sein.
Em ist eine sehr nützliche CSS-Einheit, da es seine Länge automatisch relativ zur vom Leser gewählten Schrift anpasst.
Ein wichtiger Hinweis: em-Werte können zu bisweilen auch extremen Steigerungen führen wie das folgende HTML und CSS zeigen:
html {
font-size: 62.5%; /* font-size 1em = 10px bei normaler Browser-Einstellung */
}
span {
font-size: 1.6em;
}
<div>
<span>Outer <span>inner</span> outer</span>
</div>
Das Ergebnis ist:
Angenommen, dass font-size
vom Browser als 16px festgelegt wird, dann würden die Wörter "outer" mit 16px dargestellt, das Wort "inner" aber mit 25.6px. Das liegt daran, dass die Schriftgröße des inneren Spans 1.6em entspricht, was relativ zum Elternelement gilt, welches wiederum relativ zu dessen Elternelement steht. Dieses Verhalten wird auch compounding (Steigerung/Aufzinsung) genannt.
Rems
Rem
-Werte wurden eingeführt, um das compunding-Problem zu umgehen. Rem
-Werte sind relativ zum html
-Wurzelelement, nicht zum Elternelement. Mit anderen Worten ermöglicht es, eine Schriftgröße in einer relativen Weise zu spezifizieren ohne durch das Elternelement beeinflusst zu werden und so das Compunding zu verhindern.
Das folgende CSS ist nahezu identisch mit dem vorherigen Beispiel. Die einzige Ausnahme ist, dass die Einheit nun rem
ist.
html {
font-size: 62.5%; /* font-size 1em = 10px bei normaler Browser-Einstellung */
}
span {
font-size: 1.6rem;
}
Anschließend wird dieses CSS auf das selbe HTML angewandt, das wie folgt aussieht:
<span>Outer <span>inner</span> outer</span>
Bei diesem Beispiel erscheinen die Worte "outer inner outer" alle mit 16px (angenommen, dass die Schriftgröße des Browsers beim Standardwert von 16px verblieben ist).
Beispiele
Beispiel 1
/* Paragrafentext auf sehr groß setzen */
p { font-size: xx-large }
/* h1-(level 1 heading)-Text auf 2,5 mal die Größe
* des umliegenden Textes setzen */
h1 { font-size: 250% }
/* setzt in span-Tags eingeschlossenen Text auf 16px */
span { font-size: 16px; }
Beispiel 2
.small {
font-size: xx-small;
}
.larger {
font-size: larger;
}
.point {
font-size: 24pt;
}
.percent {
font-size: 200%;
}
<h1 class="small">small-H1</h1>
<h1 class="larger">larger-H1</h1>
<h1 class="point">24pt-H1</h1>
<h1 class="percent">200%-H1</h1>
Live-Test
Bemerkungen
Em
- und ex
-Einheiten in der font-size
-Eigenschaft verhalten sich relativ zur Schriftgröße des Elternelements (im Gegensatz zu allen anderen Einheiten, die relativ zur Schriftgröße des Elements sind). Das bedeutet, dass em
-Einheiten und Prozentangaben das selbe als Wert für font-size
bewirken.
Spezifikationen
Spezifikation | Status | Kommentar |
---|---|---|
CSS Fonts Module Level 3 Die Definition von 'font-size' in dieser Spezifikation. |
Anwärter Empfehlung | Keine Veränderung |
CSS Transitions Die Definition von 'font-size' in dieser Spezifikation. |
Arbeitsentwurf | Definiert font-size als animierbar. |
CSS Level 2 (Revision 1) Die Definition von 'font-size' in dieser Spezifikation. |
Empfehlung | Keine Veränderung |
CSS Level 1 Die Definition von 'font-size' in dieser Spezifikation. |
Empfehlung | Ursprüngliche Definition |
Browser-Kompatibilität
BCD tables only load in the browser