环境:win11;halo pro2.14.0;主题:pix
IDE:PyCharm;python3.11.7;FontCreator
示例字体:苹方黑体-中
前提准备
写在前面:
1)一般来说字体太大需要先抽出常用的3500字符或者7000字符的子集,本文不赘述,具体实现请查阅:fontTool制作网站字体
2)首先我们看下主题提供的默认的style.css
支持哪些字体,例如pix
主题支持下面这些字体
那么想要全局替换我们的字体有以下两种方法:
1. 自定义字体名称修改为主题支持的字体(较为麻烦,但不需要改主题配置)
2. 将我们的字体添加进style.css
文件中让主题支持自定义字体(不麻烦,但是需要改主题配置)
下文全部是对第 1 种方式的实现
其中第2种方法本质就是1,即让主题支持我们字体,但第2种会受到缓存等影响,具体解决方法见下文
第 2 种方式的实现第三点开始阅读
修改字体
使用FontCreator工具下载,并将自己的.ttf格式的字体导入进去,具体需要操作两个地方
1.字体-属性-字体
这里我是将.PingFang SC
修改为主题支持的 PingFang SC
- 2:字体系属性去掉.
- 3:把.全部去掉保存
- 4:不勾选推荐
2.字体-属性-实例(重要)
这里记住全部替换成PingFang SC即可
- 2:不勾选
- 3:不勾选
- 4:不勾选
- 5:去掉.
和Medium
- 6:去掉.
和Medium
- 7:去掉.
和Medium
- 8:去掉.
和Medium
导出字体
这里需要根据情况选择三次元曲线还是二次元曲线,最终目的是得到一份`.tff`的字体文件
字体切片
接下来需要对字体进行切片,也叫分包,推荐使用在线字体分包网站在线字体分包器,本地分包需要一些额外的环境,操作较为复杂,本文不给予演示
下载压缩包,解压并放入服务器里(也可以是存储桶)
访问result.css
font-family就是字体名称。可以访问(非防盗链状态)意味着你的字体可以被引用进站了!
引用字体
1. 在主题代码注入模块注入
2. 然后可以F12 network中css看字体是否引入成功
那么有人问,我的字体名称不在pix主题的默认字体里面,但是我已经抽取子集并且分包了现在怎么操作?
答:
1. 在theme.yaml修改版本:地址 halo/halo2/themes/theme-pix/theme.yaml
2. style.css中添加你的字体名称(字体名称看你切片的font-family)地址:halo/halo2/themes/theme-pix/templates/assets/css/style.css
3. 在halo后台重载主题配置即可
这样思路同样试用于其他站点,就是找到引入字体的css文件,添加自定义字体名称,强制刷新主题配置缓存
跨域处理
1. result.css放在存储桶里(腾讯云COS为例),需要在 安全管理-跨域访问CORS设置 自行配置
2. 放在服务器里面的话需要配置ngnix的配置,添加以下代码
location ~* \.(eot|otf|ttf|woff|woff2)$ {
add_header Access-Control-Allow-Origin *;
}
到这里就实现网站字体分包,局部使用字体可以自行修改result.css文件。申明:本文实例 halo pro2.14.0;主题:pix,同样适用其他建站方式。