26 3 月

如何設定WordPress字型?3種方法幫網站提升視覺美觀

順利完成Wordpress架站,卻覺得新網站美觀不足,尤其中文字型少之又少,該如何善用字體提升視覺美觀?本篇將為你解析中文Wordpress字型少的原因,並分享安裝字體的方法,幫助你輕鬆改善網站視覺。

 

為什麼中文Wordpress網頁字型類型少?解析其中原因

由於中文網站架設完成後,都是使用預設字體「新細明體」,為了提升網站的視覺美觀,就必須更換其他字型,優化文字內容的閱讀體驗。然而可選擇的中文網頁字型不多,大多使用Google提供的思源字體,或是Windows系統的微軟正黑體,究竟是為什麼呢?

因為中文字高達上萬,一套中文字體大小往往超過10MB以上,相比英文僅需要26個字、100KB的容量大小,在存取網站的過程中將會影響載入速度。因此大多數的網站,都使用前面提及的兩種開放字體,以避免載入過慢的問題。

 

如何在Wordpress上傳字型?3種Wordpress字型設定方法

1.從Wordpress主題編輯器安裝字型

步驟一:

以Google提供的思源字體 Noto Sans TC為例,複製Use on web區塊中提供的@import代碼。

 

<style>

@import url(‘https://fonts.googleapis.com/css2?family=Noto+Sans&display=swap’);

</style>

 

步驟二:

進入WordPress後台,點擊【外觀】,選擇【主題編輯器】的【style.css】頁面,

在編輯器中貼上複製的代碼,並按下儲存後離開。

步驟三:

回到【外觀】,選擇【編輯CSS】頁面,在欄位中貼上以下代碼:

body

{

font-family:’ Noto Sans TC ‘,sans-serif;

}

 

儲存後就完成字型更新。

2.從前台進入自訂CSS頁面更新字體

若想將網站字型設定為微軟正黑體,可在登入狀態下檢視前台網頁,上方會出現黑色選單,點擊進入【自訂】模式,在【附加CSS】欄位中,設置:

body {

font-family: 微軟正黑體, sans-serif !important;

}

h1,h2,h3,h4,h5,h6{

font-family: “微軟正黑體”, sans-serif !important;

}

 

按下發布後,重新整理就能更新網站字體。

3.使用外掛更換字體

從Wordpress後台的【外掛】下載Header Footer Code Manager,安裝後進入Edit Snippet頁面,新增GoogleFont,並在下方Snippet / Code欄位貼上這段語法:

 

<link rel=”preconnect” href=”https://fonts.gstatic.com”>

<link href=”https://fonts.googleapis.com/css2?family=Noto+Sans&display=swap” rel=”stylesheet”>

 

中、英Wordpress字型推薦

Wordpress字型

中文Wordpress字型推薦

思源字體是由Google開發的免費字體,一共包含楷體、園體、黑體、明體、宋體、柔黑體等6種字型,不僅免費授權,可通用日、韓文的中文字,本身造型更是優雅美觀,安裝在網站後,能提升整體視覺美觀。

英文Wordpress字型推薦

Helvetica是1957年由瑞士人Eduard Hoffmann發明,屬於無襯線字體中的一種,被大眾認為是現代主義的代表字體,造型端莊典雅,被眾多知名企業如BMW、MUJI、3M、EPSON選為Logo字體,成為英文的經典字體。

 

善用Wordpress字型,點綴網站視覺美觀|網站設計服務

網站字型是打造品牌調性不可或缺的一部分,裝設優美字體能幫助你提升網站視覺美觀,但要架構使用者體驗優良的網站,歡迎交由戰國策集團幫你搞定,我們擁有投入網路領域20年的深厚經驗,加上專業的網路技術,幫助您架設兼具視覺豐富與順暢實用的企業網站。

歡迎聯繫我們,為您製作優質網站!

 

Share this