中文字体分片_

@时雨#前端2023/10/112 分钟

之前看到 @林木木 的这篇文章时,觉得霞鹜文楷这个字体很好看,于是在本站也启用了,这个字体和我平常见到的网页的字体很不一样,就是感觉加载速度特别快。它不像其他网页一次性加载整个字体,而是分批加载,就像慢慢展开的画面一样。这让我很好奇,于是查了一下,原来是因为一种特殊的CSS属性叫做"unicode-range"。

这个属性的作用是设置要由所定义的字体中使用的字符的特定范围,这样就可以把整个字体文件切成很多小块,一个很大的字体文件在打开网页时可能只需要加载一小部分文件分块,足够显示页面上的文字。这样极大的加快了字体文件的加载速度。

后面又发现了一个中文字体分包的项目:✨中文网字计划

在这里提供了大量已经进行分片的字体的cdn,可以很方便的直接引用,也提供了在线分片工具,可以一键上传分片然后下载下来使用~

现在本站使用的字体也是在这个项目上进行分包的,加载速度快得很!

$ls -lt ./articles
├─
[prev]上一篇落叶惊秋@2023/10/1
└─
[next]下一篇十一月十七@2023/11/17
────────────────────────
$cat ./comments

评论 (18)

匿名
匿名2023/11/10 00:57:32

可以,可以。

obaby
obaby2023/11/8 19:09:46

咦,换主题了?

时雨
时雨2023/11/8 19:10:40

@obaby wordpress更新了,就换上了最新的二零二四,哈哈哈哈哈每次官方发布新主题我都会换上~

pellucid
pellucid2023/11/9 10:51:00

@时雨 哈哈字体也换回来了,二零二四像是二零一六的兄弟,长得可像

obaby
obaby2023/11/9 13:28:23

@时雨 这,哈哈哈哈。从来没用过wp的自带主题。

阿杰 Jack
阿杰 Jack2023/11/3 01:44:47

感觉很不错,回头空了研究研究字体,我博客字体是怎么改的都还是一头雾水😂

时雨
时雨2023/11/3 10:19:17

@阿杰 Jack Wp默认主题可以改json文件修改字体,其他主题不清楚可能有配置项或者实在不行就在头部加css,😁

obaby
obaby2023/10/13 18:25:53

这个字体感觉有点重~~

时雨
时雨2023/10/13 18:36:00

@obaby 对这个字体本身也有些粗,比较适合标题,正文看起来就有点密集和重

萧俊介
萧俊介2023/10/13 10:25:42

我就比较糙了,直接「"PingFang SC", "Microsoft YaHei"」,哈哈~

时雨
时雨2023/10/13 10:34:30

@萧俊介 你的字体阅读起来更会轻松一些😝

网友小宋
网友小宋2023/10/12 11:29:14

之前想换这个,但是一直没有合适的。

时雨
时雨2023/10/12 11:59:31

@网友小宋 可以多试试看看上线哪个效果好一些~

路人甲
路人甲2023/10/12 10:21:14

太棒了,这个网字计划真是相见恨晚!

时雨
时雨2023/10/12 10:43:58

@路人甲 对!之前一直饱受字体文件过大网页加载慢的折磨

Gmc
Gmc2023/10/12 09:34:17

加载确实很快啊!字体也很特别,阅读观感也不错。

时雨
时雨2023/10/12 09:43:58

@Gmc 哈哈哈哈哈我也好喜欢这个字体,不知道是不是因为新鲜感

爱旅游
爱旅游2023/10/11 20:53:50

好特别的字体

EOF_