深入了解 CSS @font-face 规则：自定义网页字体

CSS 中的 @font-face 规则让我们能够在网页中引入自定义字体。这意味着我们不再受限于用户设备上预装的字体，可以自由地使用任何字体，从而确保网页设计与品牌排版风格保持一致。

通过添加自定义字体，我们可以创建独特的设计风格，强化品牌形象，并利用视觉上更具吸引力的字体来提升用户体验。

语法

@font-face {
  font-family: fontName;
  src: url(fontFile path);
  font-stretch: font-stretch Property;
  font-weight: font-weight Property;
  font-style: font-style Property;
}

@font-face 规则的关键属性

让我们通过下表来详细了解 @font-face 规则中的一些关键属性：

描述

—

指定在 CSS 中使用的自定义字体名称。

定义外部字体文件的位置（URL）。

调整字体显示的宽度比正常宽度更宽或更窄。

设置字体的粗细（例如：normal、bold 或 400、700 等具体数值）。

决定文本是以正常、斜体还是倾斜样式显示。### 常用的托管字体服务

这些服务可以为我们提供各种类型的字体：

• Fonts.com
• Google Fonts
• Typotheque
• Typography

CSS @font-face 规则示例

让我们来看一些关于 @font-face 规则的实际应用示例：

示例 1： 基本用法

这个例子展示了如何使用 @font-face 规则来指定不同的字体属性，从而对文本进行相应的装饰。

HTML

INLINECODEbb81972a`INLINECODE520c0d39`


输出效果：

!font-face multiple font output

> 注意： 目前主要有 5 种字体格式，它们分别是：TTF/OTF, WOFF, WOFF2, SVG 和 EOT。

浏览器支持情况

@font-face 规则得到了所有主流浏览器的支持，包括：

• Google Chrome
• Edge 12
• Firefox 3.5
• Safari 3.1
• Opera 10