Der eigene Online-Shop für Profi-Fotografen. Für Fotografen, die keine Zeit zu verlieren haben.

CSS-Eigenschaft: font, Kategorien: Schrift (allgemein), Fonts (CSS 2.1), Fonts (CSS 3)

Schrift

Steuert die Darstellung der Schrift unter anderem bezüglich Schriftart, Größe, Schriftstyle und Varianz. Es ist die Kurzschreibweise für verschiedene font-Eigenschaften.

CSS-Eigenschaft: font
KurzbeschreibungWerteStandardwertKategorieHinweis
SchriftSiehe individuelle Angaben
Allgemein:
Schrift
CSS 2.1:
Fonts
CSS 3:
Fonts
 

Folgendes ist beim Einsatz von font zu beachten:

  • Über die Kurzschreibweise font können Style, Varianz, Schriftstärke, Größe, Zeilenhöhe und Schriftart in einem Ausdruck geschrieben werden.
  • Anders als in anderen Kurzschreibweisen ist die Reihenfolge nicht frei wählbar, sondern unterliegt speziellen Regeln:
    • Zuerst werden die Parameter für font-style, font-variant und font-weight erwartet. Diese drei Eigenschaften sind in der Reihenfolge beliebig, sind optional, müssen also nicht angegeben sein, damit die Zuweisung greift.
    • Als zweite Parameter-Einheit werden font-size und line-height erwartet. Die Schriftgröße kann dabei in den unterschiedlichen Schreibweisen angegeben werden, wie unter font-size beschrieben ist. Die Schreibweise von line-height ist in der Kurzschreibweise eher ungewöhnlich: Hinter der Schriftgröße wird diese mit einem vorangestelltem Schrägstrich (Backslash) angegeben. Die Schreibweise hat also folgendes Muster: [Schriftgröße]/[Zeilenhöhe]. Eine Angabe sieht beispielswiese so aus: 12px/14px.
    • Als letzer Parameter wird die font-family erwartet. Hier kann neben einer konkreten Schriftart auch eine generische Angabe gemacht werden. Wird die Schriftart vor die anderen Parameter geschrieben, wird der komplette Ausdruck ungültig und keiner der Werte greift.
  • Die Mindestangaben für font sind Schriftgröße font-size und Schriftart font-family. Fehlt einer der beiden Parameter, ist die komplette Anweisung ebenfalls ungültig und ohne Auswirkung.
  • Eine erneute Definition von font für den gleichen Tag übernimmt keine Werte aus einer zuvor gemachten Anweisung, sondern verwendet für alle einzelnen Parameter die entsprechenden Default-Werte. Im Beispiel Nr. 3 wird die Angabe "italic" aus Beispiel Nr. 2 nicht übernommen, was man aufgrund der in CSS üblichen Vererbung vermuten könnte.
  • Die Werte caption, icon, menu, message-box, small-caption und status-bar dürfen in der Kurzschreibweise font nur alleine eingesetzt werden und stellen Schrift in der Schriftart, -größe und -style dar, wie sie in den Bedienelementen des Browsers (Menüleiste, Statusleiste, etc.) zu finden sind. Werden diese mit anderen Parametern für font kombiniert, werden diese außer Kraft gesetzt, die restlichen Werte werden in Abhängigkeit von der Position richtig oder nicht dargestellt, eine Kombination ist auf jeden Fall eine fehlerhafte Anweisung. Durchaus eine mögliche Zuweisung dieser Eigenschaft, allerdings in der Praxis noch nie beobachtet. Hier fehlen aktuelle Anwendungsbeispiele für die Zuweisung von Systemfonts, von daher an dieser Stelle keine weiteren Ausführungen.
  • Der CSS 3 Standard sieht für font eine Vielzahl von neuen Werten vor, die zum großen Teil Schrift wie verschiedene Formular-Elemente erscheinen lassen sollen. Beschreibungen dazu folgen zu gegebener Zeit.
  • Praxishinweis: Auch wenn diese Kurzschreibweise (wie alle anderen Kurzschreibweisen auch) komfortabel ist, birgt der Einsatz von font gewisse Risiken:
    Einerseits sind Kurzschreibweisen schwerer zu lesen als einzelne Eigenschaften. Dies wirkt sich direkt auf die Pflegbarkeit des CSS aus. Besonders wenn im Team entwickelt wird, verursacht schwierig lesbarer und schlecht pflegbarer Quellcode Mehraufwand, der sich auch in Mehrkosten niederschlägt.
    Sollte das Argument für Kurzschreibweisen ein schlanker Quellcode sein, gibt es sicher wesentlich effektivere Möglichkeiten, die Bandbreite zu entlasten. Eine gute Pflegbarkeit zahlt sich langfristig sicher mehr aus und sollte mit höherer Priorität versehen werden, als ein paar gesparte Kilobytes.
    Zuletzt stellt die teilweise freie, teilweise festgelegte Reihenfolge der Parameter als auch die Eigenschaft, alle Werte auf Default-Werte zu setzen, eine vermeidbare Fehlerquelle dar. Der Einsatz von font ist also gründlich abzuwägen.
Browserunterstützung von font
Firefox
Firefox
Google Chrome
Google
Chrome
Internet Explorer
Internet
Explorer
Safari
Safari
Opera
Opera
CSS21
Version: 16Version: 25Version: 30Version: 31Version: 32
j
Version: 20Version: 30Version: 35Version: 36Version: 37
j
Version: 8Version: 9Version: 10Version: 11
j
Version: 4Version: 5Version: 6Version: 7
j
Version: 10Version: 11Version: 12
j

Weiterführende Informationen zu font:

  • letzte CSS-Eigenschaft (Acc-Key: ALT + SHIFT + z):
    float-offset


Beispiele

HTML:

<h1>Überschrift</h1>

CSS:

h1 {
 font: lighter 3em comic sans ms;
}
/* Beispiel ohne Angabe für line-height. Schriftfamilie kann, muss aber nicht in Anführungszeichen stehen. */

Beispiel Nr. 1 So sieht's aus:

Überschrift

 

HTML:

<p>Es hat lange gedauert, bis ich begriffen habe, was es bedeutet, ein blinder Text zu sein: Man macht keinen Sinn. Man wirkt hier und da aus dem Zusammenhang gerissen. Oft wird man gar nicht erst gelesen.</p>

CSS:

p {
  font: italic bold 11px arial;
}
/* font-style, font-weight, font-size und font-family. */

Beispiel Nr. 2 So sieht's aus:

Es hat lange gedauert, bis ich begriffen habe, was es bedeutet, ein blinder Text zu sein: Man macht keinen Sinn. Man wirkt hier und da aus dem Zusammenhang gerissen. Oft wird man gar nicht erst gelesen.

 

HTML:

<p class="exampleReset">Es hat lange gedauert, bis ich begriffen habe, was es bedeutet, ein blinder Text zu sein: Man macht keinen Sinn. Man wirkt hier und da aus dem Zusammenhang gerissen. Oft wird man gar nicht erst gelesen.</p>

CSS:

p.exampleReset {
 font: x-large verdana;
}
/* Obwohl im Beispiel Nr. 3 Angaben zu font-style und font-weight gemacht worden sind, werden diese hier nicht verwendet. Eine erneute Anweisung setzt alle nicht vorkommenden Parameter des Ausdrucks auf die Standardwerte. */

Beispiel Nr. 3 So sieht's aus:

Es hat lange gedauert, bis ich begriffen habe, was es bedeutet, ein blinder Text zu sein: Man macht keinen Sinn. Man wirkt hier und da aus dem Zusammenhang gerissen. Oft wird man gar nicht erst gelesen.

 

HTML:

<p class="examLineHeight">Es hat lange gedauert, bis ich begriffen habe, was es bedeutet, ein blinder Text zu sein: Man macht keinen Sinn. Man wirkt hier und da aus dem Zusammenhang gerissen. Oft wird man gar nicht erst gelesen.</p>

CSS:

p.examLineHeight {
 font: 150%/20px cursive;
}
/* Die eher ungewöhnliche Schreibweise für die line-height mit dem vorangestellten / .
Für eine gültige Anweisung müssen aber stets Schriftgröße und Schriftfamilie angegeben sein.
Der Wert "cursive" ist in dabei die Angab einer generischen Schriftart. */

Beispiel Nr. 4 So sieht's aus:

Es hat lange gedauert, bis ich begriffen habe, was es bedeutet, ein blinder Text zu sein: Man macht keinen Sinn. Man wirkt hier und da aus dem Zusammenhang gerissen. Oft wird man gar nicht erst gelesen.

 

HTML:

<p class="examKomplett">Es hat lange gedauert, bis ich begriffen habe, was es bedeutet, ein blinder Text zu sein: Man macht keinen Sinn. Man wirkt hier und da aus dem Zusammenhang gerissen. Oft wird man gar nicht erst gelesen.</p>

CSS:

p.examKomplett {
 font: oblique 900 small-caps 12pt/40px monospace;
}
/* Hier eine Angabe mit allen potentiellen Parametern. Die 900 ist dabei der höchste Wert der Eigenschaft font-weight. */

Beispiel Nr. 5 So sieht's aus:

Es hat lange gedauert, bis ich begriffen habe, was es bedeutet, ein blinder Text zu sein: Man macht keinen Sinn. Man wirkt hier und da aus dem Zusammenhang gerissen. Oft wird man gar nicht erst gelesen.

 

HTML:

<div class="doMessageBox">Es hat lange gedauert, bis ich begriffen habe, was es bedeutet, ein blinder Text zu sein: Man macht keinen Sinn. Man wirkt hier und da aus dem Zusammenhang gerissen. Oft wird man gar nicht erst gelesen.</div>

CSS:

div.doMessageBox {
   font: message-box;
}
/* Systemfonts. */

Beispiel Nr. 6 So sieht's aus:

Es hat lange gedauert, bis ich begriffen habe, was es bedeutet, ein blinder Text zu sein: Man macht keinen Sinn. Man wirkt hier und da aus dem Zusammenhang gerissen. Oft wird man gar nicht erst gelesen.
 

HTML:

<div class="doMenu">Es hat lange gedauert, bis ich begriffen habe, was es bedeutet, ein blinder Text zu sein: Man macht keinen Sinn. Man wirkt hier und da aus dem Zusammenhang gerissen. Oft wird man gar nicht erst gelesen.</div>

CSS:

div.doMenu {
   font: menu;
}
/* Systemfonts. */

Beispiel Nr. 7 So sieht's aus:

Es hat lange gedauert, bis ich begriffen habe, was es bedeutet, ein blinder Text zu sein: Man macht keinen Sinn. Man wirkt hier und da aus dem Zusammenhang gerissen. Oft wird man gar nicht erst gelesen.
 

HTML:

<div class="doStatusBar">Es hat lange gedauert, bis ich begriffen habe, was es bedeutet, ein blinder Text zu sein: Man macht keinen Sinn. Man wirkt hier und da aus dem Zusammenhang gerissen. Oft wird man gar nicht erst gelesen.</div>

CSS:

div.doStatusBar {
   font: status-bar;
}
/* Systemfonts. */

Beispiel Nr. 8 So sieht's aus:

Es hat lange gedauert, bis ich begriffen habe, was es bedeutet, ein blinder Text zu sein: Man macht keinen Sinn. Man wirkt hier und da aus dem Zusammenhang gerissen. Oft wird man gar nicht erst gelesen.
 

HTML:

<div class="doCaption">Es hat lange gedauert, bis ich begriffen habe, was es bedeutet, ein blinder Text zu sein: Man macht keinen Sinn. Man wirkt hier und da aus dem Zusammenhang gerissen. Oft wird man gar nicht erst gelesen.</div>

CSS:

div.doCaption {
   font: caption;
}
/* Systemfonts. */

Beispiel Nr. 9 So sieht's aus:

Es hat lange gedauert, bis ich begriffen habe, was es bedeutet, ein blinder Text zu sein: Man macht keinen Sinn. Man wirkt hier und da aus dem Zusammenhang gerissen. Oft wird man gar nicht erst gelesen.
 

HTML:

<div class="doSmallCaption">Es hat lange gedauert, bis ich begriffen habe, was es bedeutet, ein blinder Text zu sein: Man macht keinen Sinn. Man wirkt hier und da aus dem Zusammenhang gerissen. Oft wird man gar nicht erst gelesen.</div>

CSS:

div.doSmallCaption {
   font: small-caption;
}
/* Systemfonts. */

Beispiel Nr. 10 So sieht's aus:

Es hat lange gedauert, bis ich begriffen habe, was es bedeutet, ein blinder Text zu sein: Man macht keinen Sinn. Man wirkt hier und da aus dem Zusammenhang gerissen. Oft wird man gar nicht erst gelesen.
 

HTML:

<div class="doIcon">Es hat lange gedauert, bis ich begriffen habe, was es bedeutet, ein blinder Text zu sein: Man macht keinen Sinn. Man wirkt hier und da aus dem Zusammenhang gerissen. Oft wird man gar nicht erst gelesen.</div>

CSS:

div.doIcon {
   font: icon;
}
/* Systemfonts. */

Beispiel Nr. 11 So sieht's aus:

Es hat lange gedauert, bis ich begriffen habe, was es bedeutet, ein blinder Text zu sein: Man macht keinen Sinn. Man wirkt hier und da aus dem Zusammenhang gerissen. Oft wird man gar nicht erst gelesen.
 

HTML:

<div class="doIconNot">Es hat lange gedauert, bis ich begriffen habe, was es bedeutet, ein blinder Text zu sein: Man macht keinen Sinn. Man wirkt hier und da aus dem Zusammenhang gerissen. Oft wird man gar nicht erst gelesen.</div>

CSS:

div.doIconNot {
   font: icon 2em;
}
/* Eine Kombination aus Systemfont und anderen Parametern macht den Ausdruck ungültig. Falls die 2em vor dem &quot;icon&quot; stehen würde, wäre die Schrift zwar groß, der Systemfont würde aber nicht dargesellt.*/

Beispiel Nr. 12 So sieht's aus:

Es hat lange gedauert, bis ich begriffen habe, was es bedeutet, ein blinder Text zu sein: Man macht keinen Sinn. Man wirkt hier und da aus dem Zusammenhang gerissen. Oft wird man gar nicht erst gelesen.
 

Fehler melden

Diese Referenz ist ein Freizeitprojekt ohne aufwendiges Lektorat oder Vergleichbarem. Von daher lassen sich bei dem Umfang dieser Referenz trotzt größtmöglicher Sorgfalt Fehler nicht vermeiden.

Hilf, die Qualität dieser Seite zu verbessern! Sollte Dir ein Fehler auffallen, sei es in den Erklärungen, Beispielen oder den Informationen zum Browsersupport, seien es orthographische oder grammatikalische, sende eine kurze E-Mail an info@css-wiki.com. Auch Anregungen und Verbesserungsvorschläge sind jeder Zeit Willkommen. Jede E-Mail wird persönlich beantwortet!

Vielen Dank!

A-Z:

Schnell­auswahl

Seiten:

Letzte Änderung: 01. 04. 2017
Render Time: 6.75 sec.

Browser-Marktanteile