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

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

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

## 设计师交接时给这几项

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

## 前端拿到后

1. 按[《网页字体地址规则》](https://docs.cocobook.com/link/648) 拼出 CSS 地址，在浏览器里打开确认能访问。
2. 从 CSS 里抄出声明的字体名，写进样式，后面加上备用字体，见[《在 CSS 里使用：字体名、备用字体和多字重》](https://docs.cocobook.com/link/649)。
3. 保留授权注释，见[《保留授权注释》](https://docs.cocobook.com/link/652)。
4. 在手机和电脑上各看一遍，对照设计稿。

## 常见的对不上

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

## 接下来读什么

- [《快速开始：一行代码用上中文网页字体》](https://docs.cocobook.com/link/647)
- [《在 Figma 里用文风字体》](https://docs.cocobook.com/link/633)