轻轻松松美化网页字型 - Chrome 篇

“字型”是网页中一个非常重要的元素，美的字型让你上天堂，丑的字型让你想打爆萤幕 (有那么严重吗)!!

继 Firefox 微整型之后，本篇继续介绍 Chrome 浏览器的网页字型美化的方法。

美化网页字型只需要两个步骤:

1. 安装 Chrome 的扩充套件 Stylish 或 Stylus。

2. 以鼠标右键点击 Stylish 图示 -> “选项”->“编写新样式”，新样式的名称可以输入“ALL”，新增样式段的内容如下:

*{
    font-family: Arial, "KaiGen Gothic TW", "Noto Sans CJK TC", "Microsoft YaHei", "Microsoft JhengHei";
    text-shadow: #666666 0.01em 0.01em 0.05em !important;
}

储存之后就大功告成了。

字型说明

在上面 Stylish 的样式中，我们透过 CSS 的 font-family 参数将网页字型的优先级设为:

Arial - 英文字型
KaiGen Gothic TW - 怀源黑体 (将 Adobe 和 Google 的“思源黑体”转换为 TrueType 格式的衍生字型)
Noto Sans CJK TC - 思源黑体 (Adobe 和 Google 合作的开源字体)
Microsoft YaHei - 微软雅黑
Microsoft JhengHei - 微软正黑体

前面用英文字型是为了避免网页的表单元件变形。

之后你可能会有个疑问...“微软雅黑体”不是简体中文的吗，为什么不是将“微软正黑体”摆在中文字型的第一位?

这是因为“微软雅黑体”不论繁体中文还是简体中文的字型都很好看，而“微软正黑体”的简体中文却很丑!!“思源黑体”是 Adobe 与 Google 合作的开源字型，我觉得也很好看。你也可以更换顺序或加入其它字型，但如果是电脑没有的字型你得自己去下载。

另外，某些教学会在 font-family 参数的最后加上 !important; 以覆写所有网页的字型设定，Ex:

*{ font-family: Arial, "KaiGen Gothic TW", "Noto Sans CJK TC", "Microsoft YaHei", "Microsoft JhengHei" !important; }

但这样做会造成“图示字型”失效 (Ex: Font-Awesome、Octicons)，让一些有使用“图示字型”的网页变成乱码，故本教学不采用此设定。

线上测试

最后附上多国语言及图示字型的线上测试，可以直接看到修改后的效果。

Vixual