前端开发必读：字体文件格式特点与选型策略

"为什么我的页面字体加载这么慢？"

"为什么设计稿上的字体在用户电脑上显示不出来？"

"为什么PDF导出时字体全乱了？"

身在前端开发领域内里，你必然是碰到过这些如灵魂进行拷问般的情况。字体，它是那种看上去好像挺简单的元素，然而却暗藏着好些技术方面的坑。各种各样的字体到底有着什么样各不相同的区别，怎样去做出选择这是前端开发工作者常常会面临到的问题。

一、3类主流的字体格式，一次就说清楚，其一，为TrueType Font，也就是(.ttf)，它堪称是兼容性领域的王者。

TrueType是当时轮廓字体标准是由苹果公司和在20世纪80年代末开发的，经过三十多年发展，它已然成为兼容性最好的字体格式，许多从网上下载的免费字体或者微软系字体通常都是ttf类型。

而平常于查看笔记本Font文件之际，常常会见到字体后缀为.ttc。它是因为要节省空间才诞生的一个ttf字体合集。它把一个字体家族的多种样式（像是常规、粗体、斜体）进行合并 ，通用信息仅需一份 ，进而减小字体文件大小。

文件类型TTFTTC

优点

它具备良好兼容性，对Windows、Mac以及Linux均有原生支持，几乎百分百的设备都能够实现显示，它拥有矢量轮廓，此轮廓借助数学曲线来对字体轮廓进行描述，不管放大到什么倍数也不会出现模糊现象。

一套字体家族打包节省空间，比如常规、粗体以及斜体打包成一组，其体积相较于多个单独的TTF要小。

缺点

文件的体积呈现粗大的状态，其处于未经过压缩的情形，字体文件动不动有几MB，甚至达到十几MB；加载的速度展现迟缓的态势，大文件直接使首屏的加载慢下来。

使用存在麻烦之处，具体在于，在CSS里没办法指示采用TTC当中的某一个字体，编程方面具备兼容性，相应的是，部分编程语言加载TTC时一般仅仅能够获取到第一个字体，浏览器在支持方面，并不 directement支持于Web里进行使用。

应用场景

进行本地开发之际进行安装并加以使用，作为Web字体最终的备选情况，需要嵌入到移动App里面。

系统字体包（用户本地安装）；设计软件字体库。

总结

本地开发的好伙伴，但别直接用在网页上。

操作系统的字体打包方案，前端直接使用场景极少。

2.OpenType Font(.otf)——专业排版首选

跨平台字体格式OpenType，是由Adobe与微软共同联合开发的，它融合了TrueType以及PostScript CFF，其最大优势是排版功能更为强大，属于此类型的有多款字体，比如Adobe系列字体中的Source Sans Pro，还有思源黑体以及思源宋体等。

文件类型OTF

优点

排版能力突出，能够实现连字、花体以及小型大写字母的支持，具备高级特性，可跨平台，同一文件能够在各个系统当中用于使用。

缺点

文件的体积比较大，这是因为其中包含了更多的排版信息，所以其体积通常会比TTF还要大，对于浏览器支持方面，它和TTF相类似，故而不推荐将其直接应用于网页。

应用场景

系统设计里的标题字体，要有连字所呈现的效果；存在多语言的网站，要有超大字符集；关于印刷品PDF的生成，要有高级排版。

总结

专业排版场景的王者，但网页加载是硬伤。

3.Web开放字体格式（.woff/.woff2），这是一种专门用于网页的字体。

WOFF这种字体格式，是由Mozilla、微软以及Opera联合起来，为网页而设计的，它专门解决了字体在网页上加载时的速度问题，并且还解决了字体在网页上的版权问题。

字体类型WOFF1.0WOFF2.0

优点

1. 体积方面呈现出小的特点，并且加载速度快，其采用zlib进行压缩，相较于TTF而言小大概40%。2. 浏览器对其支持状况良好，所有现代浏览器以及IE9及以上版本都予以支持。

优势突出：极致压缩以Brotli压缩方式达成，较WOFF小三十%以上，性能表现最优；加载迅速：带宽需求最少，移动端优势显著；浏览器适配佳：Chrome、Edge、Firefox以及Safari最新版本均支持。

适用场景

需要有能兼容IE9及以上版本的网站，是普通企业官网，将其作为一种WOFF2的备选情况。

适用于对性能有着较高要求的现代网站，适用于移动端H5 页面，这里是需要运用多套字体的内容型网站。

总结

曾经是网页字体的标配，现在让位给WOFF2。

现在的前端项目，能上WOFF2就上WOFF2。

二、前端常开发常见痛点与解决方案常见痛点解决方案代码示例

字体加载慢，首页白屏时间长

这样来进行格式选型：优先去使用WOFF2，把WOFF作为备选，字体子集化：仅仅保留页面所用到的文字，所用工具为：glyphhanger、font-spider，使用font-display=swap，所呈现的文字先以系统字体来显示，在加载完字体文件之后进行替换，要将字体文件放置在CDN上。

@font-face {，font-family: 'MyFont'；，src: url('myfont.woff2') format('woff2')；，font-display: swap; （文字先用系统 字体显示，加载完成后替换）。

字体在不同浏览器显示不一致

存在多种字体格式可供选择，进行统一字体的渲染，运用诸如-webkit-font-smoothing等属性，做好测试覆盖，在主流浏览器里开展视觉比对。

定义字体样式，字体家族名为“MyFont”，其来源为，以“woff2”格式指向“myfont.woff2”文件，以“woff”格式指向“myfont.woff”文件，以“truetype”格式指向“myfont.ttf”文件。

使用了设计稿中的商业字体，上线后被字体公司追究责任

针对使用开源或者免费字体这一情况，具体涉及思源黑体、思源宋体、阿里巴巴普惠体，关于购买商业授权，要做到确保拥有Webfont授权，对于使用字体CDN服务，涵盖Google Fonts、Adobe Fonts，已处理授权，而对于自建字体服务，需确保字体文件的fsType允许Web嵌入。

——

PDF导出时字体丢失或错位

为理解其中缘由，在于此类 JS 库运行环境处于沙盒之中，所以无法对本地字体进行访问，而关于字体注册，那是需要将字体文件手动去注册到 PDF 库的，并且部分 PDF 库仅仅支持格式为 TTF 的字体注册。

// 方法一：提前将 TTF 转为 Base64 字符串（推荐） // 可使用 jsPDF 官方工具转换：https://rawgit.com/MrRio/jsPDF/master/fontconverter/fontconverter.html // 转换后会生成一个 JS 文件，里面包含 base64 字符串 import { myFontBase64 } from './myfont-base64.js'; // 导入转换后的 Base64 字符串 const doc = new jsPDF(); doc.addFileToVFS('myfont.ttf', myFontBase64); // 第二个参数必须是 Base64 字符串 doc.addFont('myfont.ttf', 'myfont', 'normal'); doc.setFont('myfont', 'normal'); doc.text('带特殊符号的文字', 10, 10); doc.save('output.pdf');

自定义图标需要频繁请求

解决办法是，运用图标字体，把多个图标组合成一个字体文件，常用的工具包含阿里Iconfont、IcoMoon。

——

相关标签： # 前端开发 # 字体格式 # 选型策略 # Web字体 # 排版