中文字体
如何使用中文字体 Windfonts ?
文风字体(Windfonts)是文派开源的 WordPress 中国生态基础项目之一,目前已在文派叶子 🍃(WP-China-Yes)中集成,可以直接使用。
一、安装插件
通过本站或者网络下载到 文派叶子 🍃(WP-China-Yes)最新版本;启用后可以看到文风字体设置选项。

文风字体(Windfonts)为您的网站增添无限活力。专为中文网页设计,旨在提升用户阅读体验和视觉享受
开启文风字体定制选项后,可以选择使用范围和实现效果。
- 全局启用
- 前台启用
- 本机字体
- 不启用
【全局启用】就是在前后台均可显示文风字体,如果使用的是个性字体那么建议是采用【前台启用】就可以满足大部分使用场景。
【本机字体】是使用的统一中文字体 fonts.css 文件实现,无需加载外部的字体文件,而是完全调用用户电脑中的字体。
二、获取字体
不同的字体文件需要通过 Windfonts 在线字体平台 ↗获取。

进入到文风字体平台后,选择需要的字体效果,然后点击【获取嵌入代码】,找到对应的免费字体嵌入代码:
- 字体家族名称:填入从文风字体获取的字体家族名称
- 字体链接:填入从文风字体获取的字体 CSS 链接
- 字体字重:设置字体权重大小(字体粗细)
- 字体样式:设置字体样式(正常、斜体、倾斜)
- 字体应用:设置字体应用的元素(CSS 选择器)
- 启用字体:是否启用该字体
三、设置字体 CSS
这里我们以Google版的思源黑体为例,将代码放入你的 <head> 标签内即可使用。
完整代码如下:
<link rel="preconnect" href="https://cn.windfonts.com" />
<link rel="stylesheet" type="text/css" href="https://cn.windfonts.com/wenfeng/fonts/syhtcjk/regular/web/index.css" />
<!-- 此中文网页字体由文风字体(Windfonts)免费提供,您可以自由引用,请务必保留此授权许可标注 https://wenfeng.org/license -->
- 字体家族名称:wenfeng-syhtcjk
- 字体链接:https://cn.windfonts.com/wenfeng/fonts/syhtcjk/regular/web/index.css
- 字体字重:保持默认
- 字体样式:保持默认
- 字体应用:自行填入,常用的标题标签为 h1,h2,h3,h4,h5,h6
- 启用字体:默认启用
当使用文派叶子插件时,只需要复制字体链接即可如:
https://cn.windfonts.com/wenfeng/fonts/syhtcjk/regular/web/index.css
插件内已经添加了字体授权标注,无需重复添加。
保存刷新前台页面后,就可以看到字体的应用效果。此为文风字体 Windfonts 的自建中文网络字体源站,您可以免费使用。
免费可商用字体仓库
WordPress 6.5 版本开始加入了一个新的字体库功能,默认已经集成了Google fonts 并且支持下载至自己的网站来使用,并且也支持手动上传字体。

上传的字体会出现在您的资料库中,并可在主题中使用。支持的格式:.ttf 、.otf 、.woff 和 .woff2。
字体区别
因为此功能和英文字体(26个字母加标点符号,小而简单)的特性,并不是时候中文字体(常用字库3500多个,大且全面),每一个中文字体文件大概在4~50MB不等,所以要直接上传到网站使用并不现实。
这里就需要用到文风字体的字体切片技术:将一个大的中文字体库文件切割为多个小文件,然后通过CSS来加载,这样可以按需请求和获取到字体文件包,实现快速、轻便的特性,完全不影响到网站的加载速度。
对应的一些免费可商用字体及免费开源字体(Open Fonts)资源站点可以参考以下链接。
文风字体
文风字体整理的了大部分的免费可商用及网页引用的中文字体库您可以按需启用。
- 免费可商用中文字体站 windfonts.com ↗
- 开源可商用中文字体站 wenfeng.org ↗
方块字库
方块字库 FontSquare 是一个整理的可商用及免费下载的英文字体库,您可以下载到对应的字体文件并转换为 Web 字体格式,上传到网站使用。
免费可商用英文字体站 fontsquare.com ↗
另请注意,方块字库绝大部分英文字体采用 OFL 开源协议授权,您可以根据实际情况使用。
提交新的中文字体
如果您确认字体的授权没有问题,Windfonts.com 乐意收录该中文字体提供服务,请通过支持论坛或联系我们发送相关的文件下载及授权信息地址。
审核无误后将会上传至字库系统进行切片处理。

特别注意:
所有的思源字体及衍生版字体均为开源授权。
也就是说,如果您发现自己想要用的字体本身就是思源字体的分支变体,那么请直接联系我们添加,无任何问题。
添加自定义 HTML 标签
文风字体默认规则设置里添加了部分 HTML 标签来实现网页中文字体的显示效果,如果不能满足您实际的要求,可以自行进行调整。

示例如下:
标题应用:
h1,h2,h3,h4,h5,h6
全局应用:
a,p,h1,h2,h3,h4,h5,h6,ul,ol,li,button,blockquote,pre,code,table,th,td,div:not([class*="star"]),label,b,i:not([class]),em,small,strong,sub,sup,ins,del,mark,abbr,dfn,span:not([class*="icon"])
全局应用(不含标题):
a,p,ul,ol,li,button,blockquote,pre,code,table,th,td,div:not([class="star"]),label,b,i:not([class]),em,small,strong,sub,sup,ins,del,mark,abbr,dfn,span:not([class="icon"])
问题排查
如果出现使用文风字体后,不能正常显示内容,可以参考以下方式:
缺字、少字、显示不全,没有简、繁字?
首先需要明白每个字体库的文件大小都是不一样,这也就意味着包含的数据信息不会一样,很多中文字体库都只是制作了常用的2500字,这其中很多还是简体和繁体的区别,也就是习惯繁体的字体设计师不会专门做简体字版本,反之亦然。
比如文风字体的“风”与“風”的简繁区别,很多字体库都显示不出来,那么这种情况下就需要自行取舍,或者使用别的字体。

特别注意:
所有的思源字体及衍生版字体均为开源授权。
也就是说,如果您发现自己想要用的字体本身缺少某些字,而且有一定的动手能力,可以尝试自行补全需要的字体,这些工具我们将会在 Wenfeng.org 文风开源字体平台提供。
如何避免字体侵权投诉?
使用 Windfonts 在线字体服务,如果担心会有侵权风险,请务必仔细阅读以下内容。
1、保留版权标注,也就是下面这段文字;
<!– 此中文网页字体由文风字体(Windfonts)免费提供,您可以自由引用,请务必保留此授权许可标注 https://wenfeng.org/license –>
您在网站源代码中保留了此注释信息,那么可以放心使用文风字体,有任何问题均由文派(广州)科技有限公司提供法律主体支持。
2、网站关于页面或者页脚链接直接标注;
对于想要明示网站使用的 Webfonts 为【文风字体】服务,请在网站页脚添加一条链接至 Windfonts.com 的链接,如下:
<a href="https://windfonts.com" target="_blank" rel="noreferrer noopener"> 文风字体 </a>
使用的是下载后的 Web fonts 字体切片也可使用:
<a href="https://wenfeng.org" target="_blank" rel="noreferrer noopener"> 文风字体 </a>
或者在您的关于页面写明是使用了文风字体服务,贴上对应链接即可。
3、更多说明可以按需要自行进行授权标注,这么做的目的仅一个:让所有人可以正常使用中文网页字体而无需担忧。
字体授权查询: https://wenfeng.org/license

您合规使用,我们省心服务。
如果您是使用的 WordPress 程序,并且已经安装了 文派叶子 🍃(WP-China-Yes)那么启用文风字体后,会自动标注此授权信息,无需再次填入。