如何引用外部字体并优化字体文件大小？

在前端开发中，可通过@font-face规则引用外部字体，并通过提取特定字符、选择合适格式、子集化等方式优化字体文件大小。 具体方法如下：

使用@font-face规则定义字体来源，并在CSS中应用：

• 定义字体规则在CSS文件中通过@font-face声明字体名称、来源路径及样式属性：

  @font-face { font-family: 'MyCustomFont'; src: url('fonts/example.woff2') format('woff2'), url('fonts/example.woff') format('woff'); font-weight: 400; font-style: normal; font-display: swap; /* 优化字体加载体验 */}

  src需提供多种格式（如WOFF2、WOFF）以兼容不同浏览器，优先使用压缩率更高的WOFF2。

  font-display: swap可避免字体加载时的文本不可见状态，提升用户体验。

• 应用字体在CSS中选择器中通过font-family属性使用定义的字体：

  body { font-family: 'MyCustomFont', sans-serif; /* 添加备用字体 */}

针对中文字体体积大的问题，可通过以下技术手段压缩文件：

• 提取特定字符（子集化）

  工具选择：使用字蛛（FontSpider）、Glyphhanger或Fontmin等工具，分析HTML/CSS文件，提取实际使用的字符生成子集字体。

  操作示例（以FontSpider为例）：

  在项目中引入完整字体文件（如.ttf格式）。

  通过命令行工具扫描页面使用的字符，生成仅包含这些字符的精简字体文件。

  替换原字体文件为子集文件，大幅减少体积（中文字体可压缩至几十KB）。

• 选择高效字体格式

  WOFF2：压缩率最高（比TTF小40%以上），现代浏览器均支持，优先使用。

  WOFF：兼容性较好，但压缩率略低于WOFF2。

  避免使用TTF/OTF：未压缩的原始格式体积大，仅作为备用或兼容旧浏览器时使用。

• 按权重和样式拆分字体

  若页面仅使用字体的常规（400）和加粗（700）样式，无需加载整个字体的所有粗细变体。

  通过多个@font-face规则分别定义不同样式的字体文件，减少冗余数据。

• 使用可变字体（Variable Fonts）

  可变字体通过单一文件支持字重、宽度、倾斜等属性的连续变化，避免加载多个字体文件。

  示例：@font-face { font-family: 'MyVariableFont'; src: url('fonts/example-vf.woff2') format('woff2-variations'); font-weight: 100 900; /* 支持100到900的字重 */ font-style: oblique 0deg 20deg; /* 支持倾斜角度 */}

• 与设计和产品协商字体方案

  减少特殊字体使用：若页面设计允许，优先采用系统默认字体（如-apple-system, BlinkMacSystemFont）或通用字体族（如sans-serif）。

  限制字体样式：避免同时使用多种字重（如Light、Regular、Bold、Black）或斜体，仅保留必要样式。

• 预加载关键字体：通过<link rel="preload">提前加载字体文件，避免渲染阻塞：<link rel="preload" href="fonts/example.woff2" as="font" type="font/woff2" crossorigin>
• 异步加载非关键字体：对非首屏显示的字体，使用JavaScript动态加载或通过font-display: optional允许浏览器使用备用字体。

• 体积优化效果：

  完整中文字体（如思源黑体）体积约8-10MB，子集化后可压缩至50-200KB（根据字符数量浮动）。

  可变字体文件通常比多个静态字体文件总和小30%-50%。

• 注意事项：

  子集化后若页面新增文字需重新生成字体文件，需建立自动化流程（如结合构建工具）。

  测试不同浏览器和设备的字体渲染效果，确保兼容性。

  避免过度优化导致字体缺失，需平衡体积与完整性。

通过上述方法，可在保证设计效果的同时，显著提升页面加载性能，尤其适合中文等字符集庞大的场景。