Saber 酱的抱枕

Fly me to the moon

07/29
2025
其他

博客的头像添加了 RGB 效果,字体也改成 Noto 了

RGB Logo no_lazy

头像加了 RBG,性能(消耗)提升 100%!哈哈~ 另外博客的字体也进行了一些调整,大部分地方都改成了 Noto 字体。

前后对比

以前和现在的首页对比:

微软雅黑

之前的字体大部分地方都是微软雅黑,有些地方让我不爽。

第一个问题是网站标题的字体和正文一样,非常无趣。

第二个问题是微软雅黑的字形不是很好看。我觉得它的优点是在低 PPI 的屏幕上能把字显示的清晰锐利,但是这也带来了一些问题。在通常字号下,我发现文字的笔画粗细不一致,有些笔画非常细,这应该是为了显示清晰而做出的妥协。而且不管字体大小,它都会把文字的显示空间占得比较满,显得文字很“胖”,很拥挤,这也应该是为了能让人看的更清楚。这些问题导致微软雅黑的字体缺少美感。

Noto 字体

现在我把网站标题改成了 Noto 的衬线字体,能够和正文做出区分,而且多了一些设计感。

正文的字体改成了 Noto 的无衬线字体,文字看起来更自然,更有美感。

不过 Noto 字体也不是完美的。第一个问题是在 PPI 不够高的屏幕上看起来有点虚,文字边缘没有微软雅黑那么清晰。在视觉上让我感觉文字和背景颜色之间的对比度下降了,而且阅读大段文字时很容易觉得累眼、眼花。所以我把文字的颜色加深了(从 #444 变成 #222),以弥补这个问题。

第二个问题是兼容性问题,以前 Windows 10 和 11 是没有内置 Noto 字体的,在今年(2025 年)的 3 月底才通过 Windows update 推送了 Noto 字体。所以那段时间很多人发现许多网站的字体都变了,其实就是浏览器的默认字体在那个时候变成了 Noto。如果用户的系统里没有 Noto 字体,本站的字体会回退到微软雅黑,或者系统默认的字体家族。

博客的头像添加了 RGB 效果,字体也改成 Noto 了

    1. saber 文章作者
      Google Chrome 138Google Chrome 138Windows 10/11Windows 10/11

      我觉得配合打开背景图片更和谐~不过我怀疑只有我一个人打开了背景图片😂

      回复
        1. saber 文章作者
          Google Chrome 138Google Chrome 138Windows 10/11Windows 10/11

          我刚才改成默认显示背景图片了😋我作为站长的权力是无限的!😎

          回复
  1. Google Chrome 138Google Chrome 138Windows 10/11Windows 10/11

    正文字体好看了很多,但就是感觉侧边栏的宋体字重太细了,接近正文的字体是不是要好一些😮

    回复
      1. saber 文章作者
        Google Chrome 138Google Chrome 138Windows 10/11Windows 10/11

        有可能,你可以右键侧边栏的文字,选择“检查”,在“计算样式”里看看“渲染的字体”是不是 Noto
        /f/20250801_143124.png

        回复
  2. saber 文章作者
    Google Chrome 138Google Chrome 138Windows 10/11Windows 10/11

    我还改了下行高,之前我就经常觉得同一段文字之间的行间距太大了。
    正文的字体是 16px,我把行高从之前的 32px 改成了 1.8(相当于 29px)。

    回复