CSS Web 字体 font-face

使用@font-face自定义网页字体

最新推荐文章于 2025-10-10 23:18:57 发布

原创最新推荐文章于 2025-10-10 23:18:57 发布 · 287 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #linq #p2p

@font-face规则允许开发者指定在线字体，消除对用户电脑字体的依赖。通过定义字体名称和URL，可以在CSS中引入自定义字体。此外，还可以通过font-weight等描述符设置字体风格和粗细。在实际应用中，需注意字体URL使用小写，以确保在IE浏览器中的兼容性。

font-face

它允许网页开发者为其网页指定在线字体。通过这种作者自备字体的方式，font-face可以消除对用户电脑字体的依赖。 font-face 不仅可以放在在CSS的最顶层, 也可以放在 @规则的条件规则组中。

语法

@font-face {
  [ font-family: <family-name>; ] ||
  [ src: <src>; ] ||
  [ unicode-range: <unicode-range>; ] ||
  [ font-variant: <font-variant>; ] ||
  [ font-feature-settings: <font-feature-settings>; ] ||
  [ font-variation-settings: <font-variation-settings>; ] ||
  [ font-stretch: <font-stretch>; ] ||
  [ font-weight: <font-weight>; ] ||
  [ font-style: <font-style>; ] ||
  [ size-adjust: <size-adjust>; ] ||
  [ ascent-override: <ascent-override>; ] ||
  [ descent-override: <descent-override>; ] ||
  [ line-gap-override: <line-gap-override>; ]
}

在 @font-face 规则中：首先定义字体的名称（例如 myFirstFont），然后指向该字体文件。

提示：字体 URL 始终使用小写字母。大写字母可能会在 IE 中产生意外结果。

如需将字体用于 HTML 元素，请通过 font-family 属性引用字体名称（myFirstFont）：

@font-face {
  font-family: myFirstFont;
  src: url(sansation_light.woff);
}

div {
  font-family: myFirstFont;
}

还可以添加粗体文字

@font-face {
  font-family: myFirstFont;
  src: url(sansation_bold.woff);
  font-weight: bold;
}

CSS 字体描述

下表列出了能够在 @font-face 规则内定义的所有字体描述符（font descriptor）：

描述符	值	描述
font-family	name	必需。定义字体名称。
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 200 300 400 500 600 700 800 900	可选。定义字体的粗细。默认值是 "normal"。
unicode-range	unicode-range	可选。定义字体支持的 UNICODE 字符范围。默认值是 "U+0-10FFFF"。