今天突然逛到一个很好看的博客,看中了他的字体。

2023-06-26T11:18:30.png

看着很有韵味,于是我就想着我也倒腾下我博客的字体。

但是一看外部字体大都 几十M,放博客里不得逆天卡死。

于是便开始寻找解决之道,知道了,现在可以把字体切片,实现动态加载字体包。

这样就可以不用一上来就干 几十M 到浏览器里面。

一、使用到的开源库

https://github.com/voderl/font-slice

使用方式也很简单,看他 GitHub 的描述就能切好。

需要依赖 node 环境,其他不需要。

二、注意事项

1、最好被切的字体是 ttf 格式的,其他格式的可能会出现切出来后是乱码。

这个问题,我下午骚扰作者过。

2、调整服务器的请求次数限制

如果你服务器限制了一个IP的并发数量,那你最好思考下,这些字体切片数量会不会超过你的限制,我就在这上踩坑了(汗)。

三、点赞

有问题可以去GitHub上提,作者的回复速度也是很快的,基本几分钟就能收到答复,看看截图:
2023-06-26T11:25:49.png

四、外部字体的一些使用心得

一个字体库,往往会有多个粗细的字体像这样:

2023-06-26T11:56:11.png

我们该怎么去切片呢?

最简单的方法就是选中间的字号切一套就可以,反正 font-weight 也能起到一定的加粗效果。

但是更好的方式在 face 声明里面去指定对应粗细的用啥字体库。

@font-face {
  font-family: SourceHanSerifCN;
  font-weight: 100;
  ...
}

标签: 编程

本文著作权归作者享有,未经作者书面授权,禁止以任何目的、任何形式转载,本声明具有法律效力,作者保留法律范围内的一切权利。

添加新评论