网页字体引用与 CDN 接入

---

• 三步接入
• 会不会很慢
• 放进网站后检查一下
• WordPress 用户
• 接下来读什么

---

适合谁看：网站运营、博主和不常写代码的人，想把文风的字体用到自己网站上。开发者请直接看《Windfonts 开发者文档》。

三步接入

第 1 步：拼出 CSS 地址。 格式是：

https://cn.windfonts.com/fonts-packages/{目录名}/{字重}/full/result.css

• {目录名}：字体页网址最后一段，全部小写。例如霞鹜文楷的字体页是 app.windfonts.com/fonts/xwwk，目录名就是 xwwk。
• {字重}：字体页「字重」里列出的名字，大小写照抄，例如 Regular、Bold。
• full 是完整子集，每款字都有。

例如霞鹜文楷常规体：

https://cn.windfonts.com/fonts-packages/xwwk/Regular/full/result.css

第 2 步：找到字体名。 在浏览器里直接打开这个地址，按 Ctrl+F（Mac 上是 ⌘F）搜 font-family，把引号里的名字抄下来。每款字的名字不一样，一定要从这里抄，不要自己猜。

第 3 步：放进网站。 把下面的代码贴进网站的 <head>，再把文字的字体设成刚才抄的名字，后面跟上系统字体作备用：

<link rel="stylesheet" href="https://cn.windfonts.com/fonts-packages/xwwk/Regular/full/result.css">
<style>
  body { font-family: "这里填抄下来的名字", "PingFang SC", "Microsoft YaHei", sans-serif; }
</style>

字体页上「获取代码」给出的代码第一行是一条授权注释，里面有 https://wenfeng.org/license。请把这行注释也贴进去，原样保留，不要改网址。

字体页「获取代码」也能直接复制整段代码。复制后请先在浏览器里打开代码里的 CSS 地址，能打开再用；打不开就改用上面的地址格式。

会不会很慢

不会一次下载整个字体。文件已经按字符拆成许多小片，浏览器只下载页面上实际用到的那几片，回访时还会用缓存。想进一步优化，见《性能：子集、字体显示策略和预连接》。

放进网站后检查一下

• 刷新页面，看文字有没有换成新字体。
• 没换的话，按《开发常见问题》 里「页面上字体没生效」一条排查。最常见的原因是 font-family 的名字没写对。

WordPress 用户

如果你想把字体文件放在自己的服务器上，不从文风加载，见《自托管切片与 WordPress 主题》。

接下来读什么

• 开发者完整说明：《快速开始：一行代码用上中文网页字体》
• 地址规则：《网页字体地址规则》
• 用字前确认许可：《这款字能不能商用：五步自查》