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