輕輕鬆鬆美化網頁字型 - 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