前端成长记01期：如何优雅地使用第三方字体

小木公子
632 阅读6分钟

封面01.png

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第01天，点击查看活动详情

更新日志

  • 20220728：一些常见优化方案总结（作者：小木公子）

本期主题

作为一名设计师，在交互和视觉平衡面前，绝不向1px低头，这是我最后的倔强。宁愿多写点BUG，也不要不放弃任何可以表达优雅的机会。更何况是我们的基础表达语言:字体。很多时候，我们期待用更多优美的设计字体去表达页面，但很多时候前端开发迫于加载性能，都会放弃对视觉表达的追求。

本期我将就前端如果优雅地使用第三方字体作出一些总结，一方面给有相关困惑的同学作为参考学习，另一方面更多地是为了表现出来，让更多的大佬阅读后能提出意见或质疑，然后我将客观地接受各位的反馈，对此文迭代更新，让它能够成为一篇能够真正意义上有价值的知识点。

基础用法

  • 下载好你要使用的字体文件，后缀名一般为：ttf、otf等，并将它放在项目的资源文件路径内。
  • CSS中注册字体样式。
@font-face {
  font-family: '字体名字';
  src: url('字体路径');
}
  • 在具体页面调用。
.div {
  font-family: '字体名字';
}

问题分析

当我们用浏览器本地调试时，丝毫觉察不出问题。但一旦将项目发布到服务器后，这该死的问题随之而来：加载巨慢无比啊。一般的字体，哪怕是一个字重，字体文件都有7~10M，作为前端开发的我们，怎么能容忍一个10M的资源文件出现在我们的项目中，不出意外的话，当我们遇到这种问题时，首先会遭到项目经理的一顿狂喷，接着，擦去满脸的吐沫星子后，我们会选择第一时间找到元凶，然后删之，最后再接受设计师的一顿鄙视。（看到这里同学，如果觉得问题已经得到解决了，后续我们可以选择不看，或当小说看完）

如何优雅

倔强的同学，恭喜你没有放弃。我们可以继续往下”肝一肝”（肝：此处同“干”，表达拼命干的意思）。假如我们遇到不妥协的客户或者领导，是不是这事儿就过不去了？不！不可能！这关必须闯过去，作为一名优秀的程序员，除了COPY或PASTE的技能，我们还有强大的学习能力。说干就干~

场景一：内容固定，字数少

解决方案： 如果你不会设计，请让那个鄙视你的UI同学，把字体做成SVG资源，直接当图片使用。

场景二：内容固定，字数多

解决方案： 当字体太多时，转成SVG后，你会神奇的发现，SVG资源也变大了，我们回到了原点。这时候我们可以采用字体切割法，那么啥是字体分割法呢？其实就是找到内容中的部分字体，打包成字体文件引用，这时候的字体文件不会很大，适合直接引用。具体做法：借助第三方工具把固定内容,重新生成新的字体文件。第三方工具推荐： fontmin 、 font-spider 或 font-spider-plus 。

场景三：内容动态不固定

解决方案： 当我们的页面内容变成动态的时候，多见于接口请求后的内容，以上两种方法都不适用。这里采用的方案是：纯粹地对字体做处理，把生僻字、繁体字等排除，保留常用字符，做成woff2格式的字体文件，这种方案可以最大限度的压缩字体文件本身，且可以保证内容不固定。

当然还有一种方案，我们可以使用网络字体，换句话说就是引用网络在线字体，无需下载，常见的网络字体库：Google Fonts 和 有字库,不过缺陷也是有的，例如系统过渡依赖第三方链接，不利于维护。另外如果系统属于内网访问，外链基本上不可能。所以这种方案基本上不推荐。

场景四：内容动态不固定，容器固定

解决方案： 这里的”容器“指的是我们项目被访问的环境，例如专属定制的APP，这种情况我们可以将字体文件打包到APP中进行调用，这种方案可以无视字体大小，可以避免每次访问都需要下载字体文件。当然如果字体能压缩一下再打包进APP，那再好不过了，毕竟开发APP那位也是需要面子的。

后续优化

上面我已经总结了几种场景下的字体使用方案，后续其实还有优化工作，例如字体的渲染优化。为了追求性能最大化，我们可以先让页面加载默认字体，待自定义字体下载完成后，再渲染自定义字体。具体实现方案：

  • 通过npm安装 WebFontLoader ；

  • 在CSS中引入第三方字体并命名；

@font-face { 
  font-family: '字体名称';
  src: url('./字体名称.woff2') format('woff2'); 
}
  • 将自定义字体加入自定义字体列表中，最后再页面active时对DOM重新引用该字体。
<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js"></script>
<script>
WebFont.load({
  custom: {
    families: ['字体名称'],
  },
  active() {
    document.body.style.fontFamily = '字体名称';
  },
});
</script>

总结

作为学习笔记，感觉文章字有点多了，不知道备注的是否详细，大家是否能够看懂？另外，如果有意见或者批评，大家可以在评论区留言，我会持续更新上去的。小木不怕犯错，就怕你们只嘲笑我，却不说话。我很庆幸自己能够成为一位前端开发工程师，虽然前途漫漫，需要走的路还有很多。但我坚信：只要日积月累，持续输出，总有一天，也能成为一名优秀的前端工程师，可以独挡一面，应付自如。

目前接触的项目大多数属于移动端的前端开发，所以接触面还是不够广，革命尚未成功，还得继续努力啊~另外，后续我会在该专题中，加入一些UI设计的东西，帮助大家做一些视觉层面的学习总结，希望对大家有所帮助和启发。我都说到这个份上了，你还不赶紧关注我。

最后，期待和大家一起成长，一起加油~

参考

mu.png

avatar
文章
阅读
粉丝