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

打印页面