字型可以區分沉悶的網站和漂亮的網站。通過學習如何在WordPress中更改字型，您可以使您的網站看起來現代、專業和品牌化。
但是在您的WordPress網站中使用字型的最佳方式是什麼，您如何為您的設計選擇正確的字型？
在本指南中，我將帶您瞭解有關WordPress字型的所有資訊。您將瞭解：
- 字型：術語
- 如何將字型新增到您的WordPress網站（選項）
- 在WordPress中使用Web字型
- 在WordPress中託管您自己的字型
- 如何更改WordPress中的字型
- 如何在WordPress中優化字型
字型：術語
讓我們先看看網路上有關字型的術語。
- Web 字型（又名HTML字型）是託管在第三方網站上並連結到您網站的字型。
- 本地託管的字型就是這樣（託管在您網站的伺服器上。）
- Web安全字型是（幾乎）所有計算機上預裝的有限範圍的字型，您可以相當確信所有訪問者都可以訪問。
讓我們來看看向您的網站新增字型的選項。
如何將字型新增到您的WordPress網站（選項）
在開始向您的網站新增字型之前，如果您瞭解可用的選項會有所幫助。
字型是您網站設計的一部分，因此在大多數情況下，它們將通過您的主題進行編碼 – 但並非總是如此。在某些情況下，您可能決定使用外掛在您的站點中啟用更廣泛的字型。
以下是一些可供您選擇的選項：
- 通過安裝允許您訪問的外掛來使用網路字型，例如Google Fonts。
- 通過將它們編碼到您的主題中並將它們排入佇列來使用網路字型（不像聽起來那麼棘手）。
- 在您自己的網站上託管您的字型並將其新增到您的主題中。
有兩個主要區別 – 您是否使用託管在站點外部的網路字型，或者您是否選擇自己託管字型檔案。在本指南中，我們將瞭解每種方法的優缺點。
讓我們從檢視網路字型開始：為什麼您可能會選擇使用它們以及將它們新增到您的網站的方式。
在WordPress中使用Web字型
Web字型是向您的網站新增字型的最流行方式，因為它們可以輕鬆新增大量字型。
什麼是網頁字型？
Web字型是託管在第三方提供商網站上的字型。您不是將檔案複製到您自己的站點，而是連結到提供商的網站，然後從那裡獲取它們。
這意味著您可以訪問大量字型，而無需使用自己主機上的伺服器空間。這也意味著，如果字型檔案隨著時間的推移而發生變化，您不必更新檔案，您將自動可以從提供商處訪問新版本的檔案。
Web字型可以是免費的，也可以是付費的，通常是通過訂閱的方式。一些流行的供應商是：
- 谷歌字型。最大的免費網路字型提供商。您還可以將他們的所有字型下載到您的計算機，這意味著如果您想使用與您的網站相同的字型建立離線材料，您可以。而且都是免費的。
- Adobe Edge網頁字型。這些也是免費的。雖然它們被設計為與Adobe產品一起使用，但它們在任何網站上都能很好地工作。
- Fonts.com是字型的高階提供商，如果您必須將網路字型與印刷材料中的字型相匹配，並且該字型無法通過免費提供商獲得，則您可能需要使用它。
- fontfabric是一個字型設計師，提供高階字型用作網路字型和線上字型。您需要為這些付費，但會獲得比使用Google字型更個性化的東西。
谷歌字型
所有這些提供商都允許您通過向WordPress站點新增一些程式碼或有時使用外掛直接從他們的伺服器提供字型，這意味著您不必新增任何程式碼。
Web字型不同於Web安全字型。您可以將這些用作Web字型的後備，以防您的網站訪問者由於某種原因無法連線到Web字型。我將在本文後面向您展示如何做到這一點。
為什麼要使用網頁字型？
所以現在你知道什麼是網路字型，為什麼你會選擇使用它們而不是託管你自己的字型？
以下是一些好處：
- 輕鬆：新增幾行程式碼或安裝外掛比下載和上傳字型檔案更快，並且如果您將來決定更改字型，則更容易。
- 字型範圍：有數千種字型可用作網路字型，而且列表一直在增長。
- 更新：如果字型檔案需要更新，可能是新增可變字型（很快就會有更多）或新增額外的字元，您的站點將可以訪問新版本，而您無需執行任何操作。
大多數網站使用網路字型，並使用網路安全字型作為備份。使用WordPress，這很容易做到。
為您的網站尋找最佳網路字型
決定要使用網路字型後，您現在面臨一個艱難的決定：使用哪種字型？
在過去，所有Web開發人員都可以訪問那些預裝的Web安全字型，這是一個非常容易的決定。你想使用襯線字型還是無襯線字型？（襯線字型在每個字元的較大筆劃末尾有一條小線或筆劃，而無襯線字型則沒有。）做出這個決定後，您的選擇非常有限。
但現在，世界就是你的牡蠣。
以下是一些提示，可幫助您為網站選擇最佳字型：
- 看看你的印刷材料。是否有已經在使用的字型可以作為網路字型找到？如果沒有，你能找到類似的東西嗎？
- 檢視競爭對手的網站。他們使用什麼型別的字型？我不建議您複製它們，但可能有某些樣式可以向您的網站使用者傳達正確的影象型別。
- 想想你想用你的字型傳達什麼樣的心情。有些字型看起來更現代，有些更傳統。有些很有趣，有些則更嚴肅。
- 堅持使用易於閱讀的字型作為正文，並根據需要使用更有趣的字型作為標題。
- 從最流行的谷歌字型中挑選——這些字型對網站訪問者來說很熟悉並且易於閱讀。
選擇字型後，請花一些時間嘗試使用它們。Google Fonts等字型提供商可讓您輸入自定義文字，以檢視所選字型的外觀。一旦您在字型中看到自己的文字，它可能會幫助您確定該字型是否適合您。
測試你的字型
請記住，使用網路字型可以非常輕鬆地更改字型，因此您可以在開發主題或設定網站時隨時切換到另一個選項。
如何使用WordPress外掛新增Web字型
所以您已經選擇了您選擇的字型，現在是時候將它新增到您的網站了。
如果您不喜歡向主題檔案新增程式碼，您可以安裝一個外掛，讓您可以訪問 Google 字型並在您的網站上使用您想要的任何字型。
在Google Fonts Typography外掛，您可以訪問谷歌字型的整個庫，並允許您通過WordPress的定製審查。
像安裝任何其他外掛一樣在您的站點上安裝該外掛，然後啟用它。
轉到外觀 > 自定義以訪問自定義程式。您會看到Google Fonts部分。
定製器中的Google字型
單擊該連結以訪問字型設定。按如下方式配置它們：
基本設定：為正文和標題以及任何按鈕配置預設字型。在下面的螢幕截圖中，您可以看到我為正文新增了一種易於閱讀的襯線字型，併為標題新增了一種更獨特的字型。
配置基本設定
高階設定：您可以在此處配置品牌（站點標題和描述）、導航（您的選單）、更詳細的內容和標題、側邊欄和頁尾。您還可以載入字型而不將它們分配給任何東西，這意味著您可以將它們新增到定製器中的任何自定義CSS。
字型載入：如果您不需要任何字型粗細（即粗體、斜體等），您可以在此處取消選中它們，以免它們不必要地減慢您的網站速度。
除錯：如果字型不能正常工作，使用它可以強制顯示任何字型。
花一些時間處理這些設定並在定製器中測試它們，以確保它們按您想要的方式工作。然後，當您對設定感到滿意時，單擊“釋出” 按鈕。不要在沒有單擊釋出的 情況下離開定製器，否則您將丟失所做的更改。
編輯字型顏色
該外掛的免費版本不允許您編輯字型的顏色。為此，您必須購買高階版本或使用定製器中的額外CSS選項。
返回定製器的主螢幕，然後單擊額外CSS選項卡。您將看到一個空白文字區域，您可以在其中新增自己的CSS。
要找到您需要設定樣式的元素，請選擇它並使用瀏覽器中的程式碼檢查器找出它已有的顏色樣式。
下面我使用的是谷歌瀏覽器，我已經定位了一個h1元素。
在Chrome中檢查您的程式碼
在我的WordPress主題中，它從body元素繼承了它的顏色。我想新增一些更具體的內容。在CSS的文字區域中，輸入元素的CSS和要使用的顏色。我的看起來像這樣：
h1 {
color: #f542f5;
}
這給了我一個亮粉色的h1元素：
改變標題的顏色
您可以對要為其新增顏色的任何文字元素重複此操作，也可以對要新增其他螢幕選項中未包含的自定義字型的任何文字元素重複此操作。如果您想知道字型使用什麼CSS，請繼續閱讀本文中有關通過CSS修改字型的部分。
如何手動新增Web字型
如果您不想向您的站點新增額外的外掛並且不想訪問您的主題的程式碼，您可以通過向您的函式檔案和樣式表新增一些程式碼來安裝和使用網路字型。
如果您的站點使用您可以編輯的定製主題，那麼您可以從您的主題編輯功能檔案和樣式表。但是，如果您使用的是從WordPress主題目錄購買或獲得的第三方主題，那麼您需要建立一個子主題。然後你需要給它兩個檔案：functions.php和style.css。
讓我們完成將Web字型手動新增到您的主題的過程。在這個例子中，我將使用Google Fonts，因為它是最常用的，而且是免費的。
選擇字型並獲取連結
首先從Google Fonts中選擇您的字型。單擊旁邊的加號圖示，將其新增到您的庫中。
單擊庫螢幕底部的選項卡，您將看到一些程式碼供您新增到您的網站。如果要新增額外的字型粗細和樣式，請單擊“自定義” 選項卡並選擇所需的字型。然後返回到嵌入選項卡。
不要完全複製程式碼：您將使用它，但不是在站點標題的 <head> 部分中呼叫字型，而是將字型排入佇列。這是在WordPress中執行此操作的正確方法。
相反，從嵌入字型部分，只複製字型的連結。
所以，就我而言，谷歌字型給了我這個程式碼：
<link href="https://fonts.googleapis.com/css?family=Raleway">
我只需要複製這一點：
https://fonts.googleapis.com/css?family=Raleway
將字型排入佇列
開啟您主題的函式檔案並新增以下內容，將我的字型連結替換為Google為您提供的連結：
function wbolt_add_google_fonts() {
wp_register_style( 'googleFonts', 'https://fonts.googleapis.com/css?family=Raleway');
wp_enqueue_style( 'googleFonts');
}
add_action( 'wp_enqueue_scripts', 'wbolt_add_google_fonts' );
這會將來自Google Fonts伺服器的樣式排入佇列。如果以後需要新增更多字型，可以在函式中新增新行或將其新增到同一行中，如下所示：
function wbolt_add_google_fonts() {
wp_register_style( 'googleFonts', 'https://fonts.googleapis.com/css?family=Merriweather|Raleway');
wp_enqueue_style( 'googleFonts');
}
add_action( 'wp_enqueue_scripts', 'wbolt_add_google_fonts' );
這將使Merriweather和Raleway字型入隊。
將字型新增到樣式表
這不會使字型在您的站點中工作：您仍然需要將其新增到主題的樣式表中。
在您的主題中開啟style.css檔案並新增程式碼以使用您的Web字型設定單個元素的樣式。確保在任何現有的字型CSS之後新增它，否則它可能會被覆蓋。
您設計的元素由您決定，但通常為正文元素使用清晰的字型，為標題使用更花哨的字型。
body {
font-family: 'Raleway', sans-serif;
}
h1, h2, h3 {
font-family: 'Merriweather', serif;
}
在上述情況下，頁面上的所有內容都將使用Raleway字型，除了h1、h2和h3元素將使用Merriweather。
現在，儲存您的樣式表並檢查您的站點以確保它按您的預期工作。如果新字型未顯示，請嘗試清除瀏覽器快取並檢查字型是否被樣式表中較低字型的任何樣式覆蓋。這就是為什麼在樣式表底部新增新樣式或用新樣式替換現有字型樣式（甚至更好）是個好主意的原因。
新增備用字型
有時可能有人訪問您的網站，但由於某種原因無法訪問網路字型檔案。也許他們的網路連線不良或使用的舊裝置無法呈現網路字型。或者您的網路字型提供商可能遇到技術問題。
出於這個原因，最好有一個備份到位。
您由Google字型提供的程式碼已經具有簡單指定serif或的備份sans-serif，但我們可以更進一步。
使用一種已安裝在您的訪問者機器上的 Web 就緒字型，然後包括僅serif或的第二個後備sans-serif，以防他們使用的移動裝置甚至沒有Web就緒字型。
返回到您的樣式表並編輯您的CSS，使其顯示如下內容：
body {
font-family: 'Raleway', Helvetica, sans-serif;
}
h1, h2, h3 {
font-family: 'Merriweather', Georgia, serif;
}
這意味著如果一切順利，訪問您網站的人將看到您的網路字型；但如果不是，他們會看到Helvetica或Georgia，否則，他們會看到瀏覽器能夠載入的任何serif和sans-serif字型。
在WordPress中託管您自己的字型
一些開發人員不喜歡使用Web字型，而是在自己的伺服器上託管字型，您可能就是其中之一。
這可能是出於多種原因中的一個或多個，包括安全性、效能或預算。
如果您擔心效能，可以通過多種方式優化Web字型的效能，本文稍後將介紹這些方式。但是，如果您決定沿著本地路線走，則需要知道如何去做。
為什麼要託管自己的字型？
使用網路字型通常更容易，並且可以為您提供更大的靈活性以及佔用更少的伺服器空間。但這並不意味著在某些情況下本地託管字型可能不太合適。
您可能希望在本地託管字型的原因包括：
您可能會發現可以解決其中的一些問題
- 出於安全原因，您可能不想從第三方提供商處獲取資源，因為您知道自己站點的安全由您控制。
- 您可能會發現使用第三方服務會影響您網站的效能。
- 您可能已經購買了一個字型檔案並想要使用它。確保您的許可包括網站使用以及印刷材料的使用。
- 您的站點可能在本地託管，例如在Intranet上，使用者在使用它時將無法訪問Web字型。
在哪裡可以找到可以在本地託管的字型
許多網路字型也可以下載用作本地託管字型，但您必須檢查許可證是否允許這樣做。在谷歌字型的情況下，這是允許的。
您還會發現有些字型不能作為Web字型使用，您可以自行下載和託管。您可以下載到計算機的任何字型檔案也可以上傳到您的網站並儲存在那裡。如果您需要使用無法作為Web字型使用的字型與您的品牌相關聯，這將是解決方案，但請確保您的許可證允許。
如何將本地託管的字型新增到您的WordPress網站
所以你知道你想在本地託管你的字型，你如何設定它？
該過程與使用網路字型不同。您必須將檔案上傳到您的站點，並在樣式表中連結到它們，而不必將它們排入您的函式檔案中。
下載並轉換字型
首先下載您要使用的字型。在Google Fonts中，您可以通過在檢視庫中的字型時單擊下載圖示來執行此操作。
從Google Fonts下載字型
在您的計算機上解壓縮字型檔案並刪除您不需要在您的站點上使用的任何字型粗細：上傳您不會使用的檔案是沒有意義的。
要在您的網站上使用，檔案需要採用.woff格式。如果不是（如果您從Google字型中獲得它們，則不會），您可以使用Convertio之類的服務來轉換它們。
將字型上傳到您的主題
現在將字型檔案上傳到您的主題，在wp-content/themes/themename，其中themename是您的主題資料夾。將任何字型檔案放在主題中自己的資料夾中是個好主意，例如，字型資料夾。
如果您正在使用第三方主題，請為您的字型檔案和樣式表建立一個子主題。
完成後，您需要將字型新增到樣式表中。
在CSS中新增字型
開啟主題的樣式表。
新增這樣的程式碼，用你自己的字型替換我用過的字型：
@font-face {
font-family: ‘Raleway';
src: url( “fonts/Raleway-Medium.ttf”) format(‘woff’); /* medium */
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: ‘Raleway';
src: url( “fonts/Raleway-Bold.ttf”) format(‘woff’); /* medium */
font-weight: bold;
font-style: normal;
}
@font-face {
font-family: ‘Merriweather';
src: url( “fonts/Merriweather.ttf”) format(‘woff’); /* medium */
font-weight: normal;
font-style: normal;
}
新增更多您需要的內容。請注意，如果您想使用字型的粗體、斜體等變體，您需要宣告每一個使用@fontface，然後為每個指定粗細或樣式，就像我在上面對Raleway所做的粗體和正常粗細一樣。
現在為您的元素新增樣式，就像使用網路字型時一樣：
body {
font-family: 'Raleway', Helvetica, sans-serif;
src: url( “/fonts/Raleway-Medium.ttf” );
}
h1, h2, h3 {
font-family: 'Merriweather', Georgia, serif;
}
您本地託管的字型現在將適用於您的主題。
如何更改WordPress中的字型
現在您知道如何通過兩種方式之一在WordPress站點中安裝字型。編輯它們怎麼樣？改變它們怎麼樣？
您可以通過以下三種方式之一編輯字型：通過定製器、在文章或頁面編輯螢幕中，或使用CSS。
讓我們看一下用於更改字型樣式、顏色和大小的每個選項。
如何更改WordPress中的字型樣式
如果您使用塊編輯器或經典編輯器，讓我們看看我們如何做到這一點。
在區塊編輯器中更改字型樣式 (Gutenberg)
如果您使用帶有古騰堡編輯器的最新版本的WordPress ，您可以在文章或頁面中編輯文字時更改文字的樣式。
選擇要編輯的塊，其上方將出現一個樣式選單。
古騰堡區塊樣式
選擇您要編輯的文字，然後單擊圖示將其設為粗體或斜體。如果單擊這些旁邊的箭頭，您將看到您還可以選擇刪除線。
古騰堡刪除線
在經典編輯器中更改字型樣式
如果您執行的是舊版WordPress或安裝了經典編輯器外掛，您還可以編輯字型樣式。（如果您不想要Gutenberg編輯器，最好更新WordPress並禁用Gutenberg。）
經典編輯器在主編輯窗格上方包含一個工具欄，您可以在其中更改文字樣式。如果您單擊其右側的工具欄切換圖示，您可以訪問更多選項，包括刪除線。
經典編輯器樣式工具欄
在定製器中更改字型樣式
如果要更改特定元素的字型樣式，可以通過向定製器新增手動CSS來實現。
開啟定製器並單擊“額外CSS”。這將開啟一個螢幕，您可以在其中輸入CSS。
定製器中的額外CSS
現在您可以在框中為您的字型輸入CSS。因此，如果您想將所有h1和h2元素更改為斜體，您可以新增以下CSS：
h1, h2 {
font-style: italics;
}
更改樣式表中的字型樣式
如果您願意在樣式表中新增程式碼，這是一種更好的方法。
如果您使用第三方主題，請為您自己的樣式建立子主題，否則更新主題時所做的任何更改都將丟失。您必須在子主題中建立一個樣式表來告訴 WordPress 這是一個子主題：這是您放置新字型樣式的地方。
如果您使用自己的主題，則可以在自己的樣式表中編輯和修改 CSS。該檔案是style.css ，您可以在wp-content/themes 的主題資料夾中找到它。
在樣式表的末尾新增任何字型樣式，這樣它就不會被已有的任何東西抵消。或者更好的是，刪除並覆蓋任何現有的字型樣式，除非您想保留它。
使用font-weight更改元素的粗細：
span.featured {
font-weight = bold;
}
使用font-style更改元素的樣式：
span.featured {
font-style = italic;
}
使用text-alignment更改對齊方式：
span.featured {
text-alignment: center;
}
如何更改WordPress中的字型顏色
您可能想要進行的另一項更改是更改站點中某些文字的顏色。小心不要過度使用：您的主題設計的顏色可以很好地協同工作，如果新增太多顏色，它可能看起來花哨且不專業。
在Gutenberg中更改字型顏色
古騰堡文字塊可讓您編輯文字顏色和背景。為此，請開啟要修改的塊，然後單擊螢幕右側區塊部分中的顏色設定選項卡。
顏色設定選項卡
從這裡您可以編輯文字塊的背景顏色和文字顏色。
區塊中的自定義顏色
請注意，如果您使用的顏色組合不利於可訪問性，WordPress會警告您，例如在我上面使用的示例中。避免過度使用顏色的誘惑 – 畢竟您選擇了主題是因為它的顏色設計適合您的網站，並且新增更多顏色會使它看起來很花哨。
如果您單擊“顏色設定”選項卡下方的“高階” 選項卡，您還可以向該塊新增一個類，然後您可以在定製器或樣式表中為其設定樣式。因此，例如，如果您.featured在塊中新增了一個類，則可以使用該類對其進行樣式設定。
在經典編輯器中更改字型顏色
經典編輯器的工具欄可讓您更改所選文字的顏色。因此，您可以選擇單個單詞並更改其顏色。下面我把一句話變成了紅色。
在經典編輯器中更改顏色
雖然從理論上講，這確實為您提供了足夠的靈活性，但請注意過度使用它。如果您開始為文字新增更多顏色，可能會導致網站難以閱讀且不利於可訪問性。
在定製器中更改字型顏色
如果您的主題包括更改網站配色方案的選項，這是最好的地方。
例如，在下面的站點中，我使用的主題允許我為整個主題選擇新的配色方案。這有助於確保新顏色可以很好地協同工作並保持連貫。
在定製器中編輯配色方案
此選項將根據您的主題而有所不同 – 有些主題允許您定位標題、連結和其他元素並更改它們的顏色。
如果您想針對特定元素更改其顏色，但這不是您的主題的選項，您可以在定製器中新增CSS來執行此操作。
選擇“自定義”>“額外CSS”，然後在文字框中鍵入您的CSS。
例如，如果要更改h1標題的顏色，請鍵入：
h1 {
color: #564534;
}
如果這不起作用，您可能需要新增更具體的CSS。在我的主題中，站點標題連結的顏色是使用#site-titleID編碼的，因此我需要新增以下CSS：
#site-title a {
color: #564534;
}
額外CSS – 顏色
用你自己的顏色替換我上面使用的顏色。
如果您對更改感到滿意，請單擊“釋出” 按鈕。
更改樣式表中的字型顏色
與字型樣式一樣，您還可以編輯主題的樣式表（或建立子主題）以更改字型顏色。
用顏色改變顏色。下面我將使用以下body元素更改我網站文字的主要顏色：
body {
color = #222222;
}
確保覆蓋相同元素的任何現有樣式，並且如果您希望它們具有不同的顏色，則還為繼承該樣式的任何元素設定樣式。所有文字都將繼承body元素的顏色，除非它有自己的樣式。
在WordPress中更改字型大小
出於可訪問性的原因，您可能決定希望字型比主題中的預設字型大。或者，例如，您可能認為小部件區域中的標題太小。
在古騰堡中更改字型大小
使用古騰堡編輯器，您可以更改每個區塊內文字的大小。
選擇塊，然後單擊螢幕右側區塊選單中的文字設定選項卡。您可以將區塊中的文字變小或變大，如下所示。
在Gutenberg中編輯字型大小
小心這樣做太多：如果頁面上的所有段落大小不同，它看起來會脫節並且難以閱讀。
在經典編輯器中更改字型大小
經典編輯器不提供選擇特定文字和更改其大小的選項：因此，如果您確實需要此功能，則需要升級到Gutenberg。對不起！
在定製器中更改字型大小
根據您的主題，您可以選擇在定製器中更改字型大小，更改整個站點的字型大小或定位標題和正文文字。
如果您的主題不包含用於更改字型大小的定製器選項，但您可以使用附加 CSS 選項。轉到“自定義”>“額外CSS”， 然後在框中鍵入CSS。
下面我使用這個CSS使小部件區域中的標題更大：
h2.widget-title {
font-size: 3em;
}
使用額外CSS設定字型大小
也許這有點太大了，但它為您提供了總體思路。
更改樣式表中的字型大小
更改樣式表中字型的大小與更改字型的任何其他樣式的方式類似。
如果要更改站點中所有文字的大小，可以使用以下body元素：
body {
font-size: 14px;
}
對於body您使用畫素的元素，但對於您使用的其他元素em，大小是相對於body元素的大小。
h1,
#site-title {
font-size: 2em;
}
請記住，如果您要對主題樣式表中的字型進行更改，請先在開發或測試環境站點上對其進行測試，以免冒破壞實時站點的風險。
如何在WordPress中優化字型
無論您使用的是網路字型還是本地託管的字型，盡一切努力優化您的字型都是有意義的。
在這裡，我將為您提供一些優化字型的技巧，包括速度和設計。
優化字型以提高效能
如果您在您的網站上使用網路字型，您會希望盡其所能確保它們儘快交付到您的頁面，並且它們託管在其他地方的事實不會減慢速度。
- 使用快取確保頁面不需要在每次載入時重新構建。
- 使用使用內容交付網路或CDN交付字型的Web字型提供商。Google Fonts就是這樣做的，它加快了字型的交付。
- 只使用您需要的那些字型。不要將您不會在樣式表中使用的字型（粗細、樣式）變體排入佇列。如果您以後發現需要它們，您可以隨時新增它們。
- 如果使用網路字型，請確保將它們正確排入佇列。不要在樣式表中使用@import行，即使這是您的網路字型提供商告訴您的。
- 手動新增CSS時，請將其新增到主題的樣式表中，而不是新增到header.php檔案的<head>部分。這就是為什麼最好將CSS手動編碼到您的主題中而不是使用定製器或塊的更好做法的原因之一，因為這兩者都會將內聯CSS新增到頁面而不是將其新增到樣式表。
- 考慮使用CSS內聯將頁面載入時間減少幾毫秒。這是一個使用base64編碼的過程，在載入之前將樣式表中的CSS新增到頁面中，從而使瀏覽器不必載入額外的檔案。考慮到上面關於不要編寫內聯CSS的建議，這似乎有悖常理，但它仍然可以從單獨的CSS檔案中執行，並不意味著手動編碼內聯CSS。如果您正在載入多種字型，內聯可以稍微加快您的網站速度。
- 使用合併來減小樣式表的大小。
- 如果您在本地託管字型，請僅上傳您需要的字型和字型粗細和樣式的檔案。僅使用@font-face宣告新增您需要的那些變體。
- 考慮使用CDN來託管您自己的字型，而不是將它們託管在您自己的伺服器上。
- 託管您自己的字型時，請包含其他格式：woff2、woff、ttf和eot。然後瀏覽器可以選擇載入速度最快的版本。
- 如果您為站點標題使用不同的字型，請僅將您需要的字元而不是整個字型庫放入佇列。
因此，如果您的站點標題是Wbolt，您可以通過如下所示的樣式表來提高效能：
function wbolt_add_title_font() {
wp_register_style( 'googleFonts', ‘https://fonts.googleapis.com/css?family=Raleway&text=“wbolt');
wp_enqueue_style( 'googleFonts');
}
add_action( 'wp_enqueue_scripts', 'wbolt_add_title_font' );
優化設計字型
除了優化字型的效能外，確保它們在視覺上得到優化也很有意義：它們與您的網站設計和離線材料非常吻合。
如果您使用外掛或子主題在已與主題捆綁的字型之上新增額外字型，則尤其如此。如果太多顏色和樣式的字型太多，您的主題可能會看起來很亂。
在向站點新增額外字型之前，請考慮以下事項：
- 新字型是否與您現有的字型一致？它們是否傳達了相似的風格或情緒？
- 如果您需要匹配已用於印刷材料的字型但不能使用與網路字型相同的字型，請嘗試在Google Fonts上找到儘可能接近的匹配項。
- 您選擇的字型是否與您的品牌一致？如果您經營的是一家嚴肅的企業，則不想使用Comic Sans（事實上，無論您執行的是哪種網站，您都不想使用Comic Sans）。
- 如果您要更改字型的顏色，請嘗試使用主題設計中已有的顏色或與它們協調的顏色。新增太多顏色會使您的網站看起來花哨且不專業。
- 如果您想在Google Fonts上挑選一對字型，請嘗試使用fontpair之類的服務來找到兩個可以很好地協同工作的字型。
您在設計中使用的字型會對訪問者在訪問您的網站時的印象產生影響。確保您已經考慮過這一點並選擇了可以強化您的品牌的字型。
使用可變字型
可變字型是一種新型字型，可以更高效地向您的網站新增更多字型。
它們允許在一個字型檔案中儲存更多資訊，因此如果您想要字型的變化（粗體、斜體等），您不必載入多個字型檔案，而只需載入一個。
對於具有多種字型粗細、樣式和傾斜度的字型，這可以節省大量檔案空間，並使字型入隊或通過@fontface新增的過程變得更容易。
最新版本的Chrome、Edge、Firefox和Safari支援可變字型，但較舊的瀏覽器不支援；因此，如果您確實使用它們，則需要回退。而且目前可用的可變字型並不多。Google Fonts不包含任何內容，但Google確實支援該規範，因此隨著時間的推移很可能會新增它們。
字型開發人員正在努力建立更多可變字型並提高其可靠性，因此值得關注進展，以便您可以使用可變字型在字型變得更穩定後對其進行優化。
小結
更改WordPress網站上的字型並不是一項簡單的任務。您有不同的選擇：
- 通過安裝外掛使用網路字型。
- 通過將Web字型編碼到您的主題中並將它們排入佇列來使用它們。
- 託管您的字型。
然後，您應該專注於如何優化字型以獲得更好的效能。如果您按照本指南中的提示進行操作，您不僅應該能夠更改WordPress中的字型，而且還可以在主題中更好地控制它們。
評論留言