google fonts typography – 自訂漂亮的中英文字型

google fonts typography – 自訂漂亮的中英文字型

google fonts typography

WordPress 網站展示漂亮的中文字型,一直是每位網站管理者優先處理的工作之一,在 google fonts – 如何為佈景主題新增中文字型這一篇文章,已經跟大家分享了如何的幫自己的佈景主題新增中文字型,所修改的變動將網站的字體統一為 google fonts cwTeXYen 字體,當然這個字型對於英文字體的支援也是有不錯的展示效果,但是對於文章字體排版 google fonts typography 更加要求的朋友來說,還是有可以改進的地方。接下來的文章內容,著重在跟大家分享如何在佈景主題裡自訂漂亮的中文英文字型(為了範例說明清楚,英文字體採用特殊字體而非漂亮字體,是為了讓文章字體的前後變化可以更明顯)。

中文字型與英文字型選擇

中文字型我們採用 google fonts cwTeXYen 圓體中文字型,網址是在: Google Fonts : Early Access
英文字型我們採用 google fonts Monoton 英文字型,網址是在:https://fonts.google.com/specimen/Monoton?selection.family=Monoton

Activello 佈景主題字型修改

這次文章範例的佈景主題是 Activello,這是一個很漂亮的旅遊佈景主題,有很美的英文字體顯示,但是對於中文的支援不好,所以我們拿來作為範例,對中文與英文字體做設定修改。
 

Activello 佈景主題
Activello 佈景主題

 

  • Activello 佈景主題安裝完成後,會發現對中文字型的支援效果不是很好(圖一),所以文章範例就針對標題跟內文的字型來做修改,示範如何的自訂中文字型與英文字型。
  •  

    Activello 佈景主題標題與內文字型修改前
    (圖一)Activello 佈景主題標題與內文字型修改前

     

  • 找到佈景主題關於標題與內文字型設定的式樣,將它複製到子佈景主題。以Activello 佈景主題標題為範例,標題字型的式樣是:
  • Activello 佈景主題內文字型的式樣是:
  • 將上面的兩個關於字型設定的式樣語法貼到子佈景主題的式樣檔(style.css)裡面。
  • 然後在標題與內文式樣語法前加入 google fonts 中文字型與英文字型的式樣語法。
  • 接著修改英文與中文字型,字型的式樣是 font-family,將英文字型擺在前面中文字型擺在後面,這是因為英文字型 Monoton並沒有支援中文,所以中文字會跳過 Monoton而採用後面的 cwTeXYen 圓體,達到我們希望的中文字有中文字型,英文字有英文字型。font-family: ‘Monoton’, cursive, ‘cwTeXYen’, sans-serif;
  • 子佈景主題式樣檔修改完成後請存檔並上傳,再回到網站的文章頁面就可以看到,佈景主題的標題與內文字型,已經被修改過了。中文字顯示 google fonts cwTeXYen 圓體中文字型,英文字顯示 google fonts Monoton 英文字型(圖二)。
  •  

    Activello 佈景主題標題與內文字型修改後
    (圖二)Activello 佈景主題標題與內文字型修改後

     

    結論

    讓網頁呈現漂亮的字體,特別是中文字,不再是一件讓網站設計者感到痛苦的工作,透過 google fonts 的幫助,達到中文字有中文字型,英文字有英文字型,這是對佈景主題式樣修改最棒的一件事,每一位網站設計者都可以發揮創意,讓網站的內容呈現更多豐富的設計,讓訪客的瀏覽更輕鬆也更舒服。

    About The Author

    max

    使用 WordPress 架設網站不再是一件痛苦的工作。這裡跟大家分享使用WordPress的相關問題與研究。 並且提供有關WordPress外掛程式,佈景主題等等的使用經驗分享。 幫助想要建立網站的朋友,可以簡單,快速,無痛苦的建立與使用網站。

    網站架設

    WordPress 虛擬主機免費安裝設定