Zibll子比主题自定义字体教程：网站字体修改与美化

本文介绍两种为子比主题网站自定义字体的方法：一是使用系统自带的通用字体，无需额外资源，简单快捷；二是上传自定义字体文件（如.woff2、.ttf），实现更丰富的个性化效果。所有修改均在主题后台的自定义CSS中完成，无需修改主题核心文件，升级主题时效果不会丢失。

适用人群：使用 Zibll 子比主题并希望优化网站字体视觉的 WordPress 站长

核心价值：通过CSS @font-face 规则或直接修改 font-family 属性，为网站全局或特定区域更换字体，提升阅读体验和品牌调性。

操作前准备

在开始配置之前，需要先确认以下几点：

无需修改主题文件：所有效果均通过后台自定义CSS实现，升级主题时效果不会丢失。
操作入口：WordPress后台 → 「Zibll子比主题」→「主题设置」→「全局&功能」→「自定义代码」→「自定义CSS样式」。
两种方式：
- 方式一（系统字体） ：直接使用 Windows/macOS 系统自带的字体（如宋体、楷体、微软雅黑等）。
- 方式二（自定义字体文件） ：上传字体文件到服务器，通过 @font-face 规则引入。
备份建议：在添加任何自定义代码前，建议先备份网站。

如果只是想将网站字体更换为系统自带的常用字体（如宋体、楷体、黑体、微软雅黑等），无需上传任何文件，直接通过CSS指定即可。

在 「自定义CSS样式」 中粘贴以下代码：

字体名称	`font-family` 写法	说明
宋体	`宋体, SimSun, serif`	经典衬线字体
黑体	`黑体, SimHei, sans-serif`	粗体无衬线字体
楷体	`楷体, KaiTi, serif`	手写风格衬线字体
微软雅黑	`微软雅黑, "Microsoft YaHei", sans-serif`	Windows 现代字体
苹方（Mac）	`苹方, "PingFang SC", sans-serif`	macOS 现代字体

说明：在 font-family 中指定多个字体名称时，浏览器会按顺序依次尝试，直到找到系统已安装的字体为止。

如果需要使用系统不自带的特殊字体（如艺术字体、手写体等），需要先将字体文件上传到服务器，然后通过 @font-face 规则引入。

下载字体：从字体网站下载喜欢的字体文件（通常为 .ttf 格式）。
格式转换（推荐） ：.ttf 格式在部分浏览器（如 Safari）中可能无法生效，建议转换为 .woff 或 .woff2 格式。
- 推荐使用在线转换工具：Font Squirrel、Transfonter 等。

将字体文件上传到网站可访问的目录（如网站根目录下的 /fonts/ 文件夹），并记录文件 URL。

例如：https://你的域名/fonts/myfont.woff2

在 「自定义CSS样式」 中粘贴以下代码，并根据实际情况修改：

参数	说明	可调整值
`font-family: 'MyCustomFont'`	自定义字体名称	可改为任意名称，需与下方 `body` 中的名称一致
`src: url('...')`	字体文件路径	替换为实际上传的字体文件URL
`format('woff2')`	字体格式声明	根据实际文件格式填写（woff2/woff/ttf/eot/svg）
`font-display: swap`	加载策略	`swap`（先显示后备字体）、`optional`（可选）等

如果希望网站不同区域（如标题、正文、侧边栏）使用不同的字体，可以对特定元素单独设置。

优化项	说明
使用 `font-display: swap`	避免字体加载期间文字不可见（FOIT），提升用户体验
使用 `.woff2` 格式	相比 `.ttf`，`.woff2` 压缩率更高，加载更快
控制字体文件大小	过大的字体文件会拖慢页面加载速度，建议控制在 500KB 以内
利用浏览器缓存	字体文件通常会被浏览器缓存，二次访问时无需重新下载

配置完成后，建议进行以下验证：

如效果未生效，请依次检查：

问题	解决方法
字体未生效	检查 `@font-face` 中的 `font-family` 名称是否与引用处一致；清除浏览器缓存后刷新
自定义字体不显示	检查字体文件URL是否正确；确认字体格式在目标浏览器中受支持
部分区域字体未变化	某些元素可能被更具体的选择器覆盖，需对特定元素单独设置 `font-family`
字体加载时闪烁	添加 `font-display: swap` 属性优化加载体验
升级主题后效果丢失	代码保存在主题设置的自定义代码中，升级主题不会丢失
中文字体文件过大	中文字体通常较大，建议使用只包含常用字体的子集版本，或使用系统字体替代