# 用文风网页字体：一页看懂正确接法
> 适合谁看：准备在网站上用文风网页字体，想一次把关键做法看全的开发者和站长。
本页是要点汇总，细节在《文风开发者文档》各页。
## 地址
```
https://cn.windfonts.com/fonts-packages/{目录名}/{字重}/{子集}/result.css
```
- `{目录名}`：字体页网址最后一段，小写；
- `{字重}`：照抄字体页上的字重名，区分大小写；
- `{子集}`：`full`、`zh`、`zh-common`、`en`。**只有 `full` 每款字都有**，其他子集用前先在浏览器打开确认。
详见[《网页字体地址规则》](https://docs.cocobook.com/link/648)。
## 推荐的引入代码
```html
```
- 第一行授权注释请保留，见[《保留授权注释》](https://docs.cocobook.com/link/652)；
- 预连接 `cn.windfonts.com`；
- 用 `` 引入，首屏字体不要用 `@import`。
## 字体名：从 CSS 里复制
不同字体 CSS 里声明的 `font-family` 名字格式不一样。**在浏览器里打开 `result.css`，搜 `font-family`，复制引号里的名字**，不要按目录名或字体中文名去猜。
```css
body {
font-family: "从 CSS 里复制的名字", "PingFang SC", "Microsoft YaHei", sans-serif;
line-height: 1.75;
}
```
## 多字重：先看 CSS 里的数值
每个字重一份 CSS。引入多份之前，打开每份 CSS 看 `font-weight` 的数值：
- 数值不同，就可以放心一起用，页面里用 `font-weight` 切换；
- 数值相同，只引入其中一份，否则后引入的会覆盖先引入的；
- 只有一档的字，不要再加粗、加斜，可以加 `font-synthesis: none`。
详见[《在 CSS 里使用：字体名、备用字体和多字重》](https://docs.cocobook.com/link/649)。
## 已经帮你做好的事
- 字体已经按 `unicode-range` 拆成很多 WOFF2 分片，浏览器只下载用到的；
- CSS 里每条 `@font-face` 都写了 `font-display: swap`；
- CSS 和分片都允许跨域引用，并带长期缓存头。
## 不需要、也不建议做的事
- **不要预加载某个分片**，原因见[《加载策略：font-display、预连接和预加载》](https://docs.cocobook.com/link/1252)；
- 不要把 CSS 里的分片地址抄到自己的 CSS 里，分片文件名可能随字体更新而变化；
- 想放在自己服务器上，用整套切片包，见[《自托管切片与 WordPress 主题》](https://docs.cocobook.com/link/651)。
## 先看许可
文风收录的字体许可各不相同。上线前打开字体页的许可原文，确认网页使用在许可范围内，见[《这款字能不能商用：五步自查》](https://docs.cocobook.com/link/644)。
参考资料