重新定義你的 WordPress 中英文字型,讀者閱覽部落格不再心累

「天下武功,無堅不摧,唯快不破。」

在架設部落格的時候雖然要注重做事效率,但卻不能因為快速而遺漏了細節。
我這個人在為網站套用佈景主題之後習慣再利用 Jetpack 外掛的「編輯 CSS」功能進行網站外觀的調整,就算跟別的網站佈景主題撞衫了,卻也能輕易地分別出之間風格的不同。

在這篇文章中要來重新為我們網站的字型做個調整,讓讀者在閱讀文章時眼睛不會過於疲累,造成跳出率增加 (´ཀ`」 ∠)

網站使用的字型來源大致上可以分為兩種:

  • 客戶端作業系統的內建字型:你電腦的作業系統中已經擁有的字型,可直接取用且不須下載。
  • 伺服器端提供的非內建字型:必須從伺服器端下載欲使用的字型,會消耗載入的流量與時間。

兩者之間各有優缺點,如使用內建字型網站載入速度會比較快,但是在某些情況下多樣性可能會不太足夠 (比如說 Font Awesome);用外部字型雖然需要更多的載入時間與頻寬,但卻可以使用到更多樣化的服務。

如果已經是非常壯大的商業型網站或藝術型態的網站,通常是二話不說選擇非內建字型來美化外觀。但是像我這種老百姓經營的部落格對於字型的需求就沒那麼多,內建字型已經非常夠用,大不了再多使用輕便的額外功能 (又是
Font Awesome),這樣對主機負擔較小、速度又快。


下圖是我的「偵錯桐人」網站字型調整前後的對比圖,可以發現調整前 (左) 的文字有明顯的偏移與大小不一的狀況,那是因為之前為了方便而直接讓全部文字套用微軟正黑體的結果;而調整後 (右) 的字型明顯變整齊且閱讀較為舒適。

我個人目前愛用的內建英文字型是 Verdana,除了這是無襯線字體,他在文章中無論是大小文字中都有不錯的表現;而中文的話一樣延續使用微軟正黑體 (Microsoft JhengHei)。

當決定好要使用的字型後就要來實際套用到網站中來測試,一般來說對於不是自己設計的佈景主題,我都會利用 Chrome 瀏覽器的開發人員工具來把需要套用到字型的元素一個一個抓出來來修改,只不過因為目前我的網站可以全部文字都使用同一個設定,所以可以直接用簡單點的方法來修改 CSS。

個人是使用 WordPress 的 Jetpack 外掛來修改佈景主題的 CSS,所以是從控制台左側的外觀下的「編輯 CSS」進入修改流程。

在 CSS 的程式碼這裡有個技巧能同時優化整個網站的中英文字型:在 Font-Family 內容中的先後順序可以讓不同的字型有不同的優先度,如果第一個字型中沒有特定字元,則會往下一個字型進行套用。

以此類推,以下的程式碼是 Verdana 在前、微軟正黑體在後,則會使網站中的英文字型使用 Verdana,中文字型使用微軟正黑,直觀的說法就是用 Verdana 的字型覆蓋了微軟正黑體英文部分的設定。

在「附加的 CSS」內容中輸入以下程式碼並儲存即設定完成。

* {
	font-family: verdana, Microsoft JhengHei;
}