Vixual

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

本篇我会介绍 Firefox 浏览器的网页字型美化的方法。我们先来看一下网页在“微整形”前后的照片...

美化前:

美化后:

美化网页字型主要有两个步骤:

1. 启用浏览器的字型美化功能
2. 修改网页的默认字型

1. 启用浏览器的字型美化功能

我们会透过浏览器的字型渲染 (Rendering) 与反锯齿 (Anti-Aliasing) 功能来美化字型:

1. 安装 Firefox 的扩充套件 Anti-Aliasing Tuner，安装完需重新启动 Firefox。

2. 进入 Anti-Aliasing Tuner 的选项，将 Anti-aliasing Mode 设成“Default”，将 Rendering Mode 设成“Outline”，如下图:

设定完一定要按“Apply (A)”才会生效。

2. 修改网页的默认字型

1. 安装 Firefox 的扩充套件 Stylish，安装完需重新启动 Firefox。

2. 进到 Firefox 的“附加元件”->“使用者样式”->“编写新样式”，新样式的名称可以输入“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-Awesome、Octicons)，让一些有使用“图示字型”的网页变成乱码，故本教学不采用此设定。

线上测试

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

参考网页

1. 轻轻松松美化网页字型 - Chrome 篇
2. Google Noto Fonts
3. 如何帮 Google 浏览器换上全新中日韩文 Google 字体？ - 电脑玩物
4. 在 XWindow 安装及变更新字型
5. 将网页的字型换成“微软正黑体”
6. 本站推荐的 Firefox 扩充套件 (Addons)
7. 如何让不同版本的 Firefox 在电脑中并存，以及可以同时执行