跳转到主要内容

自托管切片与 WordPress 主题

适合谁看：想把字体文件放在自己服务器上、不从文风加载的开发者和 WordPress 主题作者。

什么时候自托管

  • 内网系统、离线环境，访问不到外部地址。
  • 对第三方请求有严格要求的站点。
  • 想把字体和主题一起打包发布。

其他情况直接引用文风的 CSS 更省事，见《快速开始：一行代码用上中文网页字体》。

先确认许可允许

自托管等于你在自己的服务器上再分发字体文件。开源字体（OFL、Apache、MIT、IPA 等）一般允许；厂商的免费商用字体常常不允许单独再分发字体文件，或要求只能从官网下载。动手前先看许可原文，见《这款字能不能商用：五步自查》。

下载切片包

  1. 打开 wenfeng.org 上这款字的条目页：https://wenfeng.org/source/{目录名}/，例如 霞鹜文楷。
  2. 条目页写着「本站下载」的，可以领取「切片包」（woff2 + CSS）。写着「官方下载」「暂无下载」的，本站不提供切片包。
  3. 解压后得到一个文件夹，里面有 fonts.css 和许多 woff2 文件。

下载状态的含义见《下载原件和切片：什么能下、怎么用》。

放进网站

整个文件夹原样放进去，不要拆，不要改文件夹名。 fonts.css 用相对路径引用同目录下的 woff2，拆开或改名就找不到文件。

静态网站：

然后在样式里写字体名。字体名以 fonts.css 里 font-family 的写法为准，打开文件看一眼再抄。

WordPress 主题

把文件夹放进主题的 fonts/ 目录，在主题的 functions.php 里排队引入：

add_action( 'wp_enqueue_scripts', function () {
    wp_enqueue_style(
        'wenfeng-xwwk',
        get_theme_file_uri( '/fonts/wenfeng-xwwk/fonts.css' ),
        array(),
        null
    );
} );

再在主题样式里给需要的元素设置 font-family。

不想改主题代码的站长，可以用 WordPress 插件在后台选字，见《如何使用中文字体 Windfonts ？》。

别删注释

fonts.css 开头有一行授权注释，请原样保留。见《保留授权注释》。

下载后核对文件

条目页给了 SHA-256 校验值时，下载后可以核对一下文件有没有被改过。方法见《下载字体怎么避开山寨包和钓鱼站》。

接下来读什么

这篇文档对你有帮助吗？