子比自定义字体插件 (ZIB Custom Font)-小武站

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

特性

核心功能

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

性能优化

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

管理功能

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

安装

方法一：WordPress后台上传

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

方法二：FTP/SFTP上传

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

使用方法

1. 基本设置

进入 设置 → 自定义字体，配置以下内容：

设置项	说明
字体名称	用于CSS中的font-family，如”思源黑体”
主字体文件	常规字体的woff2/woff/ttf文件URL

2. 字体变体（可选）

如果您的字体包包含多个字重/字形文件，可以分别设置：

常规字体 – font-regular.woff2
粗体 – font-bold.woff2
斜体 – font-italic.woff2
粗体+斜体 – font-bold-italic.woff2

3. 应用场景

选择字体应用的范围：

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

4. 性能优化设置

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

font-display 取值说明

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

字体来源推荐

免费商用字体

字体名称	特点	下载地址
思源黑体	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/) （注：网页可访问，主要为华为开发者相关内容，未找到字体下载相关内容）

字体CDN推荐

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

常见问题

Q: 字体不生效怎么办？

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

Q: 如何解决跨域问题？

在字体文件服务器的配置文件添加：

# 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 *; }

Q: 如何获取字体文件URL？

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

Q: 字体文件太大影响加载？

建议：

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

Q: 如何调试？

访问设置页面时添加 `&debug` 参数：

/wp-admin/options-general.php?page=zib-custom-font&debug

更新日志

v2.0.0 (2026-05-18)

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

v1.0.4

修复已知问题

v1.0.0

初始版本发布

文件结构

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

技术支持

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

许可证

GPL2

本网站部分文件及内容来自互联网，版权归原作者所有。转载需授权，侵权必究。部分内容受《网络出版服务管理规定》保护，未经许可禁止商业使用。

THE END

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

特性