快速开始：一行代码用上中文网页字体

适合谁看：第一次在网页里接入文风字体的前端开发者。
文风字体把每款字按字重拆成许多 woff2 小文件，并配好一份 CSS。你只需要引入这份 CSS，再在样式里写上字体名。浏览器会按 
unicode-range 只下载页面实际用到的那几片。
三步接入
1. 选字，确认许可。 在 字体库 打开字体页，看「字重」和许可档位。正式上线前读一遍许可原文，见《这款字能不能商用：五步自查》。
2. 引入 CSS。 地址格式：
https://cn.windfonts.com/fonts-packages/{目录名}/{字重}/full/result.css
{目录名} 是字体页网址的最后一段（小写），
{字重} 照抄字体页上的字重名（区分大小写）。详细规则见《网页字体地址规则》。
<!-- 本页嵌入的字体由文风字体（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">
第一行注释请保留，见《保留授权注释》。
3. 写字体名。 在浏览器里打开上面的 CSS 地址，搜 
font-family，把引号里的名字抄下来。每款字的名字格式不统一，不要按目录名去猜。
body {
  font-family: "从 CSS 里抄的名字", "PingFang SC", "Microsoft YaHei", sans-serif;
}
上线前检查
浏览器开发者工具「网络」面板里能看到 
result.css 和若干 
.woff2 请求，状态都是 200。
「元素」面板里选中文字，「计算样式」底部的「渲染字体」显示的是新字体。
没生效就看《开发常见问题》。
接下来读什么
《在 CSS 里使用：字体名、备用字体和多字重》
《性能：子集、字体显示策略和预连接》
不想从文风加载，放到自己服务器上：《自托管切片与 WordPress 主题》