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>

支持的浏览器

字体格式 Chrome Edge Firefox Safari Opera
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
广告