Web字体
1. 基本概念
Web字体指通过CSS的@font-face规则，将自定义字体文件嵌入网页的技术。与传统仅依赖用户本地字体的方式不同，它允许开发者使用服务器上的字体文件（如.woff、.woff2格式），确保文字在不同设备上显示一致。

2. 技术实现原理

• 字体文件格式：
  • WOFF/WOFF2：专为Web设计的压缩格式，WOFF2比WOFF压缩率更高，减少加载时间。
  • TTF/OTF：基础字体格式，但文件较大，通常需转换为WOFF2以优化性能。
• CSS加载机制：
  通过@font-face声明字体家族和源文件路径，浏览器下载并临时存储字体，随后应用于页面文本。

  @font-face {  
    font-family: 'MyFont';  
    src: url('font.woff2') format('woff2');  
  }  
  body { font-family: 'MyFont', sans-serif; }  
  

3. 性能优化与挑战

• 加载策略：
  • FOIT（不可见文本闪烁）：浏览器在字体加载前隐藏文本，可能导致布局延迟。
  • FOUT（无样式文本闪烁）：先显示备用字体，加载后切换，需通过font-display: swap控制。
• 子集化：仅保留需使用的字符集（如拉丁字母、数字），减小文件体积。
• 预加载：使用<link rel="preload">优先加载关键字体，避免渲染阻塞。

4. 高级应用与趋势

• 可变字体：单个文件包含字重、宽度等多项调整轴，通过font-variation-settings动态控制，减少HTTP请求。
• 隐私与版权：部分商业字体需通过授权协议（如Google Fonts的CDN服务）合规使用。
• 与渲染性能：字体文件过大可能延迟首次内容绘制（FCP），需结合缓存策略（如HTTP缓存头）优化重复访问。

5. 实际开发建议

• 优先选择WOFF2格式，兼容性覆盖现代浏览器。
• 使用font-display: optional在慢速网络中保持布局稳定。
• 通过工具（如Font Spider）自动化子集生成，平衡视觉效果与性能。