是近段时间对博客更改的一个记录，主要集中在UX，易读性，nojs兼容以及排版上。现在有js的体验还是会显著优于没js。
柯老师的铁宋发布了。我也是第一时间把标题的字体切换成铁宋。总体来说这是我目前看过的能用的最适合当作标题字体的字体了，可以前往TheType支持。
就像我在字体焕新中提到的，目前没有一个良好的、适合网页的中文宋体正文字体。MiSans目前来说还不错。我最近随机到了一些大量使用宋体（中易宋体）以及思源宋的Blog，看的我眼睛痛啊。甚至没有设置粗一点的字重，在深色模式下的渲染是非常灾难的。
我的正文字体字重也不是标准的字重。是Regular（400）加粗到460。得益于可变字体的普及，我选择了一个不会太粗也不会太细，适合所有屏幕阅读的字重。这个更改有点久远不过我从来没写过。
虽然说我的Blog一直不太环保，因为各种体感优化（预加载什么的）性能评分一直在80分上下。不过为了好看这一切都是值得的。但是始终有一个困扰我的问题，就是在缩放的时候好卡啊，隔壁群友的Blog过不过断点缩放都不怎么卡，但是我的会卡飞。通过perf也看不出什么，只能看出排版占了非常大的一块时间，没有更细分的了。
直到昨天，群友在群里讲自己的电子垃圾里面塞了300个woff，我一下子就攀比起来了，说我Blog有1200个woff2，轻松秒杀。于是突然灵光一现是不是这个问题导致很卡。正好遇上OpenAI大善人推GPT 5.6 Sol，我就直接发工作给了Codex，并且确定了这个问题。将全文字体改为Arial等等字体排版需要2.8ms，但是使用当时的自定义字体排版需要280.2ms。这谁又能想到呢？
我也没有在互联网上找到过font-face以及切片过多导致排版性能问题的文章。想来也合理，因为西语字体一共也就几百KB，根本用不上分片，直接引入就行了，遇不上这个问题。我的字体是用cn-font-split切分的，这东西宣传的确实很好啊，划时代最好用。但是就是它！导致了1200个分片，引入了这个难以被发现的性能问题。
最后我精甚细腻的手搓了一份切分码点表，将全站自定义字体切片数量控制到了200个左右。经过性能测试，渲染时间优化到了原始时间的5%，哇，白嫖性能。所以，所有用到了中文字体网计划，或者对应工具默认切分的网站都会存在这个问题。所以很多独立博客都中招了。我之前点了几个群友的Blog都发现很卡，甚至以为是Astro的锅了。
这个完全是我的。Astro v6添加了Built-in Font API，那我高低得尝尝咸淡，所以我直接接入了。昨天修这个问题的时候顺便检查了一下CSS，结果很Amazing啊，这个叼毛API会把对应的CSS复制到所有网页中，这导致输出Html体积从110KB暴涨到了330KB。所以又是一个可以白嫖性能的点，我以及扬了这个并切换回老的方案了。
这点真的有点恶心，因为我没有给html设置缓存，所有资源全部是设置缓存的。CSS体积暴涨导致了每次访问都要下载200KB的CSS，导致了加载缓慢。所以啊，慎用最新最热，这些大概率都不是面向CJK用户的。
但是不知道为什么pagespeed从80分掉到了72分，好讨厌。
之前上了自定义滚动条，具体流程看一根上流滚动条的诞生。现在在滚动条上会有一些点，点击即可直接滚动到对应位置。这些点有些是标题，有些是精选片段，总之是比较重要的。这个解决了tonsky页面滚动条不明显的问题，同时在有侧边目录的时候能不喧宾夺主。
引入了巨苣群友的排版库，解决了排版过于丑陋的问题。
现在没有任何一个浏览器实际上实现了clreq虽然是W3C自己发的，所以中文排版一直都挺烂的。之前好不容易拉了个autospace出来不过目前都还没有自动启用。text-warp: pretty; 更是又慢又垃圾，实际上不能解决任何问题，只会更慢。但是我们的巨苣群友太雎了，还是搓了出来，并且性能影响不大。
Waiting for api.github.com...
此图片组需要启用 JavaScript 才能使用轮播；下面按普通图片显示。
效果非常喜人，不再有弱智浏览器的坑坑洼洼了。
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。