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

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

Schriftart

Bestimmt die Schriftart, wie zum Beispiel Arial, Verdana, etc..

CSS-Eigenschaft: font-family
KurzbeschreibungWerteStandardwertKategorieHinweis
Schriftart
  • [family-name]
  • [generic-family]
  • serif
  • sans-serif
  • cursive
  • fantasy
  • monospace
  • inherit
Abhängig von der
Implementierung
Allgemein:
Schrift
CSS 2.1:
Fonts
 

Folgendes ist beim Einsatz von font-family zu beachten:

  • Es können eine oder mehrere Schriften definiert werden, die durch Komma getrennt angegeben werden. Welche Schrift dargestellt wird, hängt von den Schriften ab, die auf dem Rechner des Webseitenbesuchers installiert sind. Ist die zuerst angegebene Schrift vorhanden, wird diese verwendet, falls nicht die jeweils nächste, bis eine Schrift gefunden wurde. Ist keine der definierten Schriften vorhanden, wird die im Browser konfigurierte Standardschrift dargestellt. Die Angabe einer nicht vorhandenen Schriftart erzeugt keinen Fehler.
  • Bei der Angabe von Schriftarten muss eine Case-Sensitivität nicht berücksichtig werden. Es spielt also keine Rolle, ob man sie in großen oder kleinen Buchstaben angibt.
  • Das W3C spricht die Empfehlung aus, Schriften mit Leerzeichen im Schriftname in einfache oder doppelte Anführungszeichen (Quotes) zu setzen (was bei Inline-Styles eine Fehlerquelle sein kann, wenn die gleichen Anführungszeichen wie im HTML-Element verwendet werden). Die Schriftart Tw Cen MT Condensed Extra Bold beispielsweise wird von aktuellen Browsern auch ohne "Quotes" fehlerfrei dargestellt, die Empfehlung scheint also vernachlässigbar zu sein.
  • Neben konkreten Schriftarten können auch generische Schriftangaben gemacht werden. Die einzelnen Schlüsselworte serif, sans-serif, monospace, cursive und fantasy sind für folgende Darstellungsvarianten vorgesehen:
    • serif ist eine Schrift mit Serifen. "Serifen" bezeichnet die kleinen Endstriche oben und unten an den einzelnen Buchstaben, wie zum Beispiel bei "Times New Roman". Allgemeine Informationen zu Serifen findet man unter http://de.wikipedia.org/wiki/Serife.
    • sans-serif sind Schriftarten ohne jene Endstriche wie zum Beispiel "Verdana" oder "Arial".
    • monospace ist das Schlüsselwort für eine Schrift, die als Nichtproportionale Schriftart bezeichnet wird. Das sind Schriften, die buchstabenübergreifend eine einheitliche Zeichenbreite haben. Im Gegensatz zu "Arial" oder "Times New Roman", bei denen ein i wesentlich schmaler als ein m oder w ist, ist bei der Monospace-Schriftart jeder Buchstabe gleich breit. Auch Leerzeichen haben die gleiche Breite. Was dazu führt, dass Buchtstaben in mehreren Zeilen genau untereinander stehen und immer dieselbe Anzahl von Buchstaben in eine Zeile passt. monospace wird gerne eingesetzt, um Codeabschnitte darzustellen.
    • cursive soll laut Standard eine "italic" oder "kursive" Schriftart wählen, SELFTHML spricht in seiner Beschreibung von cursive von einer "Schreibschrift".
    • fantasy soll laut Standard eine eher dekorative Schrift verwenden, SELFHTML spricht bei diesem Schlüsselwort von einer "ungewöhnlichen Schrift".
    Die Implementierung von sans-serif, serif und monospace ist in aktuellen Browsern zuverlässig. Die Werte cursive und fantasy werden hingegen sehr unterschiedlich dargestellt: Firefox, Safari und Opera setzen für beides "Comic Sans MS" ein, der Internet Explorer verwendet für fantasy eher eine Schreibschrift. Nur der Chrome (obwohl ein Webkit-Browser wie der Safari) setzt als fantasy eine Schriftart ein, die wie Impact aussieht. Die Angaben von cursive und fantasy sind von daher nicht zuverlässig und browserübergreifend einsetzbar. Was ein Grund dafür sein mag, dass ich in der Praxis diese Schlüsselworte bislang noch nicht gesehen habe.
  • Beim Einsatz von font-family sollte man neben der eigentlichen Schriftart auch immer ein Schlüsselwort für eine generische Schrift angeben, damit im Falle des Nicht-Vorhandenseins der definierten Schrift eine Schrift vom gleichen Typ dargestellt wird.
  • Seltene oder extrem gestaltete Schriften sollten nur mit Vorsicht eingesetzt werden. Es sollte eine Schrift gewählt werden, die eine hohe Verbreitung hat, damit die Webseite browser- und betriebssystemübergreifend einheitlich aussieht. Ein anderes Problem ist, dass Schriften mitunter stark in der Größe variieren, gerade wenn sie extrem gestaltet sind. So kann es passieren, dass im Falle der Ersatzschrift die Schriftgröße bis zu 150% abweicht, was sowohl zu Lasten der Wiedererkennbarkeit als auch der Lesbarkeit der Webseite gehen kann.
  • Über gute Lesbarkeit ist vieles im Internet zu finden. Vor ein paar Jahren wurde für eine gut lesbare Seite eine sans-serif Schriftart empfohlen. Mitunter wurde Verdana als "die" Internet-Standardschrift propagiert. Schaut man heute große Seiten an (zum Beispiel die New York Times), werden serif-Schriften als gezieltes Gestaltungselement eingesetzt, was nicht zwingend eine schlechte Lesbarkeit bedeutet.
    Was eine gute Lesbarkeit ausmacht, unterliegt einem ständigem Wandel. Einerseits ist über die Jahre hinweg und mit immer vielfältiger werdenden Internetangeboten die Kompetenz der Internetbenutzer gestiegen. Der Einsatz einer nicht ganz gewöhnlichen Schriftart führt nicht zwangsläufig zur Verwirrung. Andererseits ist das, was als gut lesbar empfunden stark von der Gewohnheit als auch vom Kulturkreis abhängig.
    Ein Beispiel einer Studie findet man hier: http://www.mlive.com/business/index.ssf/2008/06/study_by_university_of_michiga.html
  • Als Standardwert vermerkt das W3C depends on user agent, bei den aktuell relevanten Browser ist das "Times New Roman".
  • An dieser Stelle sei angemerkt, dass Web-Fonts über CSS definiert und dann bestimmten Bereichen zugewiesen werden können. Die Möglichkeiten bzw. Darstellung werden mit jeder neuen Version der verschiedenen Browser besser. Eine ausführliche Beschreibung folgt.
Browserunterstützung von font-family
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-family:



Beispiele

HTML:

<p>Auch wenn ein Text nur kurz ist, sollte trotzdem irgendwie versucht werden, eine nachvollziehbare Wortfolge anzuzeigen, da man mit zehn Mal fünf bis acht aneinanderhängende X keine reale Ausspielung erzeugt wird.</p>

CSS:

/* Browserstandard - in der Regel "Times New Roman". */

Beispiel Nr. 1 So sieht's aus:

Auch wenn ein Text nur kurz ist, sollte trotzdem irgendwie versucht werden, eine nachvollziehbare Wortfolge anzuzeigen, da man mit zehn Mal fünf bis acht aneinanderhängende X keine reale Ausspielung erzeugt wird.

 

HTML:

<p class="doSans">Auch wenn ein Text nur kurz ist, sollte trotzdem irgendwie versucht werden, eine nachvollziehbare Wortfolge anzuzeigen, da man mit zehn Mal fünf bis acht aneinanderhängende X keine reale Ausspielung erzeugt wird.</p>

CSS:

.doSans {
   font-family: sans-serif;
}
/* Angabe einer generischen Schriftart. */

Beispiel Nr. 2 So sieht's aus:

Auch wenn ein Text nur kurz ist, sollte trotzdem irgendwie versucht werden, eine nachvollziehbare Wortfolge anzuzeigen, da man mit zehn Mal fünf bis acht aneinanderhängende X keine reale Ausspielung erzeugt wird.

 

HTML:

<p class="doComic">Auch wenn ein Text nur kurz ist, sollte trotzdem irgendwie versucht werden, eine nachvollziehbare Wortfolge anzuzeigen, da man mit zehn Mal fünf bis acht aneinanderhängende X keine reale Ausspielung erzeugt wird.</p>

CSS:

.doComic {
   font-family: Comic Sans MS, sans-serif;
}
/* Konkrete Angabe einer Schriftart. Ist diese auf dem Rechner des Surfes nicht installiert, wird eine serifenlose Schrift dargestellt. */

Beispiel Nr. 3 So sieht's aus:

Auch wenn ein Text nur kurz ist, sollte trotzdem irgendwie versucht werden, eine nachvollziehbare Wortfolge anzuzeigen, da man mit zehn Mal fünf bis acht aneinanderhängende X keine reale Ausspielung erzeugt wird.

 

HTML:

<p class="doHelNeu">Auch wenn ein Text nur kurz ist, sollte trotzdem irgendwie versucht werden, eine nachvollziehbare Wortfolge anzuzeigen, da man mit zehn Mal fünf bis acht aneinanderhängende X keine reale Ausspielung erzeugt wird.</p>

CSS:

.doHelNeu {
   font-family: Helvetica Neue, COURIER;
}
/* Bei der Angabe einer font-family muss keine Case-Sensivität berücksichtigt werden. */

Beispiel Nr. 4 So sieht's aus:

Auch wenn ein Text nur kurz ist, sollte trotzdem irgendwie versucht werden, eine nachvollziehbare Wortfolge anzuzeigen, da man mit zehn Mal fünf bis acht aneinanderhängende X keine reale Ausspielung erzeugt wird.

 

HTML:

<p class="doMono">Auch wenn ein Text nur kurz ist, sollte trotzdem irgendwie versucht werden, eine nachvollziehbare Wortfolge anzuzeigen, da man mit zehn Mal fünf bis acht aneinanderhängende X keine reale Ausspielung erzeugt wird.</p>

CSS:

.doMono {
   font-family: monospace;
}
/* Bei einer monospace-Schriftart stehen die einzelnen Buchstaben genau untereinander. */

Beispiel Nr. 5 So sieht's aus:

Auch wenn ein Text nur kurz ist, sollte trotzdem irgendwie versucht werden, eine nachvollziehbare Wortfolge anzuzeigen, da man mit zehn Mal fünf bis acht aneinanderhängende X keine reale Ausspielung erzeugt wird.

 

HTML:

<p class="doKursiv">Auch wenn ein Text nur kurz ist, sollte trotzdem irgendwie versucht werden, eine nachvollziehbare Wortfolge anzuzeigen, da man mit zehn Mal fünf bis acht aneinanderhängende X keine reale Ausspielung erzeugt wird.</p>

CSS:

.doKursiv {
   font-family: cursive;
}
/* "cursive" wird von Browser zu Browser unterschiedlich dargestellt. */

Beispiel Nr. 6 So sieht's aus:

Auch wenn ein Text nur kurz ist, sollte trotzdem irgendwie versucht werden, eine nachvollziehbare Wortfolge anzuzeigen, da man mit zehn Mal fünf bis acht aneinanderhängende X keine reale Ausspielung erzeugt wird.

 

HTML:

<p class="doFantasy">Auch wenn ein Text nur kurz ist, sollte trotzdem irgendwie versucht werden, eine nachvollziehbare Wortfolge anzuzeigen, da man mit zehn Mal fünf bis acht aneinanderhängende X keine reale Ausspielung erzeugt wird.</p>

CSS:

.doFantasy {
   font-family: fantasy;
}
/* Auch "fantasy" wird von Browser zu Browser unterschiedlich dargestellt. */

Beispiel Nr. 7 So sieht's aus:

Auch wenn ein Text nur kurz ist, sollte trotzdem irgendwie versucht werden, eine nachvollziehbare Wortfolge anzuzeigen, da man mit zehn Mal fünf bis acht aneinanderhängende X keine reale Ausspielung erzeugt wird.

 

HTML:

<p class="doSpaceFont">Auch wenn ein Text nur kurz ist, sollte trotzdem irgendwie versucht werden, eine nachvollziehbare Wortfolge anzuzeigen, da man mit zehn Mal fünf bis acht aneinanderhängende X keine reale Ausspielung erzeugt wird.</p>

CSS:

.doSpaceFont {
   font-family: Tw Cen MT Condensed Extra Bold, arial, sans-serif;
}
/* Schriftarten mit Leerzeichen im Namen sollten, müssen aber nicht zwingend in Anführungszeichen stehen. Relevant ist die Trennung der Schriften durch das Komma. */

Beispiel Nr. 8 So sieht's aus:

Auch wenn ein Text nur kurz ist, sollte trotzdem irgendwie versucht werden, eine nachvollziehbare Wortfolge anzuzeigen, da man mit zehn Mal fünf bis acht aneinanderhängende X keine reale Ausspielung erzeugt wird.

 

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.403 sec.

Browser-Marktanteile