DigitalOcean bietet Cloud-Produkte für jede Phase Ihrer Reise. Starten Sie mit 200 $ kostenlosem Guthaben!
Die Eigenschaft font-family definiert die Schriftart, die auf das ausgewählte Element angewendet wird. Die ausgewählte Schriftart ist nicht ein einzelnes Schriftschnitt, sondern eine „Familie“, und kann somit von anderen typografischen Eigenschaftswerten abhängen, um den korrekten Schriftschnitt innerhalb der Familie auszuwählen.
body {
font-family: Arial, Helvetica, sans-serif;
}Ein Wert kann einer der folgenden sein
- Ein Schriftfamilienname, der mit einer Schriftart übereinstimmt, die auf der Seite eingebettet oder auf dem System des Benutzers verfügbar ist.
- Eine Reihe von Familiennamen, durch Kommas getrennt, die einen generischen Familiennamen enthalten kann
Wenn mehrere Familiennamen verwendet werden, wählt der Browser den ersten aus, den er entweder auf der Seite mit @font-face eingebettet oder auf dem Betriebssystem des Benutzers installiert findet.
Für font-family gibt es keinen spezifischen Standard- oder Anfangswert; der Anfangswert hängt immer vom Browser und/oder Betriebssystem ab.
Generische Familiennamen
Wenn mehrere Werte für eine einzelne Deklaration verwendet werden, wird empfohlen, am Ende einen generischen Familientyp als Fallback aufzulisten, um die beste typografische Erfahrung zu gewährleisten.
code {
font-family: Courier, Monaco, monospace;
}Im obigen Beispiel sind „Courier“ und „Monaco“ echte Familiennamen von tatsächlichen Schriftarten, während „monospace“ nur eine generische Referenz auf eine auf dem System des Benutzers installierte, nicht proportional getrennte Schriftart ist.
Wenn die ersten beiden nicht installiert sind, wählt der Browser die beste Option, aber nur aus nicht proportional getrennten Schriftarten. Ohne die generische Familie würde die Schriftart auf die Standard-Schriftart des Benutzers zurückfallen (wahrscheinlich eine Serif oder Sans-Serif), was unerwünscht wäre.
Generische Familiennamen sind serif, sans-serif, cursive, fantasy und monospace.
Wenn ein Familienname mit einem generischen Familiennamen übereinstimmt, sollte der Familienname in Anführungszeichen gesetzt werden, um anzuzeigen, dass er nicht generisch ist.
Mehrwortige Familiennamen
Wenn ein Familienname mehrere Wörter enthält, die durch Leerzeichen getrennt sind, wird empfohlen, den Familiennamen in Anführungszeichen (einfach oder doppelt) zu setzen.
code {
font-family: "Times New Roman", Georgia, serif;
}Dies ist nicht immer notwendig, aber es ist im Allgemeinen sicherer, die Anführungszeichen für jeden Familiennamen zu verwenden, der Leerzeichen oder Sonderzeichen enthält.
Verwandte Eigenschaften
Weitere Ressourcen
Browser-Unterstützung
| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Funktioniert | Funktioniert | Funktioniert | Funktioniert | Funktioniert | Funktioniert | Funktioniert |
„Es wird empfohlen, den Familiennamen in Anführungszeichen (einfach oder doppelt) zu setzen.“
WARUM?
Weil es von der Spezifikation empfohlen wird. Aber es ist tatsächlich nicht immer notwendig … wenn Sie die wahren Fakten dazu wissen wollen, lesen Sie dies
https://mathiasbynens.be/notes/unquoted-font-family
Und Sie können dieses verwandte Tool zum Testen verwenden
https://mothereff.in/font-family
Weil der Interpreter ihn „falsch interpretieren“ und keine erforderliche Ausgabe produzieren könnte.
Sehr interessant. Chromium (Version 37) benötigt keine getrennten Familiennamen durch Kommas, daher font-family:“ubuntu mono”,”Liberation Sans”,”serif”; = font-family:“ubuntu mono” “Liberation Sans” “serif”; PS. Firefox (ebenfalls Version 37) funktioniert nur korrekt, wenn eine Reihe von Familiennamen durch Kommas getrennt ist.
Empfohlene Erklärung, warum Anführungszeichen bei Schriftfamilienwerten verwendet werden. Im zweiten Absatz der Generischen Familiennamen unter dem Bild sollte der Autor seine/ihre Erklärung für einen CSS-Anfänger, der recherchiert, etwas vertiefen.
Es gibt keinen Grund für diese Anführungszeichen, ich habe sie nur verwendet, um auf das im Beispiel Gezeigte zu verweisen.
Ok, cool, danke.