Skip to main content

如何變更中文字體 - Drupal font your face 模組介紹

Submitted by admin on Wed, 12/18/2019 - 07:30

簡介:

這篇文章會介紹如何透過@font-your-face這個模組變更Drupal網站內的中文字體。

font-your-face模組可以建立字型規則,決定某個HTML標籤要套用到何種字型。換句話說,如果心理上可以接受的話,我們可以使用新細明體標題加上標楷體正文作為我們的文章字型模板。 (笑

另外這個字型規則也可以根據布景主題做分類,因此我們可以透過這個模組對不同的佈景主題的字型進行客制化,不同的主題間隨時都能無縫切換,無須重新設定字型。

 

如何使用:

模組網址: https://www.drupal.org/project/fontyourface

安裝模組後可以在Extend管理頁面中找到@fontyourface以及一系列的字型來源,在這篇教學中我們以Google fonts當作範例。

drupal font your face module bundle

啟用模組後我們可以在管理員選單Appearance > @font-your-face > Settings裡面匯入剛才所啟用的字型。點下Import all fonts按鈕之後根據網站主機的網路速度,可能要等待5~10分鐘不等。

drupal font your face module import all google fonts

匯入完成後我們可以在Browse頁面看到google fonts內所包含的所有字型。這個頁面基本上是一個views,所以我們可以透過Language/subset的選項來篩選出我們感興趣的語言。在下面這張圖片中以chinese-traditional作為選擇範例。

按下Apply後可以看到所有的繁體中文字型。過濾出的內容基本上都是google的思源黑體,差別只在於線條的粗細程度。我們也可以到google的互動展示網頁,快速瀏覽思源黑體在不同線寬不同文字的外觀,再決定要選擇哪一種。

決定需要哪一種字形後,可以按下底下的Enable。此時所選擇的字型外框會變成綠色,等等就會出現在可使用的字型選單中了。

select interested font from google font bundle

 

接著我們來到@font-your-face底下的Font display標籤頁,在這邊點擊「+ Add Font Display」按鈕,可以建立新的字型規則。

Label欄位為這個字型規則物件的名稱。

Font欄位可以選擇上一步所安裝要套用的字型。

Fallback fonts是在所選擇的字型不可使用時的備案字型,在這邊先不考慮這個問題。

Preset Selectors可以選擇這個字型規則要套用在何種HTML標籤上,如果是標題請選擇All Headers,內容請選擇Body。

Theme可以決定這個字型規則要在哪一個佈景主題內生效。

drupal font your face module apply selected font

最後按下save,就可以回到自己的網站看看新套用的字型了。

 

enjoy~