CSS Web 字体 font-face

关注

原创最新推荐文章于 2026-06-07 13:15:27 发布 336 阅读 AI 写同款· GEO 优化 ›

CSS3 字体 CSS3字体为我们提供了丰富的字体选择和样式控制，使得网页设计更加个性化和美观。通过合理运用字体选择、加载、样式和大小等属性，我们可以为网站带来更好的用户体验。在今后的网页设计中，字体将发挥越来越重要的作用。阅读详情

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"。