"为什么我的页面字体加载这么慢？"
"为什么设计稿上的字体在用户电脑上显示不出来？"
"为什么PDF导出时字体全乱了？"
作为前端开发，你一定遇到过这些灵魂拷问。字体，这个看似简单的元素，却隐藏着不少技术坑。各种字体究竟有什么区别，如何选择是前端开发人员经常面临的问题。
一、3类主流字体格式，一次说清
1.TrueType Font(.ttf)——兼容性之王
TrueType是由苹果公司和在20世纪80年代末开发的轮廓字体标准，经过三十多年的发展，已经成为兼容性最好的字体格式。大多数从网上下载的免费字体或微软系字体一般都为ttf类型。
而平时在查看笔记本Font文件时，经常会看到字体后缀为.ttc。它是为了节省空间为诞生的一个ttf字体合集。将一个字体家族的多种样式（如常规、粗体、斜体）合并，通用信息只需要一份，从而减小字体文件大小。
| 文件类型 | TTF | TTC |
|---|---|---|
| 优点 | 兼容性好：Windows/Mac/Linux原生支持，几乎100%设备都能显示； 矢量轮廓：采用数学曲线描述字体轮廓，无论放大多少倍都不会模糊； | 节省空间：一套字体家族（如常规+粗体+斜体）打包，体积比多个独立TTF小。 |
| 缺点 | 文件体积大：未经压缩，字体文件动辄几MB到十几MB；加载速度慢：大文件直接拖慢首屏加载 | 使用麻烦：在CSS中无法指定使用TTC中的某个字体； 编程兼容性：部分编程语言加载TTC通常只能拿到第一个字体； 浏览器支持：不直接支持在Web中使用 |
| 应用场景 | 本地开发时安装使用；作为Web字体的最后备选；需要嵌入到移动App中。 | 系统字体包（用户本地安装）；设计软件字体库。 |
| 总结 | 本地开发的好伙伴，但别直接用在网页上。 | 操作系统的字体打包方案，前端直接使用场景极少。 |
2.OpenType Font(.otf)——专业排版首选
OpenType是Adobe和微软联合开发的跨平台字体格式，融合了 TrueType和PostScript CFF ，它最大的优势在于排版功能更加强大。Adobe系列字体（Source Sans Pro）、思源黑体/宋体等多属于此类型。
| 文件类型 | OTF |
|---|---|
| 优点 | 排版能力强：支持连字、花体、小型大写字母等高级特性； 跨平台：同一文件可在各系统使用 |
| 缺点 | 文件体积大：包含更多排版信息，体积往往比TTF还大； 浏览器支持：和TTF类似，不推荐直接用于网页 |
| 应用场景 | 设计系统中的标题字体（需要连字效果）；多语言网站（需要超大字符集）；印刷品PDF生成（需要高级排版）。 |
| 总结 | 专业排版场景的王者，但网页加载是硬伤。 |
3.Web Open Font Format(.woff/.woff2)——网页专用字体
WOFF是由Mozilla、微软和Opera联合为网页设计的字体格式，专门解决了字体在网页上加载速度和版权的问题
| 字体类型 | WOFF1.0 | WOFF2.0 |
|---|---|---|
| 优点 | 体积小&加载快：使用zlib压缩，比TTF小40%左右；浏览器支持好：所有现代浏览器、IE9+都支持； | 极致压缩：采用Brotli压缩，比WOFF再小30%以上，性能表现最佳；加载最快：带宽需求最低，移动端优势明显；浏览器支持好：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等属性；测试覆盖：在主流浏览器中做好视觉比对。 | @font-face { font-family: 'MyFont'; src: url('myfont.woff2') format('woff2'), url('myfont.woff') format('woff'), url('myfont.ttf') format('truetype'); } |
| 使用了设计稿中的商业字体，上线后被字体公司追究责任 | 使用开源/免费字体：思源黑体、思源宋体、阿里巴巴普惠体购买商业授权：确保拥有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。 | —— |
