CSS Eigenschaft Font-Size – Schriftgröße festlegen
Mit der CSS-Eigenschaft font-size wird die Schriftgröße definiert. Um die Schriftgröße zu definieren, stehen verschiedene absolute und relative CSS-Einheiten zur Verfügung. Außer px spielen absolute Maßeinheiten aber im Web-Design keine Rolle. Sie sind nur zum Drucken sinnvoll.
Beschreibung | mögliche Werte | Standardwert | Kategorie |
---|---|---|---|
Schriftgröße | absolute oder relative Schriftgröße Schriftgröße in Prozent weitere Keywords für font-size xx-small x-small small medium large x-large xx-large larger smaller initial inherit |
medium | Schriften Fonts |
Die Angabe in oranger Schrift ist die Standardanwendung der CSS-Eigenschaft font-size.
Beachte:-
Die Standardangabe der Schriftgröße ist eine Zahl mit angehängter Maßeinheit (z.B. 15px, 0.95em, 11pt) oder in Prozent (z.B. 95%).
-
Alternativ zu der numerischen Angabe der Schriftgröße sind auch Schlüsselwörter für eine absolute oder relative Schriftgröße möglich.
absolute Schriftgröße xx-small winzig 9px x-small sehr klein 10px small klein 13px medium mittel 16px large groß 19px x-large sehr groß 24px xx-large riesig 32px relative Schriftgröße larger größer als im Eltern-Element smalle kleiner als im Eltern-Element Die Schriftgräße
font-size: medium
ist der Standard.Bei
font-size: larger
gilt:
Hat das übergeodnete Element z.B. die Schriftgröße medium, dann bekommt das aktuelle Element die Schriftgröße large.Und bei
font-size: smaller
gilt:
Hat das übergeodnete Element z.B. die Schriftgröße medium, dann bekommt das aktuelle Element die Schriftgröße small. -
Die Grundeinstellung der Standard-Schriftgröße bei den meisten Browsern ist 16px, was 1em entspricht. Diese Einstellung kann in den Browser-Einstellungen individuell angepasst werden. Der dort eingestellte Wert entspricht immer 1em.
-
Für barrierefreie Webseiten ist eine skalierbare Schriftgröße notwendig. Die Schriftgröße in em oder Prozent ist skalierbar. Die Schriftgröße in px sollte man deshalb vermeiden.
-
Die Schriftgröße (font-size) wird vererbt. Bei einer relativen Angabe für ein konkretes HTML-Element multiplizieren sich die Werte, wenn gleiche Elemente ineinander geschachtelt werden.
-
initial erzwingt die Wiederherstellung der ursprünglichen Schriftgröße, d.h. der Wert initial stellt für die Eigenschaft font-size die Standard Schriftgröße ein.
-
inherit erzwingt die Vererbung der Schriftgröße vom Elternelement.
-
Die Eigenschaft font-size wird vererbt.
body
{
/* Schrift 10% größer als Standard */
font-size
: 1.1em
;
}