如何在 WordPress 使用系統字型
Last Updated on October 24, 2022
在 WordPress 的字型運用有非常多的方法,我個人一直偏愛使用系統字型,其原因,系統字體就像網路基本字型一樣工作,而不需要瀏覽器的第三方 (Google Font) 任何下載時間,讓網頁載入更快。
System 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 } );
Theme
上面的代碼是最基本的,但這會因所用的佈景主題不同,代碼會有所增加,可以利用 Chrome DevTools 來查看 CSS 樣式。
例如:範例網站 HelloYUNGKE,使用 Blocksy 佈景主題。
Disable Google Fonts
接下來還需要「禁用」從 WordPress 主題加載的任何第三方字體,例如:Google Fonts。
這又可能有所不同,因為每個開發人員以不同的方式包含字體,但現在許多佈景主題都有輕鬆的方法來打開或關閉 Google Fonts。
或者,使用 Disable Google Fonts 外掛來禁用 Google Fonts。
另外,!important 是一個很強勢的用法,看狀況用吧 !
Firefox 不知道在第幾版開始 (我沒去查證),也不須指定「微軟正黑體」,就可以與 Chrome 一樣,不會出現醜醜的細明體字型;所以,我修正上面的代碼,將「微軟正黑體」移除。
Photo by Alexander Andrews on Unsplash