Wie kann ich mit @font-face von CSS mehrere Schriftartvarianten (Fett, Kursiv) einbinden?

Einbinden mehrerer Schriftartvarianten mit CSS @font-face

Die @font-face-CSS-Regel ermöglicht es Webentwicklern, benutzerdefinierte Schriftarten in ihre einzubetten Entwürfe. Es kann jedoch zu einer Herausforderung werden, wenn Sie mit mehreren Varianten derselben Schriftart arbeiten, z. B. fett, kursiv und fett kursiv. In diesem Artikel wird erläutert, wie diese Variationen mithilfe der @font-face-Regel integriert werden.

In der @font-face-Regel bezieht sich die src-Eigenschaft normalerweise auf eine einzelne Schriftartdatei. Durch die Erstellung mehrerer @font-face-Regeln können Entwickler jedoch Varianten derselben Schriftart mit ihren jeweiligen Dateinamen definieren.

Betrachten Sie beispielsweise die DejaVu Sans-Schriftfamilie mit separaten Dateien für Fett, Kursiv und Fett kursiv. Der folgende CSS-Code zeigt, wie diese Varianten mithilfe mehrerer @font-face-Regeln eingebettet werden:

@font-face {
    font-family: "DejaVu Sans";
    src: url("fonts/DejaVuSans.ttf");
}
@font-face {
    font-family: "DejaVu Sans";
    src: url("fonts/DejaVuSans-Bold.ttf");
    font-weight: bold;
}
@font-face {
    font-family: "DejaVu Sans";
    src: url("fonts/DejaVuSans-Oblique.ttf");
    font-style: italic;
}
@font-face {
    font-family: "DejaVu Sans";
    src: url("fonts/DejaVuSans-BoldOblique.ttf");
    font-weight: bold;
    font-style: italic;
}

Durch die Erstellung separater @font-face-Regeln für jede Variante wird der Browser über die Verfügbarkeit verschiedener Schriftstile informiert innerhalb derselben Schriftfamilie. Anschließend kann es die entsprechende Schriftartdatei basierend auf den in der CSS-Deklaration angegebenen Werten für Schriftstärke und Schriftstil laden.

Es ist zu beachten, dass einige Browser das Argument format(„ttf“) möglicherweise nicht erkennen die src-Eigenschaft. Bei Kompatibilitätsproblemen wird empfohlen, diesen Parameter wegzulassen.

Das obige ist der detaillierte Inhalt vonWie kann ich mit @font-face von CSS mehrere Schriftartvarianten (Fett, Kursiv) einbinden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!