Wie kann ich mehrere Schriftartvarianten (Fett, Kursiv) mithilfe von @font-face in CSS einbetten?

Einbetten mehrerer Schriftartvarianten mit @font-face

In CSS ermöglicht Ihnen die @font-face-Regel das Einbetten benutzerdefinierter Schriftarten in Ihre Webseiten. Was aber, wenn Sie mehrere Varianten derselben Schriftart haben, z. B. fett, kursiv oder beides? Wie können Sie sicherstellen, dass der Browser die richtige Variante lädt und verwendet?

Die Lösung besteht darin, mehrere @font-face-Regeln zu erstellen, die jeweils die gewünschte Variante angeben. Um beispielsweise DejaVu Sans in Fett- und Kursivschrift-Varianten einzubetten:

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

Dieser Code stellt sicher, dass der Browser, wenn Sie die Schriftfamilie auf „DejaVu Sans“ einstellen und die Fett- und/oder Kursivschrift anwenden lädt die entsprechende Variante der Schriftart.

Beachten Sie, dass das Argument format("ttf") optional und möglicherweise nicht in allen Browsern erforderlich ist. Außerdem führte CSS3 eine vereinfachte Syntax zum Festlegen von Schriftstilen ein. Anstatt mehrere @font-face-Regeln zu verwenden, können Sie eine durch Kommas getrennte Liste von Werten für die Schriftstärke und den Schriftstil in einer einzigen Regel verwenden:

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

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