从设计稿到上线：怎么和前端对接字体
适合谁看：做网页、小程序、App 界面的设计师，以及接设计稿的前端。
设计稿里的字，到了网页上经常「长得不一样」。原因大多是交接时信息没给全。
设计师交接时给这几项
| 项目 | 例子 | 为什么需要 |
|---|---|---|
| 字体名和目录名 | 霞鹜文楷，目录名 xwwk |
前端据此拼出网页字体地址 |
| 用到的字重 | Regular、Bold | 每档字重要单独加载 |
| 用在哪里 | 标题用 A，正文用 B | 只给需要的地方加载 |
| 文字量 | 只有几个固定标题，还是用户输入的任意文字 | 决定子集怎么选 |
| 备用字体 | 字体没加载出来时用系统黑体 | 写进 font-family 的备用顺序 |
| 许可 | 开源商用，许可原文链接 | 上线前留存 |
前端拿到后
按《按《网页字体地址规则》 拼出 CSS 地址，在浏览器里打开确认能访问。- 从 CSS 里抄出声明的字体名，写进样式，后面加上备用字体，
见《见《在 CSS 里使用：字体名、备用字体和多字重》。 - 保留授权注释，
见《见《保留授权注释》。 - 在手机和电脑上各看一遍，对照设计稿。
常见的对不上
| 现象 | 常见原因 |
|---|---|
| 粗细和设计稿不一样 | 没加载对应的字重；或者浏览器把常规体「假加粗」了 |
| 个别字换了字体 | 网页字体子集里没有这个字，或者字体本身缺字 |
| 首屏先闪一下系统字体 | 字体还在下载，属于正常现象，可以用 font-display 控制， |
| 设计稿里的字距、行距对不上 | 设计软件和网页的行高算法不同，要按网页实际效果调 |