从设计稿到上线：怎么和前端对接字体

适合谁看：做网页、小程序、App 界面的设计师，以及接设计稿的前端。

设计稿里的字，到了网页上经常「长得不一样」。原因大多是交接时信息没给全。

设计师交接时给这几项

项目	例子	为什么需要
字体名和目录名	霞鹜文楷，目录名 `xwwk`	前端据此拼出网页字体地址
用到的字重	Regular、Bold	每档字重要单独加载
用在哪里	标题用 A，正文用 B	只给需要的地方加载
文字量	只有几个固定标题，还是用户输入的任意文字	决定子集怎么选
备用字体	字体没加载出来时用系统黑体	写进 `font-family` 的备用顺序
许可	开源商用，许可原文链接	上线前留存

前端拿到后

按《网页字体地址规则》拼出 CSS 地址，在浏览器里打开确认能访问。
从 CSS 里抄出声明的字体名，写进样式，后面加上备用字体，见《在 CSS 里使用：字体名、备用字体和多字重》。
保留授权注释，见《保留授权注释》。
在手机和电脑上各看一遍，对照设计稿。

常见的对不上

现象	常见原因
粗细和设计稿不一样	没加载对应的字重；或者浏览器把常规体「假加粗」了
个别字换了字体	网页字体子集里没有这个字，或者字体本身缺字
首屏先闪一下系统字体	字体还在下载，属于正常现象，可以用 `font-display` 控制，见《性能：子集、字体显示策略和预连接》
设计稿里的字距、行距对不上	设计软件和网页的行高算法不同，要按网页实际效果调

接下来读什么

这篇文档对你有帮助吗？