在 WordPress 使用系統字型

在 WordPress 的字型運用有非常多的方法,我個人一直偏愛使用系統字型,其原因,系統字體就像網路基本字型一樣工作,而不需要瀏覽器的第三方 (Google Font) 任何下載時間,讓網頁載入更快。

最簡單的做法:

外觀 > 自定 > 附加的 CSS,把代碼寫在裡面,或是利用 Code Snippets 外掛來添加代碼也可以。

body {font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, "微軟正黑體", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";}

h1,h2,h3,h4,h5,h6 {font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, "微軟正黑體", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";}

body, p {font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, "微軟正黑體", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";}

Code Snippets 外掛的寫法:

add_action( 'wp_head', function () { ?>
<style>

	body {font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, "微軟正黑體", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";}

	h1,h2,h3,h4,h5,h6 {font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, "微軟正黑體", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";}
	
	body, p {font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, "微軟正黑體", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";}

</style>
<?php } );

接下來還需要 禁用從 WordPress 主題加載的任何第三方字體,例如:Google Fonts。

這又可能有所不同,因為每個開發人員以不同的方式包含字體,但現在許多佈景主題都有輕鬆的方法來打開或關閉 Google Fonts。

或者,使用 Disable Google Fonts 外掛來禁用 Google Fonts。

另外,!important 是一個很強勢的用法,看狀況用吧 !


Latest posts by yungkeli (see all)

作者:

yungkeli

視咖啡如命的癮君子,沒有厲害的技術,只會小打小鬧的電腦工程師。自稱自己是 WooWP Hosting 的 CEO,使用 Kinsta GCP C2 主機,推出一個快速、穩定 WordPress 代管主機,了解更多 >>

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。