koobai
利用 unicode-range 属性, 提高自定义字体加载速度

每天折腾一点,新鲜满足感就增强点。为了各个终端显示效果能保持一致性及自己的审美爱好,网站自定义了三种字体:标题(得意黑)、正文(鸿蒙)、代码(JetBrainsMono)。效果很满意,但带来的问题就是加载速度怎么保证,特别是中文字体。虽然使用.woff2 格式可以一定程度的降低容量,但动不动就 1M 以上的大小,对加载速度还是有一定的影响,包括 CDN 的流量损耗。

想到的方法是引用大厂的 CDN,既能白嫖保证加载速度又觉得说大厂一般对字体有优化,经过一番 Google,解决了正文(鸿蒙)字体问题。但标题、代码区域的字体,国内还没找到适合白嫖的既有速度又稳定 CDN。

正苦恼之际,发现 Google 或者国内大厂字体引用方式:CSS 中都有一个 unicode-range 属性。于是,搜索一番,名称叫字符集,通俗点就是把一个字体拆分成 N 个包,显示的字体刚好在其中一个包,浏览器就只加载这一个包,而不用加载整个字体,这就能大大提高加载速度及节省 CDN 流量了。

使用方法:先搞清楚,基本中文的引用:字符集都包含哪些区间(包)。可参考: 中文汉字和常见英文数字等的 unicode 编码范围,得到 Unicode 编码范围值之后,在对应字体 CSS 引用:

@font-face {
  unicode-range: U+4E00-9FA5,U+0025-00F0;
/* 格式为U+编码范围,多个范围以","分开 */
}

搞定,这下就可以愉快的随意引用自定义字体了。当然使用场景很多样,详细说明、使用、CDN 引用,参考:
CSS unicode-range 特定字符使用 font-face 自定义字体
引入商用黑体字体系列整理及 CSS 字体引入

题外:

  1. 推荐下 Obsidian,知识管理笔记类软件。之前写日志要在几个不同的文本软件中切换,要么界面感觉不适合码字,适合码字了但插入一些东西总是出现各种问题。Obsidian,插件丰富,配合 WebDav 各端同步。自己就当日常记录、写博客日志使用。动手能力强的话可以直接在里面 “写–上传–提交” 一条龙博客发布流程。
  2. 最近不知道怎么回事,娃发烧生病好了之后复发,现在还有点咳,Eileen 也是反反复复,只能躺床上休息。自己这两天也开始咳嗽,喉咙不舒服,今天腿发酸~~。希望一家人的身体尽快健康好起来,活蹦乱跳的~~
更新于
评论一下 ...
回到顶部