字体文件引用优化策略集锦

前端开发中，为提升页面呈现效果，我们经常需要使用自定义字体。字体大小不同，通常中文字体的大小在 8-10M 之间，而使用未经优化的方法引用本地字体，会带来资源占用过高、加载缓慢、视觉闪烁等问题。

在本文中，我们将介绍多种优化方法，帮助您更有效地引用本地字体。

避免无必要字体引用

对于项目中并不使用的字体，请坚决不引用。特别是对存在多种 font-family 定义时，需要确保所有字体都得到实际应用，否则只会造成资源浪费，影响页面性能。

例如，若页面引用微软雅黑，但实际并未使用，可以从 CSS 中删除它。

font-family: "Microsoft YaHei";

选择更合适的文件格式

当前常用的字体格式有 WOFF2、WOFF、TTF、SVG 等，其中 WOFF2 和 WOFF 是最受推荐的格式。

WOFF2 在压缩率和加载速度方面都有出色的表现，并且受到大多数现代浏览器支持。对于WOFF，它的压缩率略逊于 WOFF2，兼容性与 WOFF2 相当。

因此，若想取得最佳性能和兼容性，首选使用 WOFF2 格式。

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

使用相对路径

如果您的字体文件位于同一目录中，或与 CSS 文件处于相对位置，应使用相对路径引用它们。这有助于防止将来出现文件路径变更带来的问题。

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

利用 CDN 加速字体加载

内容分发网络（CDN）可以有效地将字体文件缓存到边缘服务器，从而减少加载时间，提高网站的响应速度。将字体文件上传到 CDN 后，通过 CDN 链接引用即可。

@font-face {
  font-family: "MyFont";
  src: url("https://cdn.example.com/font.woff2") format("woff2"),
       url("https://cdn.example.com/font.woff") format("woff");
}

Subset 字体文件

对于包含大量字符的字体，可以考虑使用 Subset 字体文件，它仅包含实际使用的字符。这将减少文件大小并加快加载速度，尤其是在只使用少量字符集的情况下。

有各种工具可以帮助您生成 Subset 字体文件，例如 Font Squirrel（https://www.fontsquirrel.com/）。

仅在需要时加载字体

如果您的网站或应用程序仅在某些页面或部分需要使用自定义字体，请考虑使用 JavaScript 按需加载字体。这将减少不必要页面的加载时间。

function loadFont() {
  var font = new FontFace("MyFont", "url(font.woff2)");
  font.load().then(function(loadedFont) {
    document.fonts.add(loadedFont);
  });
}

避免字体闪烁

在字体加载完成之前，浏览器可能会显示默认字体。为了避免这种视觉闪烁，可以使用 CSS 的 font-display 属性来控制字体渲染行为。

@font-face {
  font-family: "MyFont";
  src: url("font.woff2") format("woff2"),
       url("font.woff") format("woff");
  font-display: swap;
}

将 font-display 属性设置为 swap 后，浏览器将首先显示默认字体，然后在自定义字体加载完成后立即替换为自定义字体，从而避免闪烁。

总结

本文介绍了多种优化本地字体引用的方法，包括避免无必要字体引用、选择更合适的文件格式、使用相对路径、利用 CDN 加速字体加载、Subset 字体文件、仅在需要时加载字体、避免字体闪烁等。

通过使用这些优化方法，您可以提高页面的加载速度和性能，提升用户体验。