指南/編輯網站/變更網站字型

變更網站字型

網站中的文字字元樣式稱為字型。本指引會說明如何為網站選擇字型。

字型與方案資格

此功能適用於使用 WordPress.com 進階版、商用版和電子商務版方案,以及舊版專業版方案的網站。若是採用免費和個人版方案的網站,只要升級方案,即可存取此功能。

影片教學

觀看影片,了解如何更新區塊佈景主題的字型。你可以在本指引的下一節找到所有佈景主題類型的指示。

課程:在 WordPress.com 建立網站
此影片使用英文字幕。
YouTube 提供自動翻譯功能,讓你可以用自己的語言觀看:

開啟自動翻譯字幕的方法:

  1. 播放影片。
  2. 點擊影片右下角的 ⚙️ 設定 圖示。
  3. 選擇 字幕/副本
  4. 選擇 自動翻譯
  5. 從清單中選擇你的偏好語言。

使用自動配音(測試版)的方法:

  1. 點擊 ⚙️ 設定 圖示。
  2. 選擇 音訊曲目
  3. 選擇你想收聽的語言:

ℹ️ 翻譯與配音由 Google 自動產生,可能不夠精確,且自動配音功能仍在測試階段,暫未向所有語言開放。

變更字型

你可以透過下列步驟變更網站的字型。

若要判斷應遵循本指引的哪一節內容,請前往儀表板查看左側的「外觀」區段。如果在此看到「編輯器」,請參閱本指引的「網站編輯器」一節。或者請參閱「頁面編輯器」或「自訂工具」操作說明。

選取適合編輯器的分頁:

如果網站使用的是支援網站編輯器的佈景主題,你就可以透過「樣式」選項來變更網站的字型。若要變更網站的字型,請按以下步驟操作:

  1. 請造訪網站的儀表板
  2. 前往「外觀」→「編輯器」
  3. 按一下左側的「樣式」。
  4. 選取「文字設計」選項。
  5. 從下列的網站文字元素中選擇:
    • 文字
    • 連結 (包含選單項目)
    • 標題
    • 說明文字
    • 按鈕
  6. 按一下「字型」底下的下拉式選單,然後選擇所需的字型。文字會更新至你選擇的字型,供你查看字型外觀。
  7. 你可以調整其他文字相關設定,包括大小、外觀 (粗體和斜體)、行高、字母間距和字母大小寫。
  8. 按一下「檢閱變更」或「儲存」,即可套用變更。
網站編輯器開啟至「設計」面板,「樣式」選單為啟用狀態。

若使用較高等級的方案,你可以上傳自己的字型檔案

將字型套用到特定文字

你可以使用區塊的文字設計設定,調整特定區塊 (支援的佈景主題和區塊) 的字型。或者,將預設字型套用至特定區塊。你也可以考慮使用「標題」或「引文區塊」,建立一段引人注目的文字。

新增自訂字型

除了 WordPress.com 提供的字型外,你也可以將自訂字型新增至網站。我們的指引將說明如何從 Google Fonts 安裝字型,或上傳自己的字型檔案。

此功能適用於使用 WordPress.com 商用版和電子商務版方案,以及舊版專業版方案的網站。如果你有商用版方案,請務必啟用該方案。若是採用免費、個人版和進階版方案的網站,只要升級方案,即可存取此功能。

上傳字型檔案

本指引會說明如何上傳字型檔案,協助你擴充文字設計選項。

修正無樣式文字的閃爍問題

無樣式文字閃爍 (FOUT) 指的是在所選字型出現前,其他字型短暫閃爍的狀態。連線速度較慢時,文字會先以佈景主題的預設字型顯示。這樣可讓讀者在選擇的字型載入前先閱讀內容,而不是看著空白頁面發呆。在頁面載入完成前,文字會稍微閃爍變成不同字型;總體而言對連結速度較慢的讀者來說,不會看到空白畫面。

如果不希望這樣,可以在將下列 CSS 程式碼加入符合資格方案的網站:

.wf-loading body { visibility: hidden; }



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

Copied to clipboard!