Wie bette ich mehrere Schriftartvariationen mit @font-face ein?

So betten Sie mehrere Schriftartenvarianten mit @font-face ein

Beim Einbetten benutzerdefinierter Schriftarten mit @font-face kann dies hilfreich sein um mehrere Variationen zu unterstützen, z. B. Fett, Kursiv und eine Kombination aus beiden. Hier finden Sie eine ausführliche Erklärung zum Einbetten mehrerer Schriftartdateien für dieselbe Schriftart:

Erstellen von @font-face-Regeln für jede Variation

Um verschiedene Varianten einer Schriftart einzubetten , erstellen Sie für jede Variante separate @font-face-Regeln. Für eine Schriftfamilie mit dem Namen „DejaVu Sans“ würden Sie beispielsweise die folgenden Regeln erstellen:

@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, oblique;
}

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

Schriftvarianten HTML-Elementen zuweisen

Sobald das @ Wenn Font-Face-Regeln definiert sind, können Sie HTML-Elementen mithilfe der Eigenschaften „font-weight“ und „font-style“ die verschiedenen Variationen zuweisen. Zum Beispiel:

strong {
    font-family: "DejaVu Sans";
    font-weight: bold;
}

Dadurch wird die fette Variante der Schriftart DejaVu Sans auf alle starken Elemente angewendet.

Hinweis:

• Es ist wichtig, für jede Variation separate @font-face-Regeln zu erstellen, da der Browser die Beziehung zwischen den nicht automatisch verstehen kann Dateien.
• Das Argument „format()“ wird nicht von allen Browsern unterstützt, daher wird empfohlen, es wegzulassen.
• CSS3 lässt im Gegensatz zu CSS2 nur einen einzigen Schriftstilwert zu unterstützt eine durch Kommas getrennte Liste.

Das obige ist der detaillierte Inhalt vonWie bette ich mehrere Schriftartvariationen mit @font-face ein?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!