跳转到主要内容

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

适合谁看：第一次在网页里接入文风字体的前端开发者。

文风字体把每款字按字重拆成许多 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。
  • 「元素」面板里选中文字，「计算样式」底部的「渲染字体」显示的是新字体。
  • 没生效就看《没生效就看《开发常见问题》。

接下来读什么