Wie kann ich mehrere Schriftartvarianten (Fett, Kursiv) in eine einzige @font-face-Regel einbetten?

Mehrere Schriftartvarianten in einer einzigen @font-face-Regel

In CSS können Sie mit der @font-face-Regel benutzerdefinierte Schriftarten in eine Webseite einbetten. Wenn Sie jedoch mit mehreren Schriftartvarianten arbeiten (z. B. fett, kursiv, fett kursiv), kann es unklar sein, wie diese in einer einzigen Regel angegeben werden sollen.

Sie können mehrere Schriftartdateien für dieselbe Schriftart einbetten Verwenden Sie mehrere @font-face-Regeln. Wenn Sie beispielsweise separate Dateien für DejaVu Sans fett, kursiv und fett kursiv haben:

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

Im obigen Beispiel gibt jede @font-face-Regel eine andere Schriftartvariante an. Wenn ein Webbrowser auf eine Schriftartdeklaration stößt (z. B. „font-weight:bold“), lädt er die entsprechende Schriftartdatei und wendet den entsprechenden Stil an.

Beachten Sie, dass Chrome das Format („ttf.“) nicht erkennt ")-Argument im obigen Beispiel, daher kann es weggelassen werden. Darüber hinaus erlaubt CSS3 nur eine Schriftartdeklaration pro @font-face-Regel und nicht eine durch Kommas getrennte Liste, wie im Beispiel gezeigt.

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