猫啃网
网页里想换成一套中文字体，动手时常被三件事卡住：从哪儿拿到能商用的文件，引进来之后体积太大加载慢，样式写了却看不到效果。中文字体一个文件动辄几兆，和英文的几十 KB 不是一个量级。把引用方式先分清，再按方式去处理体积，多数问题能提前避开。
猫啃网收录 839 款免费中文字体，字体格式与协议类型一般写在详情页里，取文件之前先看这两项。
一、三种引用方式，先比适用面
方式一，系统字体栈。 只在 CSS 的 font-family 里按顺序写字体名，浏览器从访问者本机查找，装了就用，没装就顺延到下一个。它不产生任何下载请求，代价是无法保证访问者看到的就是你选的字体，只适合当兜底。
方式二，@font-face 自托管。 把字体文件放到自己的服务器或对象存储上，用 CSS 声明字体族，浏览器按需下载后渲染。视觉最可控，代价是体积、缓存和格式适配都要自己处理。
方式三，第三方字体托管服务。 文件交给外部服务，页面里引一段 CSS 或 JS 就能用。省去托管环节，但要先确认服务条款是否覆盖商用，是否允许加载中文字体这类大文件，以及服务中断时页面怎么回落。
怎么选。 只求比默认字体好看一点，用系统字体栈加兜底即可；要求视觉统一、品牌一致，走自托管；团队没有运维资源，才考虑第三方托管。三者并不互斥，同一站点里标题走自托管、正文走系统栈也很常见。
二、自托管落地四步
第一步，确认文件格式。 网页优先用 woff2，压缩率比 ttf 高，主流浏览器都支持；再留一份 woff 或 ttf 作为兼容备选。拿到手的往往是 ttf 或 otf，需要用工具转成 woff2。
第二步，注册 @font-face。 用 font-family 给字体族命名，src 按 woff2 在前、woff 在后的顺序排列，再加一行 font-display: swap，让文字先用兜底字体显示，字体下载完再替换，避免整段文字长时间空白。
第三步，做子集化。 这是中文网页最该做的一步。全量中文字体通常几兆到十几兆，而单个页面往往只用几百个字。用子集工具按实际用到的字符裁切，体积能降到几十到几百 KB。代价是页面新增文字后要重新生成，适合内容相对固定的站点。
第四步，设好缓存。 字体文件带上较长的缓存时间与内容指纹文件名，访问者第二次打开就不用重复下载。字体更新时改文件名，避免旧缓存一直生效。
选字上的一点经验。思源黑体 是网页里常见的通用黑体，简繁覆盖完整、字重齐全；素材集市智造黑 骨架规整，做界面与正文都接得住；标题需要个性时，得意黑 整体向右倾斜、节奏快；文艺向页面可以配 南西初夏宋。做开源项目时，文泉驿微米黑 是早期屏幕显示字体，在 Linux 环境里出现频率较高。
三、协议这一关没有人能替你做
免费下载不等于允许网页分发。 网页引用会把字体文件发送给访问者，这个动作在部分协议里需要单独确认。OFL 类协议通常允许嵌入与网页分发，读一遍随包分发的许可文本就能确认；作者声明类的字体，要读原文里有没有限定使用场景。
转格式不改变协议。 把 ttf 转成 woff2、做子集化，都只是加工文件本身，协议里的条件照旧适用。改了字形再对外分发，还要看是否触发改名条款。
兜底字体先写清楚。 字体加载失败时页面回落到哪个字体，建议在 font-family 里明确写出，别让浏览器自己挑。
四、获取与安装
从写明信息的页面取文件。 详情页同时给出字体全名、格式和协议类型的，后续核对起来省事。打开压缩包先看清内容，正常的字体包是一到多个字体文件加一份协议文本。
不必把所有字体都装进系统。 网页项目往往同时试好几款，装进系统目录后管理成本会上升：
- 字由客户端：下载安装后，在客户端里激活想用的字体，PS / AI / Sketch 自动识别，免去装系统的麻烦。猫啃网提供官方下载入口。
授权说明
这里说的“可用”，指字体文件能在网页里正常加载并输出字形。核验按三步走。
第一步，确认字体全名。 网页引用的字体族名要和文件内部名称对得上，带 GB、免费版这类后缀的更不能省略，否则可能出现样式不报错但不生效的情况。
第二步，查协议类型。 常见几类：开源协议（如 SIL OFL、MIT、GPL）、作者声明免费商用、随软件预装的授权。开源协议文本公开可查，通常允许修改与再分发，衍生版本需更换名称；作者声明的范围由声明自身界定，要连版本号一起看。
第三步，核使用场景。 网页分发、印刷、视频一般在前两类协议里被明确允许；把字体嵌入 App、电子书，或用于 Logo 商标注册时，要单独确认。很多授权把字形输出与商标注册分开处理。
留凭证。 把字体全名、获取日期、许可页面截图和链接记在同一个文档里，字体版本更新后说明可能变化，有记录才好追溯。
常见问题
问：把字体文件传到自己服务器，算不算侵权？
取决于协议。OFL 这类开源协议允许网页分发，作者声明类的字体要读原文。稳妥的做法是回到版权方的授权页确认，而不是看下载页有没有写免费。
问：网页里 woff2 和 ttf 要不要都引？
一般只引 woff2 就够。它是为网页设计的格式，压缩率更高，主流浏览器均已支持。只有需要兼容很老的浏览器时，才补一份 woff 或 ttf 作为回退。
问：字体下载慢，会不会影响首屏？
会，所以要靠 font-display: swap 和子集化两步配合。先让文字用兜底字体显示，字体下载完再替换；子集化把文件压到几十 KB 后，影响会小很多。
问：页面上只用了几个字，也要引全套吗？
不需要。做子集化按实际字符裁切即可，但要记得内容更新后重新生成，否则新出现的字会回落成兜底字体。
小结
网页引用中文字体，先把三种方式比清楚：系统字体栈零成本但不可控，自托管可控但要处理体积，第三方托管省事但要先看条款。落地时按 woff2 优先、font-display: swap、子集化、缓存四步走，体积问题基本能压住。协议这一关不能省，确认全名、查清协议、核对场景，把凭证留好。
