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

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

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

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

1. 安装 Chrome 的扩充套件 Stylish

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 参数将网页字型的优先级设为:

  1. Arial - 英文字型
  2. KaiGen Gothic TW - 怀源黑体 (将 Adobe 和 Google 的“思源黑体”转换为 TrueType 格式的衍生字型)
  3. Noto Sans CJK TC - 思源黑体 (Adobe 和 Google 合作的开源字体)
  4. Microsoft YaHei - 微软雅黑
  5. 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-AwesomeOcticons),让一些有使用“图示字型”的网页变成乱码,故本教学不采用此设定。

线上测试

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

参考网页

  1. 轻轻松松美化网页字型 - Firefox 篇
  2. Google Noto Fonts
  3. 如何帮 Google 浏览器换上全新中日韩文 Google 字体? - 电脑玩物
  4. 在 XWindow 安装及变更新字型
  5. 将网页的字型换成“微软正黑体”
  6. 本站推荐的 Chrome 扩充套件 (Extensions)
  1. No comments yet.

  1. No trackbacks yet.

return top

%d 位部落客按了赞: