如何在 CSS 中使用 @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;
}

此程式碼可確保當您將字體系列設定為「DejaVu Sans」並套用粗體和/或斜體樣式時，瀏覽器將加載適當的字體變體。

請注意，format("ttf") 參數是可選的，並且可能不是所有情況下都必需的瀏覽器。此外，CSS3 還引入了用於指定字體樣式的簡化語法。您可以在單一規則中使用逗號分隔的 font-weight 和 font-style 值列表，而不是使用多個 @font-face 規則：

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

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