返回支援 設計你的網站 變更網站的字型

變更網站的字型

選擇字型能夠為網站增添獨特的外觀。每個佈景主題都有一系列精選字型可供選擇,包括 Google Fonts。

視使用的佈景主題而異,你需要透過不同的選項來變更字型:

使用網站編輯器變更字型

此功能適用於 WordPress.com Explorer、Creator 和 Entrepreneur 方案以及舊有專業版方案的網站。若是採用免費和 Starter 方案的網站,只要升級方案,即可存取此功能。

如果網站使用的佈景主題支援網站編輯器,你可以使用網站編輯器中的「樣式」按鈕存取「文字設計」設定,藉此變更網站的字型。

箭頭指向網站編輯器中的「樣式」按鈕。

使用全域樣式變更字型

如果你的使用這些佈景主題,可以透過全域樣式變更網站字型

  1. 在儀表板中,按一下「頁面」。
  2. 按一下「新增」按鈕或現有頁面標題,即可在 WordPress 編輯器中開啟頁面。
    • 如果新增頁面,請選取自己喜歡的版面配置或預設的空白版面配置。
  3. 在編輯器中,按一下「全域樣式」按鈕,也就是位於「設定」圖示和綠色 Jetpack 按鈕之間的「Aa」按鈕。
  4. 按一下「標題字型」或「基本字型」下的下拉式選單,查看可用的字型選項。
「全域樣式」按鈕周圍的方塊在區塊編輯器的左上角,位於「頁面設定」按鈕和「Jetpack 設定」按鈕之間。

字型是成對的,一個是標題字型,另一個是基本字型。

在「全域樣式」選單中,按一下「發表」儲存新字型配對,或按一下「重設」恢復變更。

在「全域樣式」選單中發表變更並不會發表你正在處理的特定頁面。

調整字型大小

區塊編輯器提供各種字型變更選項,讓你變更各區塊內的字型大小。

若要變更標題字型大小,請在標題區塊中選取不同的標題 (H1、H2 等) 。

標題區塊上方的工具列,其中的選項可供變更要使用的標題大小。
H5 和 H6 位於區塊編輯器一側的區塊設定中。

段落、按鈕和其他文字區塊的設定有「文字設計」選項,你可以在這裡將文字大小變更為預設大小,或輸入自訂字型大小。

如果沒有出現側邊欄,可能需要按一下右上角的「設定」圖示叫出設定。此圖示外觀為正方形中有兩個大小不同的欄位。

編輯器中黑色背景的設定圖示,下方有顯示「設定」的工具提示。
按一下「設定」圖示,開啟區塊設定

在自訂工具中變更字型

許多佈景主題都可在「外觀」→「自訂」變更字型。如果你在自訂工具中找不到字型選項,請檢查你的佈景主題是否支援使用全域樣式變更字型

  1. 儀表板前往「外觀」「自訂」
  2. 按一下自訂工具中的「字型」選項。
  3. 按一下「標題字型」或「基本字型」下的下拉式選單,查看可用的字型選項。
自訂工具中的「自訂字型」區段,顯示「標題字型」或「基本字型」下拉式選單。

字型是成對的,一個是標題字型,另一個是基本字型。

每次變更字型時,即時預覽都會重新整理,讓你查看該字型在網誌上的外觀。

調整字型大小和樣式

字型樣式 – 若要調整標題字型的樣式,請按一下字型下方左側的選項。可用的樣式會依選擇的字型有所不同。

字型大小 – 若要調整標題字型或基本字型的大小,請在每個選取的字型下方右側按一下大小選項,然後從下拉式選單選取大小。

「自訂字型」面板中的「標題」選項設為 Tangerine,字型樣式設為粗體,字型大小設為特大。

💡

你可以使用自訂 CSS 變更全域預設字型大小。

儲存字型

如果滿意選取的字型,請發表網站;若想繼續自訂網站稍後再發表,則儲存草稿

變更字型

選取自訂字型後,你可以視需要多次變更。

若要變更使用的自訂字型,請前往「外觀」「自訂」「字型」,然後選取不同的標題字型或基本字型。或者你可以按一下自訂字型名稱右側的 X,改回佈景主題的預設字型。

如果滿意變更的字型,請發表網站;若想繼續自訂網站稍後再發表,則儲存草稿

「自訂字型」面板中有箭頭指向自訂標題字型右邊的 X (重設為佈景主題的預設字型)。
按一下自訂字型旁邊的 X,即可將字型還原成佈景主題的預設值。

📌

儲存字型後,可能需要幾分鐘才會顯示在網誌或網站上。建議也清除瀏覽器的快取,確認檢視的是網站最新版本。

重設字型

若要將字型重設為佈景主題的預設值,請按一下目前字型旁邊的 X。

  1. 前往「外觀」→「自訂」
  2. 按一下「字型」。
  3. 按一下自訂字型旁邊的 X,即可將字型重設為佈景主題的預設值。
  4. 按一下「儲存變更」。
這是自訂字型選項,用滑鼠按一下標題字型和基本字型所選字型旁邊的 X,即可將字型還原成佈景主題的預設值。

將字型套用到特定文字

選擇字型時,你會看到設定整體網站字型的選項,而不是設定個別頁面或某行文字的字型。從設計層面來說,這樣的做法最為合適。整個網站使用的字型一致時,看起來最為美觀。如果網站使用各種不同字型,看起來可能會不協調。

如果你想突顯某段文字,請考慮使用其他方法。例如套用不同顏色、使用引文區塊,或是插入圖片

使用自訂字型

你可以利用外掛程式為網站安裝更多字型。許多外掛程式可讓使用者加入自己的字型。在查看外掛程式時,請檢查評分、正面留言的數量,以及外掛程式開發人員提供的支援類型。如果你在測試後決定不使用外掛程式,請務必停用/刪除,保持外掛程式清單有條不紊。

💡

不確定要選擇哪個字型嗎?這篇文章介紹九種優雅的免費草書字型,說不定能讓你找到靈感。

常見問題

Typekit.com 帳號可以連結 WordPress.com 網站嗎?

外部的 Typekit.com 帳號不能連結 WordPress.com 網站或網誌。

我的語言支援這些字型嗎?

如果在「設定」→「一般」下為網誌選取了非拉丁語言,系統將載入所有自訂字型的字元。如果選取了拉丁語言 (如英語、義大利語、葡萄牙語或西班牙語),只會載入較小的字型子集。如果有些字元在網誌上未能正確顯示,請先檢查語言設定,確認選取了正在使用的語言。然後前往「自訂工具」→「字型」重新儲存字型,完成語言設定更新。

如何判斷我使用的語言,支援我要用的字型?

要確認某個語言是否支援某個字型,最好的辦法是在自訂工具中查看該字型是否與佈景主題的預設值不同。目前亞洲語言不受支援,斯拉夫文則受到大多數 (並非全部) 字型系列支援。未來我們將新增更多語言支援,並且加以改善。

我選擇的字型顯示之前,為什麼會先短暫顯示不同的字型?

這稱為 Flash of Unstyled Text (FOUT)。連線較慢時,文字會先以佈景主題的預設字型顯示。這樣可讓讀者在自訂字型載入前先閱讀內容,而不是看著空白頁面發呆。載入完成後,文字會稍微閃爍變成不同字型;總體而言對連線較慢的讀者來說,不會看到空白畫面。如果不希望這樣,可以在「外觀」→「自訂」→「其他 CSS」(僅適用於進階版、商用版、電子商務版和舊專業版) 中使用 CSS 編輯器,將此 CSS 程式碼加入網站:

.wf-loading body { visibility: hidden; }



html:not(.wf-active) body { display: none; }

Google Fonts 和 GDPR

針對提供 WordPress.com 佈景主題中所用 Google Fonts 的所有要求,一律會透過 WordPress.com 的伺服器提供,不再使用 Google 的 CDN/FDN。此變更於 2022 年 12 月施行。

如果網站使用自訂外掛程式或第三方佈景主題,請向該外掛程式和/或佈景主題開發人員確認,以便確保對方並未透過 Google 的 CDN/FDN 提供 Google Fonts。

你可以在此深入瞭解 GDPR。

Copied to clipboard!