CSS - @font-face規則

CSS @font-face 規則允許我們使用標準安全網頁字型選項中不可用的自定義字型。我們為字型指定一個唯一名稱，並提供字型檔案的路徑，從而在網頁開發中實現更豐富的排版。

語法

@font-face {
  font-properties
}

屬性值

字型屬性	值	描述
font-family	名稱	它指定字型的名稱。必填
src	URL	它指定必須從中下載字型的 URL。必填。
font-stretch	normal condensed ultra-condensed extra-condensed semi-condensed expanded semi-expanded extra-expanded ultra-expanded	它指定字型的拉伸程度。可選。預設值為 normal。
font-style	normal italic oblique	它指定字型的樣式。可選。預設值為 normal。
font-weight	normal bold (100-900) 值	它指定字型的粗細。可選。預設值為 normal。
unicode 範圍	unicode-range	它定義字型支援的 Unicode 字元範圍。可選。預設值為 "U+0-10FFFF"

CSS @Font Face 規則示例

以下示例解釋了具有不同值的@font-face規則。

使用單個字型的字型規則

要使用自定義字型，我們使用@font-face規則。首先，提供一個識別符號名稱，然後提供字型檔案的 url。之後，元素將能夠在font-family屬性中使用字型名稱。這在以下示例中顯示。

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        @font-face {
            font-family: "Sansation Light Font";
            src: url("/css/font/SansationLight.woff");
        }

        h1,
        p {
            font-family: "Sansation Light Font", serif;
        }

        p {
            font-weight: bold;
            font-style: italic;
        }
    </style>
</head>

<body>
    <h2>
        CSS @font-face rule
    </h2>
    <h1>
        TutorialsPoint
    </h1>
    <p>
        TutorialsPoint is an online platform offering free
        and comprehensive tutorials on a wide range of topics,
        including programming, web development, and 
        data science. It provides structured lessons, 
        examples, and exercises to support self-paced 
        learning and skill development.
    </p>
</body>

</html>

使用多個字型的字型規則

要使用多個自定義字型，我們使用@font-face規則。我們分別提供識別符號名稱，並指定字型檔案的 url。這在以下示例中顯示。

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        @font-face {
            font-family: "Sansation Light Font";
            src: url("/css/font/SansationLight.woff");
        }

        @font-face {
            font-family: "Bolder Text";
            src: url("/css/font/Brygada1918-Italic.ttf");
        }

        .top {
            font-family: "Sansation Light Font", serif;
        }

        .bottom {
            font-family: "Bolder Text", serif;
        }

        p {
            font-weight: bold;
            font-style: italic;
        }
    </style>
</head>

<body>
    <h2>
        CSS @font-face rule
    </h2>
    <h1 class="top">
        TutorialsPoint
    </h1>
    <p class="top">
        TutorialsPoint is an online platform offering free
        and comprehensive tutorials on a wide range of topics,
        including programming, web development, and 
        data science. It provides structured lessons, 
        examples, and exercises to support self-paced 
        learning and skill development.
    </p>
    <h1 class="bottom">
        TutorialsPoint
    </h1>
    <p class="bottom">
        TutorialsPoint is an online platform offering free
        and comprehensive tutorials on a wide range of topics,
        including programming, web development, and 
        data science. It provides structured lessons, 
        examples, and exercises to support self-paced 
        learning and skill development.
    </p>
</body>

</html>

支援的瀏覽器

字型格式
TTF/OTF	9.0*	4.0	3.5	3.1	10.0
WOFF	9.0	5.0	3.6	5.1	11.1
WOFF2	14.0	36.0	39.0	10.0	26.0
SVG	不支援	不支援	不支援	3.2	不支援
EOT	6.0	不支援	不支援	不支援	不支援

* 字型格式僅在設定為“可安裝”時有效

css_properties_reference.htm

列印頁面