Yovvis`s Blog

Yovvis`s Blog

网站字体切片保姆式教程

197
2024-04-23
网站字体切片保姆式教程

环境:win11;halo pro2.14.0;主题:pix

IDE:PyCharm;python3.11.7;FontCreator

示例字体:苹方黑体-中

一、前提准备

写在前面:

1)一般来说字体太大需要先抽出常用的3500字符或者7000字符的子集,本文不赘述,具体实现请查阅:fontTool制作网站字体

2)首先我们看下主题提供的默认的style.css支持哪些字体,例入pix主题支持下面这些字体

p1

那么想要全局替换我们的字体有以下两种方法:

  1. 自定义字体名称修改为主题支持的字体(较为麻烦,但不需要改主题配置)
  2. 将我们的字体添加进style.css文件中让主题支持自定义字体(不麻烦,但是需要改主题配置)

下文全部是对第 1 种方式的实现

其中第2种方法本质就是1,即让主题支持我们字体,但第2种会受到缓存等影响,具体解决方法见下文

第 2 种方式的实现第三点开始阅读

二、修改字体

使用FontCreator工具下载,并将自己的.ttf格式的字体导入进去,具体需要操作两个地方

1.字体-属性-字体

p2

这里我是将.PingFang SC修改为主题支持的 PingFang SC

  • 2:字体系属性去掉.
  • 3:把.全部去掉保存
  • 4:不勾选推荐

2.字体-属性-实例(重要)

p3

这里记住全部替换成PingFang SC即可

  • 2:不勾选
  • 3:不勾选
  • 4:不勾选
  • 5:去掉.和Medium
  • 6:去掉.和Medium
  • 7:去掉.和Medium
  • 8:去掉.和Medium

导出字体

p4

这里需要根据情况选择三次元曲线还是二次元曲线,最终目的是得到一份.tff的字体文件

三、字体切片

接下来需要对字体进行切片,也叫分包,推荐使用在线字体分包网站在线字体分包器,本地分包需要一些额外的环境,操作较为复杂,本文不给予演示

p5

下载压缩包,解压并放入服务器里(也可以是存储桶)

p6

访问result.css

font-family就是字体名称。可以访问(非防盗链状态)意味着你的字体可以被引用进站了!

p7

四、引用字体

  1. 在主题代码注入模块注入

p8

  1. 然后可以F12 network中css看字体是否引入成功

p9

那么有人问,我的字体名称不在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,同样适用其他建站方式。