CSS中的@font-face规则详解

描述
@font-face是CSS中的一个关键规则，用于定义网页中使用的自定义字体。它允许开发者引入服务器上的字体文件，突破传统网页字体只能使用用户设备上已安装字体的限制。通过@font-face，我们可以确保网站在不同设备和浏览器中具有一致的字体显示效果。

基本语法

@font-face {
  font-family: 'YourFontName';  /* 定义字体家族名称 */
  src: url('path/to/font.woff2') format('woff2'),  /* 字体文件路径和格式 */
       url('path/to/font.woff') format('woff');
  font-weight: normal;          /* 字体粗细 */
  font-style: normal;           /* 字体样式 */
  font-display: swap;           /* 字体显示策略 */
}

详细解析

1. 字体家族名称（font-family）

• 这是你为自定义字体定义的名称，可以是任意字符串
• 后续在CSS中通过这个名称来引用该字体
• 示例：font-family: 'MyCustomFont';

2. 字体源（src）

• 指定字体文件的URL路径和格式
• 建议提供多种格式以确保浏览器兼容性
• 常见字体格式及特点：
  • WOFF2：现代标准，压缩率最高，推荐首选
  • WOFF：广泛支持，良好的压缩效果
  • TTF/OTF：基础格式，兼容性最好但文件较大
• 格式声明示例：format('woff2')

3. 字体描述符

• font-weight：定义字体的粗细（100-900或normal/bold）
• font-style：定义字体样式（normal/italic/oblique）
• font-stretch：定义字体的宽度变体（如condensed, expanded）
• unicode-range：指定字体支持的Unicode字符范围

4. 字体显示策略（font-display）
这个属性控制浏览器如何加载和显示自定义字体：

• auto：浏览器默认行为（不推荐）
• block：短暂阻塞期，长交换期（可能造成布局偏移）
• swap：无阻塞期，立即使用备用字体，自定义字体加载后替换
• fallback：极短阻塞期（约100ms），短交换期
• optional：极短阻塞期，不自动交换，用户下次访问时可能使用

实际应用步骤

步骤1：准备字体文件

• 获取字体文件的合法授权
• 准备多种格式（WOFF2、WOFF作为最低要求）
• 优化字体文件大小（子集化，只包含需要的字符）

步骤2：定义@font-face规则

@font-face {
  font-family: 'RobotoCustom';
  src: url('/fonts/roboto-regular.woff2') format('woff2'),
       url('/fonts/roboto-regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'RobotoCustom';
  src: url('/fonts/roboto-bold.woff2') format('woff2'),
       url('/fonts/roboto-bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

步骤3：在CSS中使用自定义字体

body {
  font-family: 'RobotoCustom', Arial, sans-serif;
  font-weight: 400;  /* 使用常规体 */
}

h1 {
  font-family: 'RobotoCustom', Arial, sans-serif;
  font-weight: 700;  /* 使用粗体 */
}

性能优化技巧

1. 字体子集化：只包含实际使用的字符，显著减小文件大小
2. 预加载关键字体：使用<link rel="preload">提前加载重要字体
3. 使用现代格式：优先使用WOFF2格式，文件更小，加载更快
4. 设置合适的font-display：通常推荐使用swap平衡性能和体验
5. 本地字体检测：使用local()源优先使用用户已安装的字体

兼容性考虑

• 所有现代浏览器都支持@font-face
• 为旧版浏览器提供备用字体栈
• 始终提供TTF作为最基础的兼容格式

通过合理使用@font-face规则，你可以为网站创建独特的视觉风格，同时确保良好的性能和可访问性。