CSS 小技巧

CSS小技巧 如何為WordPress主題自訂中文和英文字型

Kadence WP主題可以選用Noto Sans TC,也就是思源黑體的字型。思源體字型漂亮、簡潔、易於閱讀,可是對英文字型表現一般。可是,Kadence WP主題在自訂字型選項上,卻不能多選一個字型來搭配,怎麼辦?

那麼我們就在style.css或Child Theme裡面指定多個字體。

如何安裝Kadence Child Theme?

你可以到官方Documentation那裡下載,同時官方也會教你如何提取Child Theme的style.css。過程非常簡單。

由於中文字體包含英文字體,因此第一順位必須是英文字體,當第一個字體沒有中文字體,按規則系統就會依照順位用第二個字體替代。

Sample

body {
  font-weight: 200;
  font-family: 'Source Sans Pro','Noto Sans TC','Microsoft YaHei', sans-serif;
}

其實Kadence官方並不鼓勵一般人安裝Child Theme來修改任何東西,因那是屬於開發人員所用。當然,如果你有一定基礎便沒有問題。

如果不裝Child Theme修改style.css,簡單作法是在自訂(Customizer)的附加CSS,加上英字體即可。前題是,你的Global字體是選中文字體,那麼就不必多此一舉再加中文字體。

Sample

body {
  font-weight: 100;
  font-family: 'Georgia';
}

如何自定義字體添加到Kadence?

可以通過Kadence Premium Addon Suite Packages,上傳自訂的字型或使用自Adobe Typekit。

Google中英文字體的字型參考資料
Browse Fonts – Google Fonts

想用Baskerville怎麼辦?

Baskerville是英國字體設計師John Baskerville在1950年創作,整體清晰,比Caslon字體微高,更嚴謹一點,很適用在小說上,特別是排版大段章節文字,更能顯現Baskerville的實力。

Baskerville最有特色的地方,就擁有那優雅尾巴的 g 。

雖然Google fonts沒有Baskerville可用,不過卻有Libre Baskerville的替代。

Libre Baskerville

Libre Baskerville的設計師是Impallari Type,以Baskerville為基礎進行編寫,特別針對16px正文文本進行優化的網絡字體,它的x-height更高,字腔也放大許多,但在粗細對比上也減少,更適用於屏幕上的閱讀。

2021年最受歡迎的Google Fonts排名

  1. Roboto
  2. Open Sans
  3. Lato
  4. Montserrat
  5. Oswald
  6. Roboto Condensed
  7. Source Sans Pro
  8. Slabo 27px
  9. Raleway
  10. PT Sans

排名截止2021年2月22日,Libre Baskerville排名45。

參考資料
Analytics – Google Fonts

Similar Posts