7/04/2020

用System Font Stacks系統字型設定WordPress網站

本文介紹WordPress網站如何使用System Font Stacks系統字型進行設定,而不使用Google Fonts這類網路字型(web fonts)。

需求說明:

在我們製作WordPress網站時,一定會需要設定字型(fonts)。在一般情況下,我們選擇的佈景主題(theme)和網頁編輯器(editor或page builder),會預設某一種字型,而且通常會是Google Fonts。Google Fonts的字型檔案存放在Google的字型網站上,當訪客讀取我們的網頁時,瀏覽器才會去Google網站抓取該字型來使用,以正確顯示字型。可以想見,使用Google Fonts或多或少會延長網頁的讀取時間,而如果我們在製作網頁時缺乏良好規劃,比如同一網頁中設定了多種Google Fonts字型,就會導致網頁的讀取時間更長,而這往往是不必要的。

更進一步地說,如果你希望你的網站(無論內容是中文或外文)能讓中國境內的網友可以順利瀏覽,那麼,不使用Google Fonts可能就變成必要的設定。因為目前為止,從中國境內無法正常開啟與瀏覽Google相關的網站(包括Google搜尋引擎、YouTube、Blogger、Gmail等),WordPress網站若設定為必須到Google網站抓取字型,可能會導致中國網友發現網頁讀取緩慢甚至完全打不開。

其實,要解決以上問題,方法有好幾個。例如我們可以把要使用的Google Fonts檔案,存一份在網站主機中,這樣一來瀏覽器就不必去Google網站抓取,這個稱為self-hosted google fonts。同理,我們也可以選擇非來自Google的網路字型,或許就不會有被擋的問題。如果你是對字型比較講究,也就是要求網頁一定得用某個特定字型來顯示,那就只能朝這類解決方案去執行。

另一方面,如果網站設計者對字型的選擇沒有那麼講究(只希望基本簡潔美觀),也希望盡量避免抓取字型拖慢網頁讀取的速度,那麼不妨考慮用系統字型組合System Font Stacks)的設定。

什麼是System Font Stacks

先說明System Font,系統字型顧名思義指的是操作系統內定的字型,因為是內定,所以本來就存在於操作系統內(也就是訪客的電腦內、手機內),不需要去別的網站(如Google)抓取字型檔案,也不需要網頁設計者把字型檔案存一份在WordPress網站主機裡。

要注意的是,各家操作系統內定的系統字型不盡相同。舉一個簡單的例子,Windows系統的內定無襯邊英文字型常見的有Arial、Tahoma、Trebuchet MS、Verdana等,這幾種英文字型在Mac OS系統裡剛好也是基本字型,但是像Geneva、Helvetica這兩種字型則是Mac OS系統內定,但微軟基本上不支援的。

更需注意的則是中文字型。以無襯邊字型來說,例如微軟的繁體中文系統字型有微軟正黑體,Mac OS系統的中文系統字型則有蘋方體(PingFang TC)。

目前較普及的操作系統有Mac OS, Windows, Android, Ubuntu, Linux等,出於各家系統字型的差異,就有必要設定一組字型來兼顧各家操作系統的狀況。

系統字型組合(System Font Stacks)就是從各主要操作系統的內定字型中挑選你想要的字型,組成一個套餐,這樣一來,不管訪客使用哪個操作系統來開啟網頁,都有至少一個內定的系統字型可以適用。

有人會問,如果不顧各家操作系統的內定字型,會有什麼結果?

舉例,如果在這個字型組合中只指定了Mac OS有的字型,而沒有納入Windows支援的字型,那麼當訪客是用IE或Edge開啟網頁,顯示的字型就是隨便系統決定。

再者,如果指定了英文字型但未指定中文字型,那麼也是任由操作系統根據其內建的規則(詳細規則為何並不清楚)去顯示中文。

由上可知,指定System Font Stacks的邏輯是對操作系統設定字型建議,以便對網頁顯示字型有一定程度的控制,而且是兼顧多個操作系統的狀況。其缺點則在於,無法百分之百控制到底結果會用哪種字型來顯示。

如何設定System Font Stacks

有關各操作系統的內定字型是什麼,在此就不贅述,有興趣可在網上查到(可以用system font stack去搜尋)。以下直接說明在製作WordPress網站時,如何設定System Font Stacks。

影響WordPress網頁字型設定的因素有好幾個,這幾個因素都要考量並正確設定,才能得到效果。牽涉到字型設定的有以下幾個地方:

1. 佈景主題(Theme)的基礎設定
2. 頁面編輯器(Editor/Page Builder)的基礎設定
3. 頁面內每個文字框的設定
4. Additional CSS (我們要在這裡加入System Font Stacks的指令)

先說明,我使用的佈景主題是Astra,頁面編輯器是Elementor。如果你使用的是不同的主題和編輯器,有可能設定的位置不同,但基本邏輯應該是相通的。

基本的邏輯就是,我們要先把基礎設定、頁面設定都設為default,頁面文字框也不要另外設定,最後再透過Additional CSS指令設定System Font Stacks,使這個設定通用於所有頁面。

1. 佈景主題的基礎設定:
進入WP後台,左邊清單找到Appearance>Customize>Global>Typography>Base Typography,在Family這裡要設為Default System Font
回到上一層,進入Headings,所有的Family都設為inherit




2-1. Elementor編輯器的基礎設定:
WP後台的左邊清單找到Elementor>Settings,Disable Default Fonts的選項打勾,並儲存設定(這裡的Default Fonts指的是Elementor自己內定的字型,而我們並不使用它)。



2-2. Elementor編輯器的通用設定:
開啟某個用Elementor編輯的網頁,進入編輯模式,在功能選單的左上角,漢堡按鈕點進去。
Site Settings > Global Fonts > 點擊每個鉛筆圖案,把字型都設為Default。










3. 頁面內文字框的設定:
如果你曾經在編輯頁面或文章時,針對個別文字框設定過網路字型,就必須回到文字框中取消網路字型,改為Default或inherit或空白。




4. 以上三處的設定完成後,現在要透過Additional CSS指令,設定我們想要的系統字型。
WordPress後台左邊清單,Appearance>Customize>Additional CSS



以下範例中的英文字型部分,我是參考了網路上的建議。然後以此為基礎,加上中文字型。這裡我選用的中文字型都是黑體(無襯邊),如果你想要使用別種字型,請自行搜尋可用的來替換即可。

黑體的簡體中文字型有以下:

Microsoft YaHei, 微软雅黑
Microsoft YaHei Light, 微软雅黑 Light
PingFang SC(苹方字体)
Hiragino Sans GB(冬青黑体)
Source Han Sans CN(思源黑体简体)
Noto Sans CJK SC(思源黑体简体)

CSS指令如下(請注意,字型名稱若為兩個字以上,需加上英文引號。前四級標題h1, h2, h3, h4,我用細字版的微軟雅黑,顯示的字體比較不會太胖):

body, h5, h6 {font-family: "Microsoft YaHei", "微软雅黑", "Microsoft JhengHei", "微軟正黑體", "PingFang SC", "Hiragino Sans GB", "Source Han Sans CN", "Noto Sans CJK SC", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";}

h1,h2,h3,h4 {font-family: "Microsoft YaHei Light", "微软雅黑 Light", "Microsoft JhengHei Light", "微軟正黑體 Light", "PingFang SC", "Hiragino Sans GB", "Source Han Sans CN", "Noto Sans CJK SC", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";}





黑體的繁體中文字型:

Microsoft JhengHei, 微軟正黑體
Microsoft JhengHei Light, 微軟正黑體 Light
PingFang TC(蘋方字體)
Hiragino Sans TC(冬青黑體)
Source Han Sans(思源黑體繁體)
Noto Sans CJK TC(思源黑體繁體)

CSS指令如下(請注意,字型名稱若為兩個字以上,需加上英文引號。前四級標題h1, h2, h3, h4,我用細字版的微軟正黑體,顯示的效果比較好,不會太胖):

body, h5, h6 {font-family: "Microsoft JhengHei", "微軟正黑體", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang TC", "Hiragino Sans TC", "Source Han Sans", "Noto Sans CJK TC", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";}

h1,h2,h3,h4 {font-family: "Microsoft JhengHei Light", "微軟正黑體 Light", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang TC", "Hiragino Sans TC", "Source Han Sans", "Noto Sans CJK TC", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";}


以上就是System Font Stacks的設定方式。建議字型設定完成後,使用GTmetrix之類的測速網站檢測一下,從Waterfall chart的讀取紀錄中檢查是否已經沒有Google fonts網路字型的請求。


沒有留言:

張貼留言