CSS3 文本样式 - @font-face 规则

核心知识点

@font-face 规则的概念

@font-face 规则是 CSS3 中的一个重要特性，它允许您在网页中使用自定义字体，而不依赖于用户计算机上已安装的字体。通过 @font-face 规则，您可以指定字体文件的位置，浏览器会自动下载并使用这些字体。

@font-face 规则的语法

@font-face {
  font-family: "FontName";
  src: url("font.woff2") format("woff2"),
       url("font.woff") format("woff"),
       url("font.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face 规则的属性

属性 描述
font-family 必选，指定字体的名称，在其他 CSS 规则中使用
src 必选，指定字体文件的位置和格式
font-weight 可选，指定字体的粗细，如 normal、bold 或数值
font-style 可选，指定字体的样式，如 normal、italic 或 oblique
font-display 可选，指定字体加载过程中的显示行为
unicode-range 可选，指定字体支持的 Unicode 字符范围
font-variant 可选，指定字体的变体
font-stretch 可选，指定字体的拉伸程度

字体格式

格式 描述 浏览器支持
woff2 Web Open Font Format 2.0，压缩率更高 现代浏览器
woff Web Open Font Format 1.0 所有现代浏览器
truetype (ttf) TrueType 字体 所有现代浏览器
embedded-opentype (eot) Embedded OpenType，专为 IE 设计 Internet Explorer
svg SVG 字体 旧版 iOS Safari

注意事项

  • 为了获得最佳兼容性，应提供多种格式的字体文件
  • 字体文件可能会增加页面加载时间，应合理使用
  • 确保您有权使用所添加的字体（遵守字体许可证）
  • 使用 font-display 属性可以改善字体加载过程中的用户体验

学习目标

  1. 理解 @font-face 规则的作用和语法
  2. 掌握如何使用 @font-face 规则在网页中引入自定义字体
  3. 了解如何优化字体加载和显示
  4. 能够根据不同场景选择合适的字体格式和配置

代码示例

基本用法示例

/* 引入自定义字体 */
@font-face {
  font-family: "MyCustomFont";
  src: url("fonts/mycustomfont.woff2") format("woff2"),
       url("fonts/mycustomfont.woff") format("woff"),
       url("fonts/mycustomfont.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* 引入粗体版本 */
@font-face {
  font-family: "MyCustomFont";
  src: url("fonts/mycustomfont-bold.woff2") format("woff2"),
       url("fonts/mycustomfont-bold.woff") format("woff"),
       url("fonts/mycustomfont-bold.ttf") format("truetype");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

/* 引入斜体版本 */
@font-face {
  font-family: "MyCustomFont";
  src: url("fonts/mycustomfont-italic.woff2") format("woff2"),
       url("fonts/mycustomfont-italic.woff") format("woff"),
       url("fonts/mycustomfont-italic.ttf") format("truetype");
  font-weight: normal;
  font-style: italic;
  font-display: swap;
}

/* 使用自定义字体 */
body {
  font-family: "MyCustomFont", Arial, sans-serif;
}

h1 {
  font-family: "MyCustomFont", Arial, sans-serif;
  font-weight: bold;
}

.italic-text {
  font-family: "MyCustomFont", Arial, sans-serif;
  font-style: italic;
}

使用 Google Fonts 示例

<!-- 通过 link 标签引入 Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&family=Open+Sans&display=swap" rel="stylesheet">

<style>
  /* 使用 Google Fonts */
  body {
    font-family: 'Open Sans', sans-serif;
  }
  
  h1 {
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
  }
  
  p {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
  }
</style>

优化字体加载示例

/* 优化字体加载 */
/* 1. 使用 font-display 属性 */
@font-face {
  font-family: "OptimizedFont";
  src: url("fonts/optimized.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
  font-display: swap; /* 字体加载过程中显示备用字体，加载完成后替换 */
}

/* 2. 预加载关键字体 */
/* 在 HTML head 中添加：
<link rel="preload" href="fonts/optimized.woff2" as="font" type="font/woff2" crossorigin>
*/

/* 3. 限制 Unicode 范围 */
@font-face {
  font-family: "ChineseFont";
  src: url("fonts/chinese.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
  unicode-range: U+4E00-U+9FFF; /* 仅包含中文字符范围 */
}

/* 使用字体 */
body {
  font-family: "OptimizedFont", Arial, sans-serif;
}

.chinese-text {
  font-family: "ChineseFont", "OptimizedFont", Arial, sans-serif;
}

实用案例分析

案例 1: 企业品牌字体

在企业网站中，使用品牌专用字体可以增强品牌识别度：

/* 引入企业品牌字体 */
@font-face {
  font-family: "BrandFont";
  src: url("fonts/brand-regular.woff2") format("woff2"),
       url("fonts/brand-regular.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "BrandFont";
  src: url("fonts/brand-bold.woff2") format("woff2"),
       url("fonts/brand-bold.woff") format("woff");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

/* 使用品牌字体 */
.logo {
  font-family: "BrandFont", Arial, sans-serif;
  font-weight: bold;
  font-size: 24px;
}

h1, h2, h3 {
  font-family: "BrandFont", Arial, sans-serif;
}

.nav-item {
  font-family: "BrandFont", Arial, sans-serif;
  font-weight: bold;
}

案例 2: 特殊字体效果

在标题或强调文本中使用特殊字体可以增强视觉效果：

/* 引入装饰性字体 */
@font-face {
  font-family: "DecorativeFont";
  src: url("fonts/decorative.woff2") format("woff2"),
       url("fonts/decorative.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* 使用装饰性字体 */
.hero-title {
  font-family: "DecorativeFont", Georgia, serif;
  font-size: 48px;
  line-height: 1.2;
  margin-bottom: 20px;
}

.quote-text {
  font-family: "DecorativeFont", Georgia, serif;
  font-size: 24px;
  font-style: italic;
  line-height: 1.4;
}

案例 3: 多语言字体支持

在多语言网站中，为不同语言使用合适的字体：

/* 引入英文基础字体 */
@font-face {
  font-family: "BaseFont";
  src: url("fonts/base-regular.woff2") format("woff2"),
       url("fonts/base-regular.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* 引入中文字体 */
@font-face {
  font-family: "ChineseFont";
  src: url("fonts/chinese.woff2") format("woff2"),
       url("fonts/chinese.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
  unicode-range: U+4E00-U+9FFF;
}

/* 引入日文字体 */
@font-face {
  font-family: "JapaneseFont";
  src: url("fonts/japanese.woff2") format("woff2"),
       url("fonts/japanese.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
  unicode-range: U+3040-U+30FF, U+FF00-U+FFEF;
}

/* 使用字体 */
body {
  font-family: "ChineseFont", "JapaneseFont", "BaseFont", Arial, sans-serif;
}

ASCII 示意图

@font-face 工作原理

+------------------------+
| 网页加载               |
+------------------------+
            |
            v
+------------------------+
| 解析 @font-face 规则   |
+------------------------+
            |
            v
+------------------------+
| 下载字体文件           |
+------------------------+
            |
            v
+------------------------+
| 浏览器渲染文本         |
| - font-display: auto   | 阻塞渲染，直到字体加载完成
| - font-display: block  | 短暂阻塞，然后显示备用字体
| - font-display: swap   | 立即显示备用字体，加载完成后替换
| - font-display: fallback | 短暂显示空白，然后显示备用字体
| - font-display: optional | 仅在字体快速加载时使用
+------------------------+

字体格式兼容性

+-------------+-------------+-------------+-------------+-------------+
| 格式        | Chrome      | Firefox     | Safari      | Edge        |
+-------------+-------------+-------------+-------------+-------------+
| woff2       | ✅          | ✅          | ✅          | ✅          |
| woff        | ✅          | ✅          | ✅          | ✅          |
| ttf         | ✅          | ✅          | ✅          | ✅          |
| eot         | ❌          | ❌          | ❌          | ✅          |
| svg         | ❌          | ❌          | ⚠️ 旧版支持  | ❌          |
+-------------+-------------+-------------+-------------+-------------+

✅ = 完全支持
⚠️ = 部分支持
❌ = 不支持

实践练习

练习 1: 引入自定义字体

  1. 选择一个开源字体（如从 Google Fonts 或 Font Squirrel 下载）
  2. 准备不同格式的字体文件（至少包含 woff2 和 woff）
  3. 使用 @font-face 规则引入字体
  4. 在网页中使用该字体，测试不同字重和样式

练习 2: 优化字体加载

  1. 为引入的字体添加 font-display: swap 属性
  2. 在 HTML head 中添加字体预加载指令
  3. 测试字体加载性能，比较优化前后的差异

练习 3: 多语言字体支持

  1. 引入适合不同语言的字体（如英文、中文、日文）
  2. 使用 unicode-range 属性限制每种字体的字符范围
  3. 创建包含多种语言的测试页面，验证字体是否正确应用

总结

@font-face 规则是 CSS3 中一个强大的特性，它允许您在网页中使用自定义字体，而不依赖于用户计算机上已安装的字体。通过合理使用 @font-face 规则，您可以：

  • 增强品牌识别度：使用企业专用字体
  • 提升视觉效果：使用特殊装饰性字体
  • 改善用户体验：为不同语言提供合适的字体

在使用 @font-face 规则时，应注意以下几点：

  • 提供多种格式的字体文件以确保兼容性
  • 优化字体加载以减少对页面性能的影响
  • 遵守字体许可证，确保您有权使用所添加的字体
  • 使用 font-display 属性改善字体加载过程中的用户体验

通过本教程的学习，您应该已经掌握了如何使用 @font-face 规则在网页中引入和使用自定义字体，以及如何优化字体加载和显示。

« 上一篇 CSS3 文本样式 - vertical-align 属性 下一篇 » CSS3 文本样式 - font-variant 属性
↑