子比自定义字体插件 (ZIB Custom Font)

11545236
预计阅读 10 分钟
一款专为子比主题设计的WordPress自定义字体插件，支持多种字体变体、预加载优化和缓存加速。

class="heading-2 ace-line old-record-id-Sqixf27Mydwgqic9zancUg5Dnpf"

class="heading-3 ace-line old-record-id-RDEYfRltAdxyXNcobIxc6otYnWh"

  • ✅ 支持自定义字体名称和URL
  • ✅ 支持 4 种字体变体（常规、粗体、斜体、粗体+斜体）
  • ✅ 支持 .woff2、.woff、.ttf、.otf、.svg 格式
  • ✅ 灵活的应用场景选择（正文、标题、评论、菜单）
  • ✅ 自定义CSS选择器支持

class="heading-3 ace-line old-record-id-DeFrfCbAddO7GWcwMj0cCWV4npf"

  • ⚡ 字体预加载（Preload）加速首屏渲染
  • 🚀 CSS缓存机制减少重复计算
  • 🎯 font-display 控制字体加载策略
  • 📦 多格式fallback支持

class="heading-3 ace-line old-record-id-Z1Peff9ugdHKtZcpsHRcznI7nPf"

  • 🎨 美观的设置界面
  • 👁️ 实时字体预览
  • 🔍 字体URL在线验证
  • 📊 文件大小自动检测
  • 🧹 一键清除缓存

class="heading-2 ace-line old-record-id-DYR4fZ9f1dSs5nc6gCBc65ThnDf"

class="heading-3 ace-line old-record-id-FqW9fRCg4dt3wucvwoYc5OxInpg"

  1. 下载插件压缩包
  2. 进入 WordPress 后台 → 插件 → 安装插件
  3. 点击”上传插件”按钮
  4. 选择zip文件并安装

class="heading-3 ace-line old-record-id-DUQzfKvpydDqdnc0CvwcjzUpn8e"

  1. 解压插件压缩包
  2. 将 `zib-custom-font` 文件夹上传到 `/wp-content/plugins/`
  3. 进入 WordPress 后台 → 插件
  4. 找到”子比自定义字体”并启用

class="heading-2 ace-line old-record-id-Cvskfx9cndk6hzchBPqcxxFQnCh"

class="heading-3 ace-line old-record-id-Y16zfFkUqdyoGic0BDLcXVLjnZd"

进入 设置 → 自定义字体，配置以下内容：
设置项
说明
字体名称
用于CSS中的font-family，如”思源黑体”
主字体文件
常规字体的woff2/woff/ttf文件URL

class="heading-3 ace-line old-record-id-Z7YjfKRl6dxnnwc5ieHcuznbnVg"

如果您的字体包包含多个字重/字形文件，可以分别设置：
  • 常规字体 – font-regular.woff2
  • 粗体 – font-bold.woff2
  • 斜体 – font-italic.woff2
  • 粗体+斜体 – font-bold-italic.woff2

class="heading-3 ace-line old-record-id-OXSefpQKHdec0lcowcfcexTXnlX"

选择字体应用的范围：
  • ☑️ 全站正文 – `body` 标签
  • ☑️ 标题文字 – `h1` ~ `h6` 标签
  • ☑️ 评论内容 – `.comment-content` 元素
  • ☑️ 导航菜单 – `.nav-menu` 元素
  • 自定义选择器 – 如 `.article-content, .widget`

class="heading-3 ace-line old-record-id-RnuMfyhFkdNJq5c73Zdccs8InPf"

选项
说明
启用预加载
页面加载时提前获取字体文件
启用缓存
缓存生成的CSS，减少数据库查询
字体显示策略
swap/block/fallback/optional
后备字体
字体加载失败时的备选字体

class="heading-2 ace-line old-record-id-UQLJfjDeLdfl9Bc1eI9cJOZWnef"

值
效果
适用场景
`swap`
先显示后备字体，加载后切换
推荐，平衡体验和性能
`block`
短暂隐藏文字直到字体加载
标题、重要文字
`fallback`
使用后备字体，字体加载后缓存
次要内容
`optional`
浏览器决定是否使用
网络不佳时

class="heading-2 ace-line old-record-id-M3XkfuyTfd8ONeccqOscxxSrnAf"

class="heading-3 ace-line old-record-id-M0ggfy6TWdKd4Ac6J4hcZj3nnch"

字体名称
特点
下载地址
思源黑体
Adobe开源，7种字重
[Google Fonts](https://fonts.google.com/specimen/Noto+Sans+SC) （注：该网页解析失败，无法正常访问）
思源宋体
中文衬线体首选
[Adobe Source Han Serif](https://github.com/adobe-fonts/source-han-serif) （注：可正常访问，提供字体源码及多种格式下载）
阿里巴巴普惠体
阿里巴巴开源
[阿里巴巴普惠体](https://AlibabaPuHuiTi.com) （注：该网页解析失败，无法正常访问）
站酷高端黑
站酷网出品
[站酷字体](https://www.zcool.com.cn/) （注：网页可访问，但未找到直接的字体下载入口，需在站内进一步查找）
OPPO Sans
OPPO开源
[OPPO字体](https://www.coloros.com/) （注：网页可访问，主要展示ColorOS系统功能，未找到字体下载相关内容）
HarmonyOS Sans
华为开源
[HarmonyOS字体](https://developer.huawei.com/) （注：网页可访问，主要为华为开发者相关内容，未找到字体下载相关内容）

class="heading-3 ace-line old-record-id-OARufE2szdsCqWc29tlcehUfnZc"

  • jsDelivr: `https://cdn.jsdelivr.net/npm/` （注：该网页解析失败，无法正常访问）
  • BootCDN: `https://cdn.bootcdn.net/ajax/libs/` （注：该网页解析失败，无法正常访问）
  • UNPKG: `https://unpkg.com/` （注：可正常访问，支持加载npm上的所有文件，含字体文件，提供详细使用方法）
  • 字节跳动: 思源黑体CDN （注：未提供具体URL，无法验证访问状态）

class="heading-2 ace-line old-record-id-Y8JffmFZVdNCa5caLywc6lTance"

class="heading-3 ace-line old-record-id-LO9cfoqZ0dDUe7cFxojcNu6Mnwg"

  1. 检查浏览器开发者工具（F12）→ Network → 是否有字体文件请求
  2. 检查是否有404错误（文件路径错误）
  3. 检查CORS跨域问题（字体文件需要允许跨域）
  4. 尝试清除浏览器缓存
  5. 访问设置页面点击”清除缓存”

class="heading-3 ace-line old-record-id-XzyWfE8PydJVoXc74incwduGn5f"

在字体文件服务器的配置文件添加：
代码
代码
# Apache (.htaccess) <IfModule mod_headers.c> <FilesMatch “\.(woff2|woff|ttf|otf)$”> Header set Access-Control-Allow-Origin “*” </FilesMatch> </IfModule>
代码
代码
代码
代码
# Nginx location ~* \.(woff2|woff|ttf|otf)$ { add_header Access-Control-Allow-Origin *; }
代码
代码

class="heading-3 ace-line old-record-id-Kc8WfCE9ydXus6c0hggcWsganHB"

  1. 自建CDN: 上传到七牛云、阿里云OSS等
  2. 公共CDN: 使用上面的推荐CDN
  3. 本地上传: 上传到 `wp-content/uploads/zib-custom-font-fonts/`

class="heading-3 ace-line old-record-id-C2TmfmJS1dDSCfcdSPlcenlKned"

建议：
  • 使用 woff2 格式（压缩率最高）
  • 使用子集化工具只包含需要的字符
  • 启用预加载 + swap 策略

class="heading-3 ace-line old-record-id-IkvwfjanUdjlcycOUWYcsXEOnYd"

访问设置页面时添加 `&debug` 参数：
代码
代码
/wp-admin/options-general.php?page=zib-custom-font&debug
代码
代码

class="heading-2 ace-line old-record-id-L4Z1fMNoqdpEoHcHesec5yeWnhb"

class="heading-3 ace-line old-record-id-XoTffnpAjdhXfbcAFw1cEcCHnKh"

  • ✨ 新增字体变体支持（常规/粗体/斜体/粗斜体）
  • ⚡ 性能优化：字体预加载功能
  • 🚀 新增CSS缓存机制
  • 🎨 全新美化的管理界面
  • 🔍 新增字体验证功能
  • 📊 新增文件大小检测
  • 📚 新增常用字体推荐
  • 🧹 优化代码结构

class="heading-3 ace-line old-record-id-BoITfw9WsdHoWXc3ScwcstcynbL"

修复已知问题

class="heading-3 ace-line old-record-id-FyI7fZMFLdkjP5cBzOJcch0EnZf"

初始版本发布

class="heading-2 ace-line old-record-id-Bg2xf4aGWdPvkjc4JQ2czRrNnR7"

代码
代码
zib-custom-font/ ├── zib-custom-font.php # 主插件文件 ├── admin-style.css # 管理界面样式 ├── admin-script.js # 管理界面脚本 └── README.md # 说明文档
代码
代码

class="heading-2 ace-line old-record-id-ZD1yfM1B3dKY1CcdGQBcrvxtndb"

  • 作者：小武
  • 网站：https://1z345.cn （注：可正常访问，为小武站，包含插件相关分享内容）
  • 反馈：如有bug或建议，请留言反馈

class="heading-2 ace-line old-record-id-LnnqfWnumd2ChBcYiqlc8IYInjd"

GPL2

相关阅读推荐

© 版权声明
本网站部分文件及内容来自互联网，版权归原作者所有。转载需授权，侵权必究。部分内容受《网络出版服务管理规定》保护，未经许可禁止商业使用。
THE END
知识分享
# 子比主题# WordPress 插件# 自定义字体# 字体优化
喜欢就支持一下吧
点赞5236支持作者 分享