2025-09-08T14:18:29.png

本站使用字体的方案是：本地 WOFF2 + font-display:swap + preload。
这样是现阶段 Typecho 打开最流畅、性能最稳的方案。

具体实施步骤

1. 准备字体

只留 woff2，比如 ziti.woff2

本站字体

扔进主题目录
/usr/themes/你的主题/fonts/ziti.woff2

2. 添加代码

编辑主题的 header.php，所有字体优化代码必须放在 <head> 标签内部。

① 在 <head> 的下一行，添加如下代码（复制时把尖括号两边空格去掉）：

< link rel="preload" href="<?php $this->options->themeUrl('fonts/ziti.woff2'); ?>" as="font" type="font/woff2" crossorigin >

② 接着在 </head> 前加一段 <style>（复制时把尖括号两边空格去掉）：

< style>
@font-face {
  font-family: 'MyFont';
  src: url('<?php $this->options->themeUrl('fonts/ziti.woff2'); ?>') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
body {
  font-family: 'MyFont', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
}
< /style>

保存后清缓存（浏览器 + 任意缓存插件）。

更新：

更新：主题内置 字体「启用/关闭」开关，后台一键切换，无需再改代码。

一、后台增加开关（functions.php）把下面代码插到主题 functions.php 「基础设置」里位置（已有 themeConfig 就往里追加）：

比如在 第一个 $form->addInput(...) 之前插入下面代码：

    /* 原有配置不动，只追加这一项 */
    $useLocalFont = new Typecho_Widget_Helper_Form_Element_Radio(
        'useLocalFont',
        ['1' => '启用', '0' => '关闭'],
        '1',   // 默认开启，和老教程保持一致
        _t('使用本地 ziti.woff2 字体'),
        _t('关闭后恢复系统默认字体，不再加载任何字体文件')
    );
    $form->addInput($useLocalFont);

二、修改在 header.php 里先前添加的代码：

  1. <head>下一行改成（复制时把尖括号两边空格去掉）：
< ?php if ($this->options->useLocalFont == '1'): ?>
<link rel="preload" href="<?php $this->options->themeUrl('fonts/ziti.woff2'); ?>" as="font" type="font/woff2" crossorigin>
< ?php endif; ?>
  1. </head>前改成（复制时把尖括号两边空格去掉）：
< ?php if ($this->options->useLocalFont == '1'): ?>
<style>
@font-face {
  font-family: 'MyFont';
  src: url('<?php $this->options->themeUrl('fonts/ziti.woff2'); ?>') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
body {
  font-family: 'MyFont', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
}
</style>
< ?php endif; ?>

三、保存后后台「外观-设置」→「基础设置」最顶部就能看到「使用本地 ziti.woff2 字体」单选，启用/停用一键搞定。

2025-09-10T13:38:04.png

版权声明与免责声明

①本网站的文章部分内容来源于网络，仅供大家学习与参考，如有侵权，请联系站长 QQ 445425400 删除处理。②本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。③本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报。

本文链接： https://www.imibtc.com/108.html