CSS中的@font-face规则详解

一、知识点描述
@font-face 是CSS中的一个关键规则，用于自定义网页字体。它允许开发者引入并使用非系统自带的字体文件（如TTF、WOFF、WOFF2等格式），从而实现更丰富的网页排版效果。本知识点将系统讲解@font-face的语法、工作原理、兼容性优化及实际应用中的注意事项。

二、循序渐进讲解

第1步：基本语法与工作原理

• 核心作用：@font-face通过在CSS中定义字体族（font-family）并链接到字体文件，使浏览器能够下载并使用该字体渲染文本。
• 基本语法结构：

  @font-face {
    font-family: 'MyFont'; /* 自定义字体名称 */
    src: url('myfont.woff2') format('woff2'); /* 字体文件路径和格式 */
    font-weight: 400; /* 可选：指定字体粗细 */
    font-style: normal; /* 可选：指定字体样式 */
  }
  

• 工作流程：
  1. 浏览器解析CSS时发现@font-face规则。
  2. 根据src属性下载字体文件。
  3. 在页面中遇到font-family: 'MyFont'的样式时，使用已下载的字体渲染文本。

第2步：关键属性详解

1. font-family（必需）

   • 为自定义字体命名（如'MyFont'），此名称将用于后续CSS样式中。
   • 命名可以是任意字符串，但建议使用英文且避免与系统字体重名。

2. src（必需）

   • 指定字体文件的URL和格式，格式通过format()函数声明。
   • 多格式兼容性写法示例：

     @font-face {
       font-family: 'MyFont';
       src: url('myfont.woff2') format('woff2'),
            url('myfont.woff') format('woff');
     }
     

     • WOFF2：现代浏览器首选，压缩率更高。
     • WOFF：广泛支持，兼容旧浏览器。
     • 通常不推荐使用TTF/OTF等未压缩格式，因为它们文件较大。

3. font-weight 和 font-style（可选但重要）

   • 用于定义该字体文件对应的粗细（如400、700）和样式（如normal、italic）。
   • 不同字重/样式需分开定义：

     @font-face {
       font-family: 'MyFont';
       src: url('myfont-regular.woff2') format('woff2');
       font-weight: 400;
       font-style: normal;
     }
     @font-face {
       font-family: 'MyFont';
       src: url('myfont-bold.woff2') format('woff2');
       font-weight: 700;
       font-style: normal;
     }
     

   • 若不指定，浏览器无法自动匹配粗细/样式，可能导致回退到默认字体。

第3步：高级属性与性能优化

1. font-display属性

   • 控制字体加载期间的渲染行为，解决“字体未加载时的文本闪烁”问题。
   • 常用值：
     • swap：立即显示回退字体，字体加载后替换（可能引起布局偏移）。
     • block：短暂隐藏文本（约3秒），加载后显示字体（避免布局偏移但用户体验较差）。
     • fallback：折中方案，隐藏文本约100毫秒，超时后使用回退字体。
     • 示例：font-display: swap;

2. unicode-range属性

   • 指定字体仅应用于特定Unicode字符范围，减少不必要的下载。
   • 示例：unicode-range: U+0020-007F;（仅应用于基本拉丁字符）。

3. 字体子集化（Subsetting）

   • 通过工具（如glyphhanger、pyftsubset）移除未使用的字符，减少字体文件大小。
   • 适用于仅需支持特定语言或符号的场景。

第4步：实际应用与注意事项

1. 完整示例：

   @font-face {
     font-family: 'OpenSans';
     src: url('opensans-regular.woff2') format('woff2'),
          url('opensans-regular.woff') format('woff');
     font-weight: 400;
     font-style: normal;
     font-display: swap;
   }
   body {
     font-family: 'OpenSans', sans-serif;
   }
   

2. 兼容性回退策略：

   • 始终在font-family中指定至少一个系统回退字体（如sans-serif）。
   • 使用@supports规则检测浏览器支持：

     @supports (font-variation-settings: normal) {
       /* 支持可变字体的高级样式 */
     }
     

3. 常见问题：

   • FOIT（不可见文本闪烁）：浏览器在字体加载前隐藏文本，通过font-display: swap缓解。
   • FOUT（无样式文本闪烁）：回退字体与自定义字体差异大导致布局偏移，可通过CSS调整回退字体的size-adjust属性匹配。
   • 版权问题：确保字体文件已获得网页使用授权。

三、总结
@font-face是网页自定义字体的核心技术，掌握其语法、多格式兼容、字体加载控制和性能优化，能够显著提升排版效果与用户体验。实际开发中应结合字体子集化、font-display策略和回退方案，平衡视觉效果与性能。