利用 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 也是反反复复,只能躺床上休息。自己这两天也开始咳嗽,喉咙不舒服,今天腿发酸~~。希望一家人的身体尽快健康好起来,活蹦乱跳的~~
2023-03-01
上一篇:智能家居使用主观感受
2018 年装修房子选灯具的时候,了解到智能家居。想着要不尝试看看,经过性价比、产品丰富度、入门简易度几个维度筛选下来,小米生态链的品牌最适合。到现在差不多四年多时间,米家里显示的设备88个,基本覆盖了日常使用设备,如:门锁、灯具、猫眼、摄像机、窗帘、扫地机、净水器、各类传感器等。
下一篇:工作台之桌面搭配
2020 疫情开始从公司辞职后,一部分时间变成了在家做些项目。一开始在餐桌上对付下,时间久了,腰不行,之后就在休闲区给自己整了个工作台。到现在也 3 年时间了,感觉已形成自己一个空间,非常满意,中间还把桌子换成了升降桌,桌面整体保持着简洁干净,只是适当加点小装饰~
已经看到这里了,不留下点什么?