# 网页字体引用与 CDN 接入

> 适合谁看：网站运营、博主和不常写代码的人，想把文风的字体用到自己网站上。开发者请直接看《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>`，再把文字的字体设成刚才抄的名字，后面跟上系统字体作备用：

```html
<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 地址，能打开再用；打不开就改用上面的地址格式。

## 会不会很慢

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

## 放进网站后检查一下

- 刷新页面，看文字有没有换成新字体。
- 没换的话，按[《开发常见问题》](https://docs.cocobook.com/link/653) 里「页面上字体没生效」一条排查。最常见的原因是 `font-family` 的名字没写对。

## WordPress 用户

如果你想把字体文件放在自己的服务器上，不从文风加载，见[《自托管切片与 WordPress 主题》](https://docs.cocobook.com/link/651)。

## 接下来读什么

- 开发者完整说明：[《快速开始：一行代码用上中文网页字体》](https://docs.cocobook.com/link/647)
- 地址规则：[《网页字体地址规则》](https://docs.cocobook.com/link/648)
- 用字前确认许可：[《这款字能不能商用：五步自查》](https://docs.cocobook.com/link/644)