如何在單一 @font-face 規則中嵌入多個字體變體（粗體、斜體）？

單一@font-face 規則中的多個字體變體

在CSS 中，@font-face 規則可讓您將自訂字體嵌入到網頁中。但是，當使用多種字體變體（例如粗體、斜體、粗體斜體）時，可能不清楚如何在單一規則中指定它們。

要嵌入同一字體的多個字體文件，您可以使用多個@font-face規則。例如，如果您有 DejaVu Sans 粗體、斜體和粗斜體的單獨檔案：

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

在上面的範例中，每個 @font-face 規則指定不同的字體變體。當網頁瀏覽器遇到字體樣式聲明（例如，font-weight：bold）時，它將載入相應的字體檔案並套用適當的樣式。

請注意，Chrome 無法辨識該格式（「ttf上例中的「)參數，因此可以省略。此外，CSS3 只允許每個 @font-face 規則宣告一個字型樣式，而不是範例中所示的逗號分隔清單。

以上是如何在單一 @font-face 規則中嵌入多個字體變體（粗體、斜體）？的詳細內容。更多資訊請關注PHP中文網其他相關文章！