# 设计师

# 海报和主视觉怎么挑中文字体

> 适合谁看：做海报、活动主视觉、封面、包装的设计师。

## 按这个顺序挑

1. **先看许可。** 商业项目只在许可清楚的字里挑（开源商用、免费商用，或已购买授权），省得做完再换。见[《这款字能不能商用：五步自查》](https://docs.cocobook.com/link/644)。
2. **再看用途。** 远看还是近看？印刷还是屏幕？大字少字，还是还有小字说明？
3. **然后看气质。** 主题是庄重、活泼、科技、复古还是文艺？
4. **最后看字重和字符。** 标题要的粗细在不在；文案里的字全不全。

## 字体气质速查

| 类型 | 常见气质 | 适合 |
|---|---|---|
| 黑体（无衬线） | 现代、干净、有力 | 科技、商业、信息为主的海报 |
| 宋体、明朝体 | 正式、文雅、有书卷气 | 文化、出版、高端品牌 |
| 仿宋 | 古朴、公文感 | 文化活动、复古主题 |
| 楷体 | 亲切、手写感 | 教育、生活、温和的主题 |
| 圆体 | 柔和、可爱 | 亲子、食品、轻松的活动 |
| 书法、手写体 | 个性强 | 只做标题或少量大字 |
| 像素体 | 游戏、复古数码 | 游戏、潮流主题 |
| 窄体、斜体、美术字 | 动感、张扬 | 大标题、促销 |

## 实用技巧

- **用真实文案试。** 字体页的样张可以改成你的标题，一眼看出合不合适。
- **看最难的字。** 笔画多的字、标点、数字和英文，最容易露怯。
- **注意字重档数。** 主标题、副标题、正文要拉开层次，一款字至少要有两三档粗细，不够就再配一款。
- **大字要看字间距。** 中文字体默认字距是为正文设的，做大标题时常常需要手动收紧或放松。

## 交付前

- 确认印刷文件里的字体已经转曲或嵌入，见[《交付印刷：转曲、嵌入字体和 PDF/X》](https://docs.cocobook.com/link/632)。
- 记下用了哪些字、许可来源，交给客户，见[《给客户做项目：字体许可谁负责、交付时附什么》](https://docs.cocobook.com/link/635)。

## 接下来读什么

- [《中文字体怎么搭配：标题、正文和中西文混排》](https://docs.cocobook.com/link/630)
- [《文风精选：按场景挑字》](https://docs.cocobook.com/link/641)

# 中文字体怎么搭配：标题、正文和中西文混排

> 适合谁看：要在一个版面里同时用几款字，或者中英文混排的设计师。

## 少即是多

一个项目通常两款字就够：一款做标题，一款做正文。再加，就用同一款字的不同字重来拉层次，而不是再加一款新字。

## 标题和正文怎么配

| 思路 | 例子 | 效果 |
|---|---|---|
| 对比：一款有性格，一款很安静 | 标题用书法体或美术字，正文用宋体或黑体 | 有重点，不打架 |
| 同族：同一家族的不同字重 | 标题用粗黑体，正文用常规黑体 | 统一、稳妥 |
| 同源：衬线配衬线 | 标题用粗宋体，正文用细宋体 | 文雅、正式 |

避免两款风格接近却又不一样的字放在一起，比如两款不同的黑体，读者会觉得「哪里不对」。

## 中西文混排

中文字体里自带的英文字母和数字，有的设计得很好，有的只是凑数。混排前先看看：

- **直接用中文字体自带的英文**：最省事，风格统一。适合英文少的版面。
- **另配一款英文字体**：英文多、或者自带的英文不好看时。挑的时候注意：
  - 英文字体的粗细要和中文接近；
  - 英文的字母高度看起来要和汉字协调，必要时把英文略微放大；
  - 风格要呼应：黑体配无衬线英文，宋体配衬线英文。

在网页和软件里，常见做法是把英文字体写在前面、中文字体写在后面，让英文字母用英文字体显示，汉字落到中文字体上。网页写法见[《在 CSS 里使用：字体名、备用字体和多字重》](https://docs.cocobook.com/link/649)。

## 中英文之间的空格和标点

- 中英文、中文和数字之间是否加空格，整个项目统一一种做法。
- 中文句子用全角标点，英文句子用半角标点，不要混用。

W3C 的《中文排版需求》对中西文混排、标点有更完整的说明。

## 参考资料

- W3C《中文排版需求》 https://www.w3.org/TR/clreq/

## 接下来读什么

- [《正文用字：字号、行距和字重》](https://docs.cocobook.com/link/631)
- [《多字重家族和可变字体怎么挑》](https://docs.cocobook.com/link/637)

# 正文用字：字号、行距和字重

> 适合谁看：要排大段中文的设计师和编辑，比如文章页、电子书、手册、长图。

## 选什么字

正文要的是好读、不累：

- 屏幕上：黑体最常见；楷体、宋体在大屏上也可以做正文，小字号时笔画细的字容易发虚。
- 印刷品：宋体、仿宋、楷体都常用于正文；黑体适合说明文字和图注。
- 正文选常规（Regular）或略细的字重，不要用太粗或太细的字重。
- 先查字：正文里常有人名、地名、专业词，用字体页「查字」确认不缺字。

## 行长和行距

W3C《中文排版需求》给出的参考：

- **行长**：大多数书籍正文一行在 17 到 40 字之间；最少不宜少于 10 字，横排不宜多于 48 字。
- **行距**：行与行之间的空白，多半是字号的 50% 到 100%，一般不超过字号本身。换成软件里的「行高」，大约是字号的 1.5 到 2 倍。

具体取多少，看字号、字体和阅读环境，用真实内容试排确认。

## 屏幕和印刷的差别

| | 屏幕 | 印刷 |
|---|---|---|
| 字号 | 手机正文一般比印刷品的正文字号看起来更大 | 按成品尺寸和阅读距离定 |
| 细笔画 | 低分辨率屏幕上容易发虚，选笔画不太细的字 | 细笔画能印清楚，但要注意纸张和印刷方式 |
| 字体文件 | 网页上要用网页字体，见[《网页字体引用与 CDN 接入》](https://docs.cocobook.com/link/594) | 交付前转曲或嵌入，见[《交付印刷：转曲、嵌入字体和 PDF/X》](https://docs.cocobook.com/link/632) |

## 其他小细节

- 正文两端对齐时，注意行尾标点挤压和段落最后一行。
- 段落之间可以用段间距，也可以用首行缩进两个字，不要两者都用得很大。
- 长段落里少用粗体，强调用得多了就不再是强调。

## 参考资料

- W3C《中文排版需求》 https://www.w3.org/TR/clreq/

## 接下来读什么

- [《中文字体怎么搭配：标题、正文和中西文混排》](https://docs.cocobook.com/link/630)
- [《文风精选：按场景挑字》](https://docs.cocobook.com/link/641)

# 交付印刷：转曲、嵌入字体和 PDF/X

> 适合谁看：要把设计稿交给印刷厂、或者交付给客户归档的设计师。

印刷厂的电脑上不一定装着你用的字。交付前要么把字**转曲**（变成图形），要么把字体**嵌入** PDF。

## 转曲和嵌入有什么不同

| | 转曲（创建轮廓） | 嵌入字体 |
|---|---|---|
| 做法 | 把文字变成矢量图形 | 把字体数据放进 PDF |
| 之后还能改字吗 | 不能，文字已经变成图形 | PDF 一般只做小改；嵌入的通常是用到的那部分字 |
| 文件里还能搜到文字吗 | 不能 | 能 |
| 适合 | 标志、少量大字、印刷厂要求转曲的 | 书刊、手册等文字多的文件 |

字体本身的嵌入权限可能禁止嵌入。遇到软件提示不能嵌入，就改为转曲，或换一款允许嵌入的字。

## 在 Illustrator 里转曲

1. 先另存一份可编辑的源文件（转曲后改不回来）。
2. 选中文字，选择「文字 > 创建轮廓」（Windows 快捷键 Shift+Ctrl+O，Mac 上是 Shift+Command+O）。
3. 用「文字 > 查找/替换字体」检查，文档里不应再列出字体。

点阵字体和受轮廓保护的字体不能转曲。

## 导出 PDF/X

很多印刷厂要求 PDF/X 格式的文件。以 InDesign 为例：

1. 选择「文件 > 导出」，格式选 Adobe PDF（打印）。
2. 在预设里选印刷厂要求的 PDF/X 标准（例如 PDF/X-1a、PDF/X-4）。PDF/X-1a 要求嵌入全部字体。
3. 按印刷厂的要求设好输出意图（色彩配置）。

只有字体厂商允许嵌入的字体才能嵌进 PDF，否则 InDesign 可能替换字体，导出后一定要检查。

## 发出去之前检查

- 用 Adobe Acrobat 打开 PDF，看「文件 > 属性 > 字体」，确认字体都已嵌入，或者已经没有文字（全部转曲）。
- 问清印刷厂的要求：要不要转曲、要哪种 PDF/X、出血和色彩怎么设。

## 打包源文件时注意许可

InDesign 的「文件 > 打包」会把用到的字体文件一起复制出来（Adobe Fonts 的字体除外）。把这个包交给印刷厂或客户之前，先确认字体许可允许再分发字体文件；不允许的，就只交 PDF，或请对方自己取得授权。

## 参考资料

- Adobe Illustrator：Add advanced formatting to text（Convert type to outlines） https://helpx.adobe.com/illustrator/using/add-advanced-formatting-to-text.html
- Adobe InDesign：Export InDesign files to Adobe PDF https://helpx.adobe.com/indesign/using/exporting-publishing-pdf.html
- Adobe InDesign：Package files for output https://helpx.adobe.com/indesign/desktop/print/preflight/package-files-for-output.html

## 接下来读什么

- [《给客户做项目：字体许可谁负责、交付时附什么》](https://docs.cocobook.com/link/635)
- [《打开设计文件提示缺少字体怎么办》](https://docs.cocobook.com/link/132)

# 在 Figma 里用文风字体

> 适合谁看：用 Figma 做设计，想用文风字体库里的字的设计师和团队。

Figma 默认只带 Google 字体和部分 Apple 字体。要用文风收录的字，得先把字体装在自己电脑上。

## 第 1 步：下载并安装字体

1. 到 wenfeng.org 的字体条目下载原件（标「本站下载」的），或者按条目里的链接去作者、厂商官网下载。见[《下载原件和切片：什么能下、怎么用》](https://docs.cocobook.com/link/645)。
2. Figma 支持 `.ttf` 和 `.otf`。下载的压缩包里常有好几个字重，按需安装。
3. 安装方法见[《在 Windows 10 和 11 上安装和删除字体》](https://docs.cocobook.com/link/121)、[《在 macOS 上安装、删除和恢复字体》](https://docs.cocobook.com/link/123)。

注意：网页字体用的 woff2 切片不能装进 Figma，要用原件。

## 第 2 步：让 Figma 读到本地字体

- **用 Figma 桌面版**：不用另外装东西。装完字体后重启 Figma。
- **用浏览器里的 Figma**：要先安装 Figma 的字体安装程序（Figma font installer，也叫 FigmaAgent），然后刷新页面。

Linux 和 ChromeOS 上的 Figma 不支持本地字体。

## 第 3 步：在文件里找到字体

选中文字图层，打开右侧的字体菜单，在筛选里选「Installed by you」，再搜字体名。中文字体可能要用英文名搜，例如霞鹜文楷搜「LXGW WenKai」。英文名可以在文风字体页上看到。

## 团队协作的坑

- **每个人都要装同一款字、同样的字重。** 有人没装，打开文件就会提示缺字体，文字会被临时替换。
- **把字体上传到 Figma 账户或团队之前，先看许可。** 上传等于把字体文件存到第三方平台，Figma 也会要求你确认有权上传。厂商禁止再分发的字体，不要上传。
- **交接给前端时说清字体名和字重。** 见[《从设计稿到上线：怎么和前端对接字体》](https://docs.cocobook.com/link/640)。

## 参考资料

- Figma：Add a font to Figma https://help.figma.com/hc/en-us/articles/360039956894

## 接下来读什么

- [《装好的字体在设计软件里找不到怎么办》](https://docs.cocobook.com/link/129)

# 在 Photoshop、Illustrator、InDesign 里用文风字体

> 适合谁看：用 Adobe 软件做设计，想用文风字体库里的字的设计师。

## 安装

Adobe 软件使用电脑上已安装的字体。先下载原件并装好：

1. 到 wenfeng.org 的字体条目下载原件，或按条目链接去作者、厂商官网下载。见[《下载原件和切片：什么能下、怎么用》](https://docs.cocobook.com/link/645)。
2. 安装后重启 Adobe 软件。装好却找不到，按[《装好的字体在设计软件里找不到怎么办》](https://docs.cocobook.com/link/129) 排查。

中文字体在字体菜单里可能显示英文名，可以用英文名搜，例如思源黑体搜「Source Han Sans」。

## 打开别人的文件提示缺字体

- **Photoshop**：选择「文字 > 管理缺失字体」，可以先不替换，也可以换成文档里已有的字体或默认字体。最好的办法还是装上原来那款字。
- **InDesign**：打开文件时会列出缺失的字体，可以替换。如果对方用「打包」交了文件，包里的 Document Fonts 文件夹中的字体会在打开这份文档时自动可用。
- 通用排查见[《打开设计文件提示缺少字体怎么办》](https://docs.cocobook.com/link/132)。

## 交付前

- 印刷：转曲或嵌入，见[《交付印刷：转曲、嵌入字体和 PDF/X》](https://docs.cocobook.com/link/632)。
- 打包给别人：InDesign「文件 > 打包」会复制字体文件（Adobe Fonts 的除外）。把包交出去之前，确认字体许可允许再分发；不允许的，请对方自己取得字体。

## 参考资料

- Adobe Photoshop：Replace missing fonts https://helpx.adobe.com/photoshop/desktop/text-typography/select-manage-fonts/replace-missing-fonts.html
- Adobe InDesign：Using fonts https://helpx.adobe.com/indesign/using/using-fonts.html
- Adobe InDesign：Package files for output https://helpx.adobe.com/indesign/desktop/print/preflight/package-files-for-output.html
- Adobe Fonts：Package font files https://helpx.adobe.com/fonts/using/package-font-files.html

## 接下来读什么

- [《在 Figma 里用文风字体》](https://docs.cocobook.com/link/633)
- [《给客户做项目：字体许可谁负责、交付时附什么》](https://docs.cocobook.com/link/635)

# 给客户做项目：字体许可谁负责、交付时附什么

> 适合谁看：接外包、在设计公司或代理商工作，要把设计成果交给客户的设计师和项目经理。

**本页是一般性的做法建议，不构成法律意见。** 责任怎么分，以你和客户签的合同为准；合同里没写清的，请咨询律师。文风不对具体项目的责任划分作出承诺。

## 先在合同里写清楚

字体许可最容易在交付后才出问题。签约时把这几件事写进合同或报价单：

| 要写清的事 | 说明 |
|---|---|
| 字体由谁选、谁买 | 设计方推荐，客户确认；需要付费授权的，写明由谁购买、授权主体是谁 |
| 授权主体 | 商业字体的授权通常要以实际使用方（往往是客户）的名义购买 |
| 用途范围 | 网页、印刷、视频、App、商品包装、商标……用途不同，许可要求不同 |
| 交付内容 | 交 PDF、交源文件，还是连字体文件一起交 |
| 后续使用 | 客户以后自己改稿、加印、做延伸物料时，字体怎么办 |

## 开源字体最省心

采用标准开源协议（OFL、Apache、MIT 等）的字体，客户一般可以直接按协议使用，不必另签授权。即便这样，也建议交付时附上许可材料。

## 交付时附一份「字体清单」

| 字体 | 用在哪 | 许可 | 许可原文 | 文件来源 | 证明编号（如有） |
|---|---|---|---|---|---|
| 思源黑体 | 正文 | OFL-1.1 | https://wenfeng.org/license/syhtsc/ | wenfeng.org | （申请后填写） |

再附上：

- 每款字的许可原文（PDF 或文本）；
- 采用标准开源协议的字体，可以在 wenfeng.org 申请授权证明，见[《怎么申请授权证明》](https://docs.cocobook.com/link/664)。

## 持证单位能不能写客户的名字

可以把客户写成持证单位，但要知道：持证单位只表示这份证明副本存在哪家单位的档案里，**不等于被授权人**。证明也不是授权书，见[《证明不是什么》](https://docs.cocobook.com/link/667)。

## 字体文件能不能交给客户

- 许可允许再分发（如 OFL）：可以随源文件一起交，附上许可原文。
- 许可不允许再分发（很多厂商免费商用字、几乎所有商业字体）：不要把字体文件放进交付包。交 PDF 或转曲文件；客户要改稿，请客户自己从官方渠道取得字体或购买授权。

## 接下来读什么

- [《公司用字，怎么留一份合规凭证》](https://docs.cocobook.com/link/622)
- [《交付印刷：转曲、嵌入字体和 PDF/X》](https://docs.cocobook.com/link/632)

# 改字和做字标：开源许可允许什么

> 适合谁看：想用开源字体做标志、字标，或者想改动字形、补字后再发布的设计师。

本页以最常见的 SIL 开放字体许可证（OFL）为例。其他协议请读各自原文。本页是操作说明，不构成法律意见。

## 用 OFL 字体做标志和字标

OFL 官方常见问题说明：可以用 OFL 字体做标志、图形、招牌等作品，作品归你，不需要另外取得许可或署名。

做法上：

- 把字转曲后再调整字形、做成标志图形，是在做「作品」，不是在发布一款新字体。
- 注册商标前，仍建议读一遍许可原文，并咨询商标代理或律师。
- 免费商用的厂商字体，很多条款对商标、标志另有限制，要读原文。

## 改字体本身再发布

这是在做「派生字体」，规则更严格：

| 要求 | 说明 |
|---|---|
| 不能用保留字体名 | 原字体声明了保留字体名（Reserved Font Name）的，改过的版本不能再用这些名字，除非权利人书面同意 |
| 仍用 OFL | 改过的字体也必须按 OFL 发布 |
| 保留版权声明和许可 | 发布时附上原来的版权声明和许可文本 |
| 不能单独出售 | OFL 字体，改过的也一样，不能单独卖字体文件 |

保留字体名在哪里看：到 `https://wenfeng.org/license/{目录名}/`，页面上会写「有保留名」，并列出具体名字。例如霞鹜文楷的保留名包括「霞鹜」「LXGW」等。

## 常见误区

- **补了几个字，还用原名发布。** 不行，补字也是修改。
- **以为「开源」就是字形不受保护。** 开源许可是著作权人允许你使用的书面条款，要按条款来。
- **把同一家厂商另一款字的规则套过来。** 每款字单独看，见[《品牌方不等于制作方：别拿一款字的许可推断另一款》](https://docs.cocobook.com/link/639)。

## 参考资料

- SIL：OFL-FAQ https://openfontlicense.org/ofl-faq/
- SIL：Using OFL fonts https://openfontlicense.org/how-to-use-ofl-fonts/
- wenfeng.org 法律声明 https://wenfeng.org/legal

## 接下来读什么

- [《许可档位与标签》](https://docs.cocobook.com/link/591)
- [《哪些字体可以出证明》](https://docs.cocobook.com/link/663)

# 多字重家族和可变字体怎么挑

> 适合谁看：要给品牌、产品界面或出版物选一整套字体的设计师。

## 字重是什么

字重就是笔画粗细的档位，常见的名字从细到粗是 Thin、ExtraLight、Light、Regular、Medium、SemiBold、Bold、ExtraBold、Heavy、Black。不同字体的命名不完全一样，以字体页「字重」一栏为准。

## 要几档才够

| 场景 | 建议 |
|---|---|
| 海报、单页 | 两三档就够：标题粗、正文常规 |
| 品牌系统、产品界面 | 至少 Regular、Medium、Bold；有细体更好 |
| 书刊、长文档 | 正文一档加一档加粗用于强调 |

挑多字重家族的好处是风格统一，不用在不同字体之间凑。中文开源字体里，思源黑体、思源宋体这类家族的字重较全。

## 可变字体

可变字体把多个字重（有时还有宽度等变化）放在一个文件里，可以在两档之间连续调节。

- 优点：一个文件覆盖多档粗细，调节更细腻。
- 注意：设计软件和网页对可变字体的支持各不相同，先在你要用的软件里试。中文可变字体文件往往很大。
- 文风网页字体按字重分别提供 CSS，每档单独加载，用哪档加载哪档。

## 挑选步骤

1. 在字体页看「字重」有几档，逐档看样张。
2. 用同一段文字比较相邻两档，粗细差别要明显。
3. 确认每一档都覆盖你要用的字（「查字」）。
4. 网页项目：问前端每多一档会多加载多少，见[《性能：子集、字体显示策略和预连接》](https://docs.cocobook.com/link/650)。

## 接下来读什么

- 文件格式和可变字体的基础知识：[《字体文件格式怎么选：TTF、OTF、TTC、WOFF2 和可变字体》](https://docs.cocobook.com/link/120)
- [《中文字体怎么搭配：标题、正文和中西文混排》](https://docs.cocobook.com/link/630)

# 像素字、手写体和书法体的使用边界

> 适合谁看：喜欢用有个性的字体，想知道它们适合用在哪里、不适合用在哪里的设计师。

## 展示用和正文用

字体大致可以分成两类：

- **正文字体**：为长时间阅读设计，字形规整、小字号也清楚，比如常规的黑体、宋体、楷体。
- **展示字体**：为吸引注意设计，个性强，适合大字号和少量文字，比如书法体、手写体、像素体、美术字。

把展示字体用在大段正文上，读者会很累；把正文字体用在主视觉上，画面可能缺少个性。

## 各类字体的边界

| 类型 | 适合 | 不适合 | 要注意 |
|---|---|---|---|
| 像素字 | 游戏界面、复古数码风格、标题 | 大段正文、需要正式感的场合 | 像素字通常在特定字号（设计格子的整数倍）上最清楚，缩放到其他尺寸可能发糊 |
| 手写体 | 标题、引语、手账风格、短句 | 合同、说明书等需要准确阅读的文字 | 手写体常缺字，先「查字」 |
| 书法体 | 标题、节庆、文化主题 | 小字号、长段落 | 笔画粗细变化大，缩小后细笔画容易看不清 |
| 美术字、窄体 | 促销、大标题 | 正文 | 字间距、行距常常要手动调 |

## 实际使用的建议

- 展示字体只放在标题和少量文字上，正文配一款稳定的正文字体。
- 用之前先检查字符：手写体、书法体收字往往比正文字体少。
- 网页上使用：展示字体通常只用于标题，可以只加载常用字或标题用到的字，减小体积，见[《性能：子集、字体显示策略和预连接》](https://docs.cocobook.com/link/650)。
- 许可照样要看：个性字体中「个人免费」的比例更高，商用前按[《这款字能不能商用：五步自查》](https://docs.cocobook.com/link/644) 确认。

## 可以先试的几款

见[《文风精选：按场景挑字》](https://docs.cocobook.com/link/641) 里「标题与展示」「书法与像素」两节。

# 品牌方不等于制作方：别拿一款字的许可推断另一款

> 适合谁看：看到「某某厂商的字都能免费商用」这类说法，想弄清楚的设计师和采购。

## 三个容易混的角色

| 角色 | 是谁 | 例子 |
|---|---|---|
| 品牌方（出资方） | 出钱请人做字、拥有版权的公司 | 某互联网公司发布自己的品牌字体 |
| 制作方（受托方） | 受委托做字的字库厂商 | 字库厂商为品牌代工 |
| 发布方 | 把字体放出来给大家用的一方 | 可能是品牌方，也可能是作者本人 |

## 为什么不能互相推断

- **品牌方放出的免费商用字，不代表制作方的其他字也免费。** 字库厂商受托做的字，版权在出资的品牌方；这家厂商自己的字库产品，通常是付费授权。
- **同一家的两款字，许可可能完全不同。** 一家公司可能有一款开源字体，也有一款只许在自家产品里用的字体。
- **派生字体要单独看。** 基于开源字体改出来的字，要看它自己的许可声明；有的沿用上游协议，有的另有说明。

## 在文风上怎么看归属

- 字体页「授权」区写着这款字的出处和档位，只对这一款有效。
- 厂商页的「归属」「受托」标记：「归属」表示版权在这一家；「受托」表示这家代做，版权在出资的品牌方，不计入这家的归属。见[《厂商、作者与品牌归属》](https://docs.cocobook.com/link/595)。
- 谱系页显示派生关系，但上游的许可结论不会自动套到下游。

## 一条规则

**每款字单独查原文。** 不要因为「同一家」「同一个作者」「长得像」就套用另一款字的许可。

## 接下来读什么

- [《网上说「免费商用」，到底能不能用》](https://docs.cocobook.com/link/620)
- [《许可档位与标签》](https://docs.cocobook.com/link/591)

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

> 适合谁看：做网页、小程序、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)

# 文风精选：按场景挑字

> 适合谁看：不知道从哪款字开始挑的设计师和普通用户。

下面的字都在文风字体库上架，目前标为「开源商用」，在 wenfeng.org 有归档的许可原文。名单只是起点，**用之前仍请读一遍许可原文**，并确认你的用法在许可范围内。

每款字给两个链接：「字体页」看样张、字重和查字；「许可原文」看归档的协议全文和保留字体名。

## 正文阅读（文章、电子书、讲义）

| 字体 | 类型 | 协议 | 说明 | 链接 |
|---|---|---|---|---|
| 思源宋体 | 宋体 | OFL-1.1 | 字重齐全，从细到粗多档，印刷和屏幕正文都常用 | [字体页](https://app.windfonts.com/fonts/systsc) · [许可原文](https://wenfeng.org/license/systsc/) |
| 霞鹜文楷 | 楷体 | OFL-1.1 | 笔画柔和，适合屏幕阅读和文艺类正文；有保留字体名 | [字体页](https://app.windfonts.com/fonts/xwwk) · [许可原文](https://wenfeng.org/license/xwwk/) |
| 霞鹜铭心宋 | 宋体 | OFL-1.1 | 单字重，适合正文和小标题；有保留字体名 | [字体页](https://app.windfonts.com/fonts/xwmxs) · [许可原文](https://wenfeng.org/license/xwmxs/) |
| 朱雀仿宋 | 仿宋 | OFL-1.1 | 仿宋风格，适合正式文本和文化类内容 | [字体页](https://app.windfonts.com/fonts/zqfs) · [许可原文](https://wenfeng.org/license/zqfs/) |
| 寒蝉活仿宋 | 仿宋 | OFL-1.1 | 带活字印刷味道的仿宋；有保留字体名 | [字体页](https://app.windfonts.com/fonts/hchfs) · [许可原文](https://wenfeng.org/license/hchfs/) |

## 界面和说明文字（网页、App、表格）

| 字体 | 类型 | 协议 | 说明 | 链接 |
|---|---|---|---|---|
| 思源黑体 | 黑体 | OFL-1.1 | 字重齐全，最常用的开源中文黑体之一 | [字体页](https://app.windfonts.com/fonts/syhtsc) · [许可原文](https://wenfeng.org/license/syhtsc/) |
| 更纱黑体 | 黑体 | OFL-1.1 | 适合界面、正文，也常用于写代码的环境；有保留字体名 | [字体页](https://app.windfonts.com/fonts/gsht) · [许可原文](https://wenfeng.org/license/gsht/) |
| IBM Plex 无衬线简体中文 | 黑体 | OFL-1.1 | 和 IBM Plex 英文家族风格一致，适合中英文混排的产品界面 | [字体页](https://app.windfonts.com/fonts/ibmps) · [许可原文](https://wenfeng.org/license/ibmps/) |
| 霞鹜新晰黑 | 黑体 | IPA | 单字重，字形清楚，适合屏幕阅读和办公文档 | [字体页](https://app.windfonts.com/fonts/xwxxh) · [许可原文](https://wenfeng.org/license/xwxxh/) |
| 寒蝉云墨黑 | 黑体 | OFL-1.1 | 四档字重，可做正文和标题 | [字体页](https://app.windfonts.com/fonts/hcymh) · [许可原文](https://wenfeng.org/license/hcymh/) |

## 标题与展示（海报、封面、短视频）

| 字体 | 类型 | 协议 | 说明 | 链接 |
|---|---|---|---|---|
| 得意黑 | 斜体窄黑 | OFL-1.1 | 只有一档斜体，适合醒目的标题和字幕 | [字体页](https://app.windfonts.com/fonts/dyh) · [许可原文](https://wenfeng.org/license/dyh/) |
| 站酷快乐体 | 美术字 | OFL-1.1 | 活泼，适合促销、标题 | [字体页](https://app.windfonts.com/fonts/zkklt) · [许可原文](https://wenfeng.org/license/zkklt/) |
| 猫啃什锦黑 | 粗黑 | OFL-1.1 | 只有粗体，适合标题和字幕 | [字体页](https://app.windfonts.com/fonts/mksjh) · [许可原文](https://wenfeng.org/license/mksjh/) |
| 荆南麦圆 | 圆体 | OFL-1.1 | 圆润，适合包装、品牌标题 | [字体页](https://app.windfonts.com/fonts/jnmy) · [许可原文](https://wenfeng.org/license/jnmy/) |

## 书法与像素

| 字体 | 类型 | 协议 | 说明 | 链接 |
|---|---|---|---|---|
| 马善政楷书 | 书法楷书 | OFL-1.1 | 毛笔楷书，适合标题和文化主题 | [字体页](https://app.windfonts.com/fonts/mszks) · [许可原文](https://wenfeng.org/license/mszks/) |
| 缝合像素 | 像素 | MIT | 像素风格，适合游戏和复古数码主题，按设计格子的整数倍字号使用最清楚 | [字体页](https://app.windfonts.com/fonts/fhxs10) · [许可原文](https://wenfeng.org/license/fhxs10/) |

## 免费商用的厂商字体

阿里巴巴普惠体（[字体页](https://app.windfonts.com/fonts/albbpht)）是厂商免费商用字体，字重多，常用于电商和品牌设计。它不是开源协议：原件要到阿里巴巴字体官网下载，不允许单独再分发字体文件，文风也不为它出证明。用之前请到厂商官网读授权协议原文。

## 用前再确认三件事

1. **字重够不够。** 有几款只有一档字重，做层次要另配一款字。
2. **字全不全。** 在字体页「查字」里输入你的文案，尤其是人名、地名和繁体字。
3. **保留字体名。** 标了「有保留名」的字，改过后不能再用原名发布，见[《改字和做字标：开源许可允许什么》](https://docs.cocobook.com/link/636)。

## 接下来读什么

- [《海报和主视觉怎么挑中文字体》](https://docs.cocobook.com/link/629)
- [《这款字能不能商用：五步自查》](https://docs.cocobook.com/link/644)
- 按分类筛更多字体：https://app.windfonts.com/fonts