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

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