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