CSS/Eigenschaften/Schriftformatierung/font-family

Aus SELFHTML-Wiki
< CSS‎ | Eigenschaften‎ | Schriftformatierung(Weitergeleitet von Font-family)
Wechseln zu: Navigation, Suche

Mithilfe der hier beschriebenen Eigenschaft font-family können Sie Schriftarten angeben, ohne sich darum kümmern zu müssen, ob und wie die Schriftart beim Anwender angezeigt werden kann. Falls die angegebene Schriftart nicht angezeigt werden kann, bleibt die Angabe wirkungslos.

  • CSS 1.0
  • Chrome
  • Firefox
  • IE
  • Opera
  • Safari

Schriftartenstapel (Font Stacks)[Bearbeiten]

Falls die angegebene Schriftart nicht angezeigt werden kann, können Sie mehrere Alternativen festlegen. Bei mehreren angegebenen Schriftarten ist die Reihenfolge der Angabe entscheidend: ist die erste angegebene Schriftart verfügbar, wird diese verwendet. Ist sie nicht verfügbar, wird die zweite Schriftart verwendet, falls diese verfügbar ist usw.

Beachten Sie: Trennen Sie mehrere Schriftartennamen durch Kommata. Das W3-Konsortium empfiehlt, Schriftartnamen, die Leerzeichen enthalten, in Anführungszeichen zu setzen, also z.B. font-family:"Century Schoolbook",Times. Sie können dazu die doppelten oder die einfachen Anführungszeichen (Hochkomma) verwenden.
Beachten Sie: Falls Sie die CSS-Eigenschaften innerhalb eines style-Attributs im HTML-Quelltext vereinbaren möchten, dürfen Sie nicht die gleichen Anführungszeichen wie bei der HTML-Attributzuweisung verwenden.
Beispiel
<p style="font-family: Georgia, 'Times New Roman', serif;">...</p>
Empfehlung: Verwenden Sie in Ihrem Font Stack Schriftarten, die ähnliche Proportionen haben, so dass bei einem Einsatz der nachfolgenden Alternativschriften das Seitenlayout erhalten bleibt.

Schriftfamiliennamen[Bearbeiten]

Schriftarten sind beispielsweise Arial, Helvetica, Times Roman usw. Auch Schriftfamilien wie Sans Serif usw. gehören dazu.

Beachten Sie: Sollten Sie sich mit dem Gedanken tragen, eine der unter Windows geläufigen Schriften „Symbol“, „Webdings“ oder „Wingdings“ in Ihrer CSS-Datei anzugeben, dann sollten Sie es sich lieber nochmal überlegen. Während Internet Explorer und Google Chrome diese Schriften anzeigen (sofern sie installiert sind), ignoriert Firefox alle drei Schriftangaben, da es sich nicht um gültige Unicode-Schriften handelt (wo etwa Buchstaben sein sollten, erscheinen willkürliche Symbole. Dies kann zwar mitunter recht lustig sein, widerspricht aber der Idee von Unicode). Die Chancen stehen aber gut, dass die von Ihnen benötigten Symbole irgendwo im normalen Unicode-Zeichenvorrat auftauchen, so dass Sie deswegen nicht unbedingt auf Symbole verzichten müssen.
Empfehlung:

Sie können mittels @font-face auf dem eigenen Server oder bei Anbietern digitaler Schriften wie Google Fonts vorgehaltene Schriften einbinden.

Generische Schriftfamilien[Bearbeiten]

Folgende generische Schriftfamilien sind fest definiert - diese Angaben können Sie also neben Schriftartnamen benutzen:

  • serif, eine Schriftart mit Serifen
  • sans-serif, eine Schriftart ohne Serifen
  • cursive, eine Schriftart für Schreibschrift
  • fantasy, eine Schriftart für ungewöhnliche Schrift
  • monospace, eine Schriftart mit dicktengleichen Zeichen

Es empfiehlt sich, solche generische Schriftarten, wie im Beispiel gezeigt, als letzte Angabe in einer Wertzuweisung an font-family zu notieren. Damit bieten Sie dem Browser die Chance, eine Schriftart auszuwählen, die zumindest vom Typ her der gewünschten entspricht, falls jene auf dem System nicht vorhanden ist.

Beispiel ansehen …
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>font-family</title>
    <style>
      body        { width: 30em; }
      p           { font: 16px/1.5em; }
      .sans-serif { font-family: sans-serif; }
      .serif      { font-family: serif; }
      .cursive    { font-family: cursive; }
      .fantasy    { font-family: fantasy; }
      .monospace  { font-family: monospace; }
    </style>
  </head>
  <body>
    <h1>Schriftart</h1>
    <p>Alle folgenden Beispieltexte werden in der im Browser eingestellten Standardschriftart für die entsprechende Schrifttypen dargestellt.</p>
    <p class="serif">Dies hier ist ein kleiner Beispieltext in einer Serifenschrift.</p>
    <p class="sans-serif">Dies hier ist ein kleiner Beispieltext in einer serifenlosen Schrift.</p>
    <p class="cursive">Dies hier ist ein kleiner Beispieltext in einer Schriftart für Schreibschrift.</p>
    <p class="fantasy">Dies hier ist ein kleiner Beispieltext in einer Schriftart für ungewöhnliche Schrift.</p>
    <p class="monospace">Dies hier ist ein kleiner Beispieltext in einer dicktengleichen Schrift.</p>
  </body>
</html>

Vererbung auf Kindelemente[Bearbeiten]

Die Angabe inherit ist ebenfalls erlaubt. Sie bedeutet, dass die Schriftart des Elternelements verwendet wird.

Beachten Sie: Eine für ein Element festgelegte Schriftart wird ohne Ihr Zutun an die Kindelemente vererbt.

siehe auch[Bearbeiten]