Webfont优化：使用字体裁剪缩小体积和提升加载速度

2024/08/01
- 编程
0阅读

一、Webfont介绍

Webfont 是一种用于网页设计的字体格式，通过将字体嵌入到网页中，使得用户在浏览网页时能够看到与产品设计时相同的字体样式，可以增强网页的视觉效果和用户体验。

常见的有WOFF、TTF、OTF、EOT、SVG等格式，下方列表是对于几类格式的简介介绍：

WOFF(Web Open Font Format)：一种专为网页设计的字体格式，它提供了压缩和优化，以减少加载时间和提高性能。
TTF (TrueType Fonts)：一种广泛使用的字体格式，也适用于网页。
OTF (OpenType Fonts)：一种高级字体格式，支持更复杂的字体特性。
EOT (Embedded OpenType Fonts)：微软开发的字体格式，专为IE浏览器设计。
SVG (Scalable Vector Graphics)：一种图形格式，也可以用于字体。

通常在CSS代码中以如下形式呈现：

@font-face {
    font-family: 'MyWebFont';
    src: url('webfont.woff2') format('woff2'),
        url('webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

/* 应用字体 */
body {
  font-family: 'MyWebFont', sans-serif;
}

目前大多数现代浏览器都支持 WOFF 和 WOFF2 格式，根据Can I Use的统计数据表示，超过97%的用户浏览器都兼容这两种格式。但在某些场景下，仍然需要提供多种字体格式来进行兼容适配，例如旧版本的IE浏览器仅支持EOT格式字体。

WOFF2的全平台兼容性达到97.55%

二、不固定内容的Webfont优化

在不固定内容的场景下（例如：文章内容、公告信息、列表内容等随时会发生变化的场景），通常可以采用有字库来进行字体适配。

2.1 SSR场景（后端渲染输出）

通过指定DOM元素选择器，有字库SDK会执行以下步骤：

读取DOM元素中的文字内容；
调用接口生成该文字内容的Webfont；
自动将字体通过@font-face语句引用到当前页面；

<script type="text/javascript" src="http://cdn.repository.webfont.com/wwwroot/js/wf/youziku.api.min.js"></script>
<script type="text/javascript">
    $webfont.load("seletor1", "xxx", "fontfamily");
    //第一个参数"seletor1"请设置选择器代码（如:#id1、.class1、h1等），多个选择器，请用英文逗号隔开（如:#id1,.class1,h1）。//第二个参数"xxx"请您设置要使用的字体的Accesskey。
    //第三个参数"fontfamily"请设置字体的英文名，该参数主要是为了标记当前所用字体，方便检查、核对。
    //第三个参数可支持英文内容使用不同的英文字体（其实是字体优先级）；如：$webfont.load("seletor1", "xxx", "你自定义的英文字体fontfamily,有字库fontfamily");
    $webfont.draw();
</script>

2.2 CSR场景（客户端渲染）

在特定业务接口返回数据并完成页面赋值后，调用$webfont.submit()方法进行文字内容读取和webfont生成（逻辑和 2.1 一致）。

<script type="text/javascript" src="http://cdn.repository.webfont.com/wwwroot/js/wf/youziku.api.min.js#async"></script>
<script type="text/javascript">
    $webfont.load("seletor1", "xxx", "fontfamily");
    //第一个参数"seletor1"请设置选择器代码（如:#id1、.class1、h1等），多个选择器，请用英文逗号隔开（如:#id1,.class1,h1）。//第二个参数"xxx"请您设置要使用的字体的Accesskey。
    //第三个参数"fontfamily"请设置字体的英文名，该参数主要是为了标记当前所用字体，方便检查、核对。
    //第三个参数可支持英文内容使用不同的英文字体（其实是字体优先级）；如：$webfont.load("seletor1", "xxx", "你自定义的英文字体fontfamily,有字库fontfamily");
    $webfont.draw(0);

    fetch(apiURL)
        .then(response => {
            // 业务逻辑....

            // 在异步方法的最后一行（在加载内容的执行语句的下一行）添加如下语句：

            // 1)常规调用
            $webfont.submit(partName);
            
            // 2)异步分页场景调用
            $webfont.submit(partName,PageIndex);
        })
</script>

关于有字库的具体使用方式详见其官网：https://www.webfont.com/

三、固定内容的Webfont优化

在固定内容的场景下（例如：数据大屏、固定的网站UI文本等），我们可以直接裁剪打包相关字体文件，这样可以节省使用有字库API费用。

3.1 字体裁切

首先问UI人员索要使用到的字体，并统计出页面中的固定内容文本。接着访问在线字体裁剪 (disidu.com) 这个工具，输入需要提取的文本点击生成就可以下载裁剪后的字体文件了。例如下方的例子中，我们从汉仪旗黑-60S Regular 这个字体中提取了66个文字，裁剪后的字体文件相比原始字体文件体积减少了**99.86%**，极大了提升了字体加载速度。

原始文件8.18MB ➡ 裁剪后的11KB