跳至主要內容

5-4 網頁字型導入 – Webfont

最後更新日期: 2023 年 2 月 21 日

一般來說,使用者看的網頁中的字型,會因為作業系統或是瀏覽器預設而不同。比如說微軟正黑體或者是 Apple 蘋方體,就是電腦跟手機常見的預設字型。

所以我們可能會在網站設計稿上,使用了某些字型,但是使用者在瀏覽這個網頁的時候,看不到效果,因為他們的電腦不一定有安裝這套字型。所以在這個單元會來分享,要怎麼將網頁上導入字型讓使用者可以看到。

本文章節

Webfont

如果你有跟深入的去使用佈景主題的話,可能會發現有些佈景主題,可以在編輯器裡,看到有許多字型選項。問題來了!很多字型按了之後沒有反應,這是為什麼呢?因為大多數的 WordPress 佈景主題,預設給的都是英文字型,套用在中文上就會無效。

因此我們在剛開始架站的時候,容易碰到明明套了版型,卻整個網頁都長歪掉,很大原因就是出在字型不支援中文的緣故。那麽要怎麼在網站上使用中文字型呢?我們會需要利用 網頁字體 Webfont 來達成。這是一個基於網路雲端的字型嵌入技術,可以讓使用者瀏覽網頁的時候,在有連網的狀態下,直接將網頁中的文字置換成指定字型。

安裝字型

在這之前,我們會建議安裝 Header Footer Code Manager 這個外掛。

我們這邊以 justfont 提供的網頁字型服務舉例。justfont 提供了有一個月的試用額度,並且有部分網頁字型可以體驗看看,而就算是之後要用年授權,費用也不算太貴。

👉 justfont 連結

登入之後我們就可以在字型列表中,找我們想要使用在網頁上的字型。

找到之後就點選加入 Webfont ,接著在右上角有個新增專案。

填寫上我們要授權網站的基本資訊。

確定網頁字體有加入之後,點選導出 JS 的程式碼,並將Production 這段 code,複製起來。

我們回到剛剛安裝的外掛新增程式碼片段。將剛剛複製的貼到最下面的文字欄位後,按儲存

程式碼片段類型記得選 JavaScript 。加入之後,我們就可以將要換字型的地方做替換了。

那除了 justfont 以外,相關的網頁字型服務都是類似這樣的做法,比如說 Adobe Fonts 或 Google Fonts,都可以找到一些中文的網頁字型,透過這樣的方法來安裝。

順帶一提,一個網站可以套用多個網頁字型,不過不建議這樣做,太多字型也會影響網頁瀏覽速度。

以上就是這個單元對於網頁字型的介紹與中文字型的使用方法。字體會影響排版、易讀性和你整個網頁的風格,所以選擇一個好的字型也是一個重要的一環,別忘了考慮進去囉!

分類:WordPress 架站教學

搶先發佈留言

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

由 Compete Themes 設計的 Author 佈景主題
error: 尊重智慧財產權,請不要隨意複製使用文章喔