特殊字体的优化

背景

在开发一个数据大屏项目中使用了阿里巴巴的普惠字体，其中最小的一个特殊字体的大小都超过 2M（ε=(´ο ｀*)体积真是大啊）。这么大的体积导致项目发布到线上后单单特殊字体的体积就占总体积的 50%以上，导致首次进入数据大屏首页速度特别慢（平均超过 6s 以上）。

 

解决方案

 

1、字体格式选择

选择适合您需求的字体格式。常见的字体格式包括 TrueType（TTF）、OpenType（OTF）和 Web 字（WOFF、WOFF2）。不同格式的体在文件大小、览器兼容性和功能方面可能有所不同。

 

@font-face {
  font-family: Alibaba-PuHuiTi-Bold;
  src: url('./origin/Alibaba-PuHuiTi-Bold.woff2') format('woff2'), url('./origin/Alibaba-PuHuiTi-Bold.woff')
      format('woff'),
    url('./origin/Alibaba-PuHuiTi-Bold.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

 

2、压缩特殊字体

对于那些体积过大的字体，比如 ttf 可以转换成 eot、woff、woff2 等体积更小的字体类型，以提高加载速度。

 

var Fontmin = require('fontmin')

var fontmin = new Fontmin().use(
  Fontmin.ttf2woff({
    deflate: true, // deflate woff. default = false
  })
)

 

3、子集化字体

如果您只需要使用字体中的部分字符，可以使用子集化工具将字体文件中仅包含需字符的子集提取出来。这可以减小字体文件的大小，并提高加载速度。

 

var Fontmin = require('fontmin')

var fontmin = new Fontmin().use(
  Fontmin.glyph({
    text: '天地玄黄 宇宙洪荒',
    hinting: false, // keep ttf hint info (fpgm, prep, cvt). default = true
  })
)

 

4、字体预加载

对于网页应用程序，可以使用 CSS 的@font-face 则中的 preload 属性来预加载字体文件。这可以确保字体在需要时能够立即加载，避免页面内容闪烁延迟加载的问题。

 

@font-face {
  font-family: 'MyCustomFont';
  src: url('myfont.woff2') format('woff2');
  preload: auto;
}

 

5、字体缓存

利用浏览的缓存机制，让字体文件在首次加载被缓存起来，以便在后续访中能够更快地加载。