用文风网页字体：一页看懂正确接法

适合谁看：准备在网站上用文风网页字体，想一次把关键做法看全的开发者和站长。

本页是要点汇总，细节在《文风开发者文档》各页。

地址

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。

详见《在 CSS 里使用：字体名、备用字体和多字重》。

已经帮你做好的事

• 字体已经按 unicode-range 拆成很多 WOFF2 分片，浏览器只下载用到的；
• CSS 里每条 @font-face 都写了 font-display: swap；
• CSS 和分片都允许跨域引用，并带长期缓存头。

不需要、也不建议做的事

• 不要预加载某个分片，原因见《加载策略：font-display、预连接和预加载》；
• 不要把 CSS 里的分片地址抄到自己的 CSS 里，分片文件名可能随字体更新而变化；
• 想放在自己服务器上，用整套切片包，见《自托管切片与 WordPress 主题》。

先看许可

文风收录的字体许可各不相同。文风收录的字体许可各不相同^[1][2]。上线前打开字体页的许可原文，确认网页使用在许可范围内，见《这款字能不能商用：五步自查》。

参考资料

参考资料（2）

1. 文风字体库：https://app.windfonts.com/fonts文风字体库
2. 文风许可说明：https://wenfeng.org/license文风许可说明，文派（广州）科技有限公司