惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

Y
Y Combinator Blog
B
Blog
S
SegmentFault 最新的问题
Vercel News
Vercel News
博客园 - 聂微东
宝玉的分享
宝玉的分享
C
Check Point Blog
有赞技术团队
有赞技术团队
IT之家
IT之家
V
V2EX
爱范儿
爱范儿
GbyAI
GbyAI
Cyber Security Advisories - MS-ISAC
Cyber Security Advisories - MS-ISAC
Microsoft Azure Blog
Microsoft Azure Blog
P
Proofpoint News Feed
博客园 - 司徒正美
博客园_首页
Last Week in AI
Last Week in AI
博客园 - 叶小钗
量子位
奇客Solidot–传递最新科技情报
奇客Solidot–传递最新科技情报
F
Fortinet All Blogs
腾讯CDC
J
Java Code Geeks

空白Koobai

唠叨 - 2026-05-10 10:45 唠叨 - 2026-05-08 23:34 唠叨 - 2026-05-08 15:55 唠叨 - 2026-05-07 14:38 唠叨 - 2026-05-06 11:47 唠叨 - 2026-04-30 14:40 唠叨 - 2026-04-30 12:51 唠叨 - 2026-04-22 12:46 唠叨 - 2026-04-18 09:35 唠叨 - 2026-04-16 12:24 唠叨 - 2026-04-12 10:47 唠叨 - 2026-04-06 12:25 唠叨 - 2026-04-03 19:57 唠叨 - 2026-04-02 22:38 唠叨 - 2026-04-01 23:23 唠叨 - 2026-03-31 14:08 唠叨 - 2026-03-28 16:43 唠叨 - 2026-03-28 09:39 唠叨 - 2026-03-27 11:10 唠叨 - 2026-03-25 11:48 唠叨 - 2026-03-24 13:12 唠叨 - 2026-03-21 16:55 唠叨 - 2026-03-20 11:48 罢免小区业委会之后续 反角度之博客用户体验不能做的 N 件事 唠叨 - 2026-03-16 13:10 唠叨 - 2026-03-13 12:46 唠叨 - 2026-03-11 19:25 唠叨 - 2026-03-07 20:21 唠叨 - 2026-03-04 13:45
利用 unicode-range 属性, 提高自定义字体加载速度
2023-03-01 · via 空白Koobai

每天折腾一点,新鲜满足感就增强点。为了各个终端显示效果能保持一致性及自己的审美爱好,网站自定义了三种字体:标题(得意黑)、正文(鸿蒙)、代码(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 也是反反复复,只能躺床上休息。自己这两天也开始咳嗽,喉咙不舒服,今天腿发酸~~。希望一家人的身体尽快健康好起来,活蹦乱跳的~~