已经确定,后续博客以中文为语言.但是因为我的电脑上现在安装了日文汉字字体,导致我看到的自己博客,展示效果非常随机.不同的浏览器上,看到的样式也有较大差异.

不同设备上, 中文汉字展示效果不固定的原因?

  • minima 默认字体配置如下. 它没有针对汉字进行优化.各种fallback字体都没有直接包含汉字的字体.
$base-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;

  • 不包含汉字的字体, 如果遇到了汉字, 后续会如何展示, 有相当大的不确定性. 极端情况下,可能会展示为乱码.

  • 不同的字体, 支持的语言,是不一样的. 我以前没有专门研究过, 一直有个误区.认为任何一种字体,默认都支持中文汉字. 今天才明白, 其实是系统自动 fallback 到了已经安装的某一个支持汉字的字体上.

  • 浏览器fallback字体的默认行为也有差异. 具体没有深入研究. 不过我注意到同一篇文章, Chrome 和 Firefox 浏览器上,显示效果确实不一样. 我暂时用 Chrome 较多, 所以着重参考 Chrome 上的效果.

可能的中文字体解决方案与可行性讨论.

  • 使用 VSCode 的字体方案.不同平台,给与不同的默认字体.(不可行)
    • 如果是英文博客, VSCode 的字体默认设置, 是可以的. 
      const DEFAULT_WINDOWS_FONT_FAMILY = 'Consolas, \'Courier New\', monospace';
const DEFAULT_MAC_FONT_FAMILY = 'Menlo, Monaco, \'Courier New\', monospace';
const DEFAULT_LINUX_FONT_FAMILY = '\'Droid Sans Mono\', \'monospace\', monospace';
    • 中文, 不可行. VSCode 用的字体,依然是不包含中文的.我最近写博客较多,才注意到,VSCode里的中文,其实也都显示得有点奇怪.仿佛会自动随机加粗.(当然, 估计还是我安装了日文字体的原因)
  • 使用网络字体, 动态下载.如 Google 的 Noto Sans Simplified Chinese.(不可行)
    • 如果是中文字体, 下载体积都很大. 很影响阅读体验. 以 Google 的Noto Sans Simplified Chinese为例, 它大约有 90M. noto_sans_sc
  • 在自己常用设备上, 选一款符合自己审美的中文字体, 然后fallback系统默认字体.(可行)

具体要怎么做?

  • 首先, 需要搞清楚怎么自定义minima主题.注意下自己用的主题版本,然后找对应版本的文档看.

  • 在自己常用平台, 选一个合适的中文字体.我近期 Windows 平台用的较多, 目前选中的是 新宋体,英文名称是 NSimSun.

  • 修改对应配置. 此处需要修改的是自定义的 assets/main.scss 文件.

    • 注意开头的 两行”—” 必须保留.否则这个文件,不会被 scss 预处理.如果你发现自己的配置不生效, 可以去 _site/assets 路径下,看下实际生成的东西.

    • 我顺便配置了下字号. 我有个 4K 显示器. 默认的 16 px, 在大显示器上, 看着太费劲.而且我注意到有些博客平台, 确实是把正文加到 20px 的.本来想只加到 18px的, 但是加到 20px后, 发现看着是真的舒服, 仿佛文字阅读速度都变快了呢!

    • 我目前的完整配置如下, 供参考. 其中 “system-ui” 的使用, 其实是有争议的. 正式项目中,请慎重使用 “system-ui”.

    ---
---
/* Override theme defaults */
$base-font-family: "NSimSun", system-ui !default;
$base-font-size:   20px !default;

/* load _sass/minima.scss */
@import "minima";

/* Put any custom CSS here */

效果展示.

因为后续我会继续改造主题.所以此处贴上改造前后的截图, 供参考下.

  • 修改前:

    font_before

  • 修改后:

    font_after

或许也会有人更喜欢修改前的风格.没的所谓的.我的博客, 审美风格,肯定优先向我看齐.

小感: 成功的方案,三言两语; 失败的理由, 三天三夜

在解决这个问题的过程中, 涉及到了很多我不熟悉的主题. 我这次也确实积累的很多的奇奇怪怪新的知识点.但是, 如果只是面向这个问题的解决的话, 我大约也就只能把 10% 不到的经验,回程一篇解决方案.

想要把事情做成, 是不容易的.会遇到各种奇奇怪怪的问题.限于自己过往的判断, 也会做出一些错误的调研方向的判断.

因为我做到了, 我现在可以直接谈如何做; 如果我没有做到, 其实有更多的素材, 来告诉你这件事, 为什么不可行.

这里其实涉及到了另一个特殊的话题: 在团队协作中, 通常结果看上去更重要, 因为彼此有依赖, 做不到的话, 会影响后续的规划; 但是从个人成长的角度, 过程可能更重要一点, 因为经验的积累速度,往往决定自己的成长速度. — 又是挺无聊的碎碎念. 以后遇到具体的相关问题再谈吧.

参考: