如何在 CSS 中匯入字體：綜合指南

在CSS 中導入字體：綜合指南

在處理網頁時，合併自訂字體可以顯著增強視覺吸引力和用戶體驗。但是，依賴客戶端可能未安裝的字體可能會導致渲染問題。本文旨在解決這個問題，並提供有關如何在 CSS 中匯入字體的逐步指南。

考慮以下程式碼片段，它嘗試匯入自訂字體但無法正確顯示：

<code class="css">@font-face {
    font-family: EntezareZohoor2;
    src: url(Entezar2.ttf) format("truetype");
}

.EntezarFont {
    font-family: EntezareZohoor2, B Nazanin, Tahoma !important;
}</code>

要在CSS 中成功匯入字體，正確的語法如下：

<code class="css">@font-face {
    font-family: 'EntezareZohoor2';
    src: url('fonts/EntezareZohoor2.eot'), url('fonts/EntezareZohoor2.ttf') format('truetype'), url('fonts/EntezareZohoor2.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}</code>

此程式碼片段中的每一行都有特定用途：

• font-family：指定要在CSS 樣式中引用的字體名稱。

• src：定義字體的檔案位置和格式：

  • eot for Internet Explorer
  • ttf（適用於Firefox、Safari、Opera 和Chrome）
  • svg（適用於Chrome 和Opera）
• font-weight：指定字體粗細(例如，正常，粗體）
• font-style ：指定字體樣式（例如，正常，斜體）

正確匯入字體後，您可以使用該字體CSS 樣式中的-family 屬性將其套用至文字元素。例如：

<code class="css">#newfont {
    font-family: 'EntezareZohoor2';
}</code>

透過遵循這些準則，您可以將自訂字體無縫整合到您的網頁設計中，並確保在不同瀏覽器和裝置上呈現一致的字體。

以上是如何在 CSS 中匯入字體：綜合指南的詳細內容。更多資訊請關注PHP中文網其他相關文章！