CSS font-family-Eigenschaft

Die font-family-Eigenschaft ermöglicht es Ihnen, eine priorisierte Liste von Schriftfamilie-Namen und/oder generischen Schriftfamilie-Namen für das ausgewählte Element anzugeben.

Wir verwenden Kommas, um die Werte zu trennen und sie als Alternativen anzuzeigen. Der Browser wählt die erste verfügbare Schriftart aus. In einigen Fällen kann diese jedoch nicht verfügbar sein, wenn der Computer des Benutzers diese Schriftart nicht installiert hat. Tritt dieser Fall ein, versucht der Browser, die nächste Alternative zu verwenden, um den Text anzuzeigen (oder sogar ein Zeichen, das die erste Schriftart nicht darstellen kann).

Es gibt zwei Arten von Schriftfamilie-Namen:

family-name: Dies ist der Name einer Schriftfamilie wie "times", "courier", "arial" usw.
generic-family: Dies ist der Name einer generischen Schriftfamilie wie "serif", "sans-serif", "system-ui", "ui-sans-serif", "cursive", "fantasy", "monospace".

Wenn der Schriftname Leerzeichen enthält, muss er in Anführungszeichen gesetzt werden, z. B.: "Courier New".

TIP

Wenn wir eine einzigartige Schriftfamilie verwenden möchten, müssen wir die @font-face-Regel verwenden.

Anfangswert	serif
Gilt für	Alle Elemente. Gilt auch für ::first-letter und ::first-line.
Vererbbar	Ja.
Animierbar	Nein.
Version	CSS1
DOM-Syntax	object.style.fontFamily = "Verdana, sans-serif";

Die font-family-Eigenschaft gibt eine Liste von Schriftarten an, sortiert von höchster Priorität bis zum niedrigsten Fallback. Die Schriftartenauswahl stoppt nicht bei der ersten Schriftart in der Liste; sie erfolgt Zeichen für Zeichen. Das bedeutet, dass der Browser, wenn eine verfügbare Schriftart kein Glyph für ein bestimmtes Zeichen besitzt, die nächsten Schriftarten in der Liste versucht.

Syntax

Syntax der CSS font-family-Eigenschaft

css

font-family: family-name | generic-family | initial | inherit;

Beispiel für die font-family-Eigenschaft:

Beispiel der CSS font-family-Eigenschaft mit dem Wert sans-serif

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
      }
    </style>
  </head>
  <body>
    <h2>Font-family property example</h2>
    <p>We used "Lucida Grande" font-family for this text.</p>
  </body>
</html>

Try it Yourself »

Werte

Wert	Beschreibung	Ausführen
family-name, generic-family	Priorisierte Liste von Schriftfamilie-Namen und/oder generischen Schriftfamilie-Namen.	Ausführen »
initial	Legt die Eigenschaft auf ihren Standardwert fest.	Ausführen »
inherit	Erbt die Eigenschaft von ihrem übergeordneten Element.	Ausführen »

Praxis

Was macht die 'font-family'-Eigenschaft in CSS?

Sie legt die Schriftart des Textes festSie ändert die TextfarbeSie gibt die Ausrichtung des Textes anErmöglicht die Verwendung einer Fallback-Schriftart, falls die angegebene Schriftart nicht verfügbar istErmöglicht die Angabe von mehr als einer Schriftart

CSS font-family-Eigenschaft ​

Syntax ​

Beispiel für die font-family-Eigenschaft: ​

Werte ​

Praxis ​

CSS font-family-Eigenschaft

Syntax

Beispiel für die font-family-Eigenschaft:

Werte

Praxis