Mitgliederversammlung 2017


Die diesjährige Mitgliederversammlung des Vereins SELFHTML e.V. findet am 7.10.2017 um 10:00 Uhr in Berlin statt.

Die Adresse des Tagungsortes sowie die geplante Tagesordnung entnehmt ihr bitte der Seite Mitgliederversammlung 2017.

Interessierte Gäste sind gern gesehen.

Anmeldung: https://forum.selfhtml.org/events/2

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 eine oder mehrere Schriftarten (Schriftfamilien → Begriffsklärung) angeben. Falls die angegebenen Schriften nicht angezeigt werden können, bleibt die Angabe wirkungslos und es werden die browsereigenen Standardschriften angezeigt.

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

Syntax

font-family: [<family-name> | <generic-family>]

Folgende Werte sind möglich:

Es sind auch mehrfache Angaben in einer kommaseparierten Liste, einem sogenannten Font Stack möglich.

Schriftfamilien[Bearbeiten]

Generische Schriftfamilien[Bearbeiten]

Folgende generische (engl. generic für allgemein) Schriftfamilien sind fest definiert:

  • 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
Beispiel ansehen …
      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; }
Die Textabsätze erhalten über ihre Klassen per CSS mit font-family jeweils andere generische Schriftfamilien zugewiesen.
Empfehlung: Verwenden Sie solch generische Schriftfamilien als letzte Angabe in einer Wertzuweisung an font-family. Damit bieten Sie dem Browser die Chance, eine Schrift auszuwählen, die zumindest vom Typ her der gewünschten entspricht, falls jene auf dem System nicht vorhanden ist.

Familiennamen[Bearbeiten]

Sie können aber auch bestimmte Familiennamen wie Arial, Times New Roman oder Helvetica angeben. Schriften können vom Browser nur zur Anzeige genutzt werden, wenn diese im Betriebssystem installiert sind oder von der Webseite bereit gestellt werden. Sie können allerdings mehrere Schriften angeben, um die Darstellung auf unterschiedlichen Systemen bestimmen zu können.

Beispiel: Einbindung mehrerer Schriften
body { 
  font-family: 'Helvetica, Arial, Geneva, sans-serif;
}
</style>
Es werden mehrere serifenlose Schriften eingebunden. Helvetica ist das Original und gehört an den Anfang! In der Windowswelt enspricht dieser Schrift die Arial, alternativ noch die Geneva. Als generische Schriftfamilie wird sans-serif angegeben.

Schriften können aber auch mittels @font-face auf dem eigenen Server oder bei Anbietern digitaler Schriften wie Google Fonts vorgehalten und dann von Ihnen eingebunden werden.

Beispiel ansehen …
<link href="https://fonts.googleapis.com/css?family=Reenie+Beanie" rel="stylesheet"> 
<style>
h2 { 
  font-family: 'Reenie Beanie', cursive;
  font-size: 4em;
}
</style>
Die von Google zur Verfügung gestellte Schrift wird durch ein Link-Element referenziert und dann im CSS über font-family eingebunden.
Als Fallback wird die generische Schriftfamilie cursive eingebunden.

Font Stacks[Bearbeiten]

Falls die angegebene Schriftfamilie nicht angezeigt werden kann, können Sie mehrere Alternativen festlegen. Bei mehreren angegebenen Schriften 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.
Beispiel: Schriftfamilien mit Leerzeichen im CSS
p { 
  font-family: Georgia, "Times New Roman", serif;
}


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: Schriftfamilien mit Leerzeichen innerhalb eines style-Attributs
<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.

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.

Anwendung und Praxis[Bearbeiten]

Sie haben mit font-family nahezu unbegrenzte Möglichkeiten, ansprechende und außergewöhnliche Schriften einzubinden. Dabei sollten Sie jedoch immer die Benutzerfreundlichkeit wie die Lesbarkeit für alle Nutzer und die mit der Einbindung eigener Schriften verbundene Datenlast im Auge behalten.

Lesbarkeit[Bearbeiten]

Eine Überschrift auf einer Hero-Image-Webseite gewinnt durch eine eigene Schrift. Bei der Gestaltung von normalem Text sollte aber die Lesbarkeit im Vordergrund stehen, so dass oft der Einsatz von Systemschriften und generischen Schriftfamilien bessere Ergebnisse bringt.

Dabei spielt es bei heutigen hochauflösenden Bildschirmen keine Rolle mehr, ob serifenlose Schriften wie Arial oder Serifen-Schriften wie Times New Roman verwendet werden.

FOIT und FOUT[Bearbeiten]

Wenn Sie externe Schriften einbinden, werden häufig viele Schriftschnitte, Breiten und Größen mitgeliefert, sodass ein umfangreiches Paket der Schriftfamilie heruntergeladen wird.

Durch den beim Laden von externen Schriften verzögerten Seitenaufbau kam es früher oft zum unerwünschten Flash of Unstyled Text (Aublitzen von ungestyltem Text): Während des Herunterladens des Fonts wurde die im Fallback angegebene Systemschrift angezeigt, die dann nach dem erfolgreichen Herunterladen durch den Webfont ersetzt wurde.

Um dies zu verhindern, wird in vielen Seiten der Fallback per JavaScript ausgeblendet. Dies führt aber zum noch schlimmeren Flash of Invisible Text (Aufblitzen von unsichtbarem Text), der auf mobilen Geräten selbst mit LTE aufgrund höherer Latenzzeiten je nach Umfang der Seite eine kleine Ewigkeit dauern kann.

Empfehlung: Weniger ist oft mehr!

Icons und Symbole[Bearbeiten]

Während Symbole in MS-Office über die unter Windows geläufigen Schriften „Symbol“, „Webdings“ oder „Wingdings“ eingebunden werden, ist dies im Webdesign nicht möglich, da diese Schriften auf anderen Plattformen nicht verfügbar sind.

Verwenden Sie hier:

Siehe auch[Bearbeiten]


Weblinks[Bearbeiten]