web性能-字体优化

·  阅读 1659
web性能-字体优化

web性能-字体优化

字体格式优化

体积由大到小:ttf,eot(IE8),woff,woff2 (性能从差到好)

字体压缩介绍:

  1. woff2和woff格式是内部压缩的,无需压缩
    • woff2字体最大的优先在于体积传输小,借用Google Chrome官方话说:
      • 新的WOFF 2.0 Web 字体压缩格式平均要比WOFF 1.0小30%以上(某些情况可以达到50%+)
    • 基本上,在web应用中,ttf这种字体就没有出现的必要了。
  2. ttf和eot字体格式没有压缩,可用服务器压缩
    • 对于较小的资源来说,压缩是有效的
    • 但是对于较大的资源(例如TTF和EOT字体),压缩可能需要更长的时间,从而导致TTFB更长。一定要测试哪种情况会使加载时间较短。对于较小的文件,压缩处理时间几乎可以忽略。

附一个woff2的兼容图:(几乎已经成为自定义图标字体使用的标配,目前浏览器的兼容性已经相当不错了:) image.png

兼容写法

有些老浏览器不支持woff2,需要往下做兼容

@font-face声明编写(@font-face级联)

@font-face{
	font-family: "Open Sans Regular";
	font-weight: 400;
	font-style: normal;
	src: 	 
              local("Open Sans Regular"),  // 先看看本地有没有
		 local("OpenSans-Regular"), // 然后在往下兼容
		 url("open-sans/OpenSans-Regular-BasicLatin.woff2") format("woff2"), 
		 url("open-sans/OpenSans-Regular-BasicLatin.woff") format("woff"),
		 url("open-sans/OpenSans-Regular-BasicLatin.eot") format("embedded-opentype"),
		 url("open-sans/OpenSans-Regular-BasicLatin.ttf") format("truetype");
}

// 如果还需要配置其他粗细的话:
@font-face{
	font-family: "Open Sans Light";
	font-weight: 300;
	// 其他同上
}

@font-face{
	font-family: "Open Sans Bold";
	font-weight: 700;
	// 其他同上
}
复制代码

@font-face声明编写完成后,需要修改body选择器上的font-family属性,将此字体作为文档的默认字体引用

body{
    ...
    font-family: "Open Sans Regular";
}
复制代码
  • 假设 字体 Open Sans Regular 太大 没加载出来,可以先加载本地字体
    • font-family: "Open Sans Regular", Helvetica, Arial, sans-serif;

字体体积优化

  1. 字体tree shaking(字体子集):把未用到的字体裁剪掉

    • 用 字蛛 生成字体子集 github.com/allanguys/f…
    • 亲测一个16M多的tff的字体文件,被tree shaking到了36kb(woff2)(测试使用的字体并不多,40多个,去重后38个)(使用工具必须要一个ttf格式,然后会自动生成woff,woff2等格式) image.png
  2. 按需加载语言包(比如做国际化时,切换到俄语时,才需加载俄语的语言包)

    可以用 unicode-range(字符集)去按需加载语言包

    @font-face {
      font-family: 'e-yu';
      src: url('fonts/e-yu-Light.ttf');
      unicode-range: U+4E00-9FCB; /* 此处放的是汉字字符集,其他语言的查找地址:https://jrgraphix.net/research/unicode_blocks.php */
    } 
    复制代码

确保 当字体没加载出来时,文本仍然可见

背景问题:

  • 字体通常是大文件,需要一段时间加载。有些浏览器在字体加载之前隐藏文本,导致不可见文本(FOIT)的闪光。

解法:

  • 在自定义字体加载时 避免显示不可见文本的最简单方法是临时显示系统字体

  • 通过在@font-face 样式中包含 font-display: swap(亲测 写与没写 没有区别,可能是高版本浏览器的原因),您可以在大多数现代浏览器中避免 FOIT:

    @font-face {
      font-family: 'Pacifico';
      font-style: normal;
      font-weight: 400;
      src: local('Pacifico Regular'), local('Pacifico-Regular'), url(https://fonts.gstatic.com/s/pacifico/v12/FwZY7-Qmy14u9lezJ-6H6MmBp0u-.woff2) format('woff2');
      font-display: swap;
    }
    复制代码

    font-display: swap 的兼容情况:caniuse.com/?search=fon…

    image.png


码字不易,点赞鼓励!

部分参考《Web性能实战》[美]杰里米·瓦格纳


性能优化合集快速入口:

分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改