这段 CSS 可以让浏览器里的粗体更平滑原理不重要，只要平滑了就妥。 CustomFont 是一个自定义中文字体，它的前

代码

@font-face {
  font-family: CustomFont;
  unicode-range: U+4E00-9FFF;
  src: local('Sarasa Gothic SC'), local('Noto Sans'), local('Microsoft YaHei UI');
}
@font-face {
  font-family: CustomFont;
  unicode-range: U+0020-007E;
  src: local(Roboto), local('Segoe UI'), local(Arial);
}
body * {
  font-family: Roboto, 'Segoe UI', Arial, CustomFont, sans-serif, 'Apple Color Emoji', 'Noto Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
}
code,ins,kbd,pre,pre *,var,.highlight,.highlight * {
  font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;
}

效果

使用前：

使用后：

原理

原理不重要，只要平滑了就妥。

这里运用了 unicode-range，可以看看张鑫旭大佬的文章：CSS unicode-range特定字符使用font-face自定义字体

CustomFont 是一个自定义中文字体，它的前面是英文字体，font-family 会按照定义的字体顺序查找使用，谁在前面就用谁。

Sarasa Gothic SC 是 更纱黑体，在这里下载：github.com/be5invis/Sa…

Noto Sans 是 思源黑体，在这里下载：www.google.com/get/noto/

这段代码放在 Chrome 插件 Stylish 里使用最香了。

细心的伙计

细心的伙计会发现上面代码里没有 Mac 的中文字体，那么可以改成这样：

body * {
  font-family: -apple-system, BlinkMacSystemFont, Roboto, 'Segoe UI', Arial, CustomFont, "PingFang SC", "Hiragino Sans GB", "Source Han Sans SC", sans-serif, 'Apple Color Emoji', 'Noto Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
}

这不是作者懒， Mac 用默认的就行，本身 Mac 就会平滑处理，不然为什么大家推荐开发使用 Mac 呢。。。

我不信你会在 Mac 里装个 Microsoft YaHei 并设为默认字体吧？