如何在WordPress中更改字體(以及更改大小,顏色,優化)

字體可以使枯燥的網站與美觀的網站有所不同。通過學習如何在WordPress中更改字體,您可以使您的網站看起來現代,專業和品牌化。

但是,在WordPress網站中使用字體的最佳方法是什麼,以及如何為設計選擇正確的字體?

在本指南中,我將向您介紹有關WordPress字體所需的所有知識。您將了解:

只需移至Kinsta,即可將WordPress網站的速度提高200%。
        
          今天免費遷移
        
      
    
  
字體:術語

首先,我們來看一下網路上字體的術語。

  • Web字體是託管在第三方網站上並鏈接到您的網站的字體。
  • 本地託管的字體就是這些字體(託管在您網站的伺服器上)。

  • 網路安全字體是(幾乎)所有計算機上預先安裝的有限字體,您可以確信所有訪問者都可以訪問。

讓我們看一下將字體添加到您的網站的選項。

如何將字體添加到您的WordPress網站(選項)

在開始向網站添加字體之前,如果您了解可用的選項會有所幫助。

字體是您網站設計的一部分,因此在大多數情況下,字體將通過您的主題進行編碼-但並非總是如此。在某些情況下,您可能決定使用插件來在您的站點中啟用更大範圍的字體。

以下是一些可用的選項:

  • 通過安裝可訪問的插件來使用網路字體(例如Google字體)。
  • 通過將網路字體編碼到主題中並將它們放入隊列來使用網路字體(聽起來並不那麼棘手)。
  • 將字體託管在自己的網站上,然後將其添加到主題中。

有兩個主要區別–是使用網站站點託管的Web字體,還是選擇自己託管字體文件。在本指南中,我們將探討每種方法的優缺點。

讓我們從研究網路字體開始:為什麼您會選擇使用它們以及將它們添加到您的網站的方式。

在WordPress中使用網路字體

Web字體是將字體添加到您的網站的最流行的方法,因為它們使添加各種字體變得容易。

什麼是網路字體?

網路字體是託管在第三方提供商的網站上的字體。您無需鏈接文件到您自己的站點,而是鏈接到提供商的網站,然後從那裡將文件拉入。

這意味著您可以訪問各種字體,而不必在自己的主機上使用伺服器空間。這也意味著,如果字體文件應隨時間而變化,則無需更新文件,並且可以從提供商處自動訪問文件的新版本。

Web字體可以是免費的,也可以付費(通常通過訂閱)。一些受歡迎的提供商是:

  • Google字體。免費網路字體的最大提供商。您還可以將其所有字體下載到計算機上,這意味著,如果要使用與網站相同的字體來創建離線資料,則可以。而且全部免費。

  • Adobe Edge Web字體。這些也是免費的。儘管它們旨在與Adobe產品一起使用,但它們可以在任何網站上正常運行。

  • Fonts.com是字體的高級提供商,如果您必須將網路字體與印刷材料中的字體進行匹配,並且免費提供商無法提供該字體,則可能需要使用該字體。

  • fontfabric是提供高級字體以用作網路字體和在線使用的字體設計師。您需要支付這些費用,但是比起使用Google字體,您可以獲得更多的個性。

Google字體

Google字體

所有這些提供商都可以通過向您的WordPress網站添加一些代碼,或者有時通過使用一個插件來直接從其伺服器提供字體,這意味著您不必添加任何代碼。

網路字體與網路安全字體不同。您可以將它們用作網路字體的備用,以防萬一您的網站訪問者由於某種原因而無法連接到網路字體。在這篇文章的後面,我將向您展示如何做到這一點。

為什麼要使用網路字體?

因此,現在您知道什麼是網路字體,為什麼您選擇使用它們而不是託管自己的字體?

這裡有一些好處:

  • 輕鬆:添加幾行代碼或安裝插件比下載和上傳字體文件更快,並且如果將來決定更改字體,則更容易。
  • 字體範圍:有成千上萬種字體可以用作網路字體,並且列表一直在增長。
  • 更新:如果字體文件需要更新,可能要添加可變字體(不久之後會添加更多字體)或添加其他字元,則您的網站無需任何操作即可訪問新版本。

大多數網站使用網路字體,並使用網路安全字體作為備份。藉助WordPress,這非常容易做到。

尋找適合您網站的最佳網路字體

決定要使用網路字體後,您現在面臨一個艱難的決定:要使用哪種字體?

在過去所有Web開發人員都可以訪問的是那些預先安裝的Web安全字體的過去,這是一個非常容易的決定。您要使用襯線字體還是無襯線字體? (Serif字體在每個字元的較大筆畫結尾處都有少許線條或筆畫,而sans-serif字體則沒有。)做出此決定後,您的選擇非常有限。

但是現在,世界就是你的牡蠣。

以下是一些技巧,可幫助您選擇適合您網站的最佳字體:

  • 查看您的印刷材料。是否有已經在使用的字體可以用作網路字體?如果沒有,您能找到類似的東西嗎?
  • 查看競爭對手的網站。他們使用哪種字體?我不建議您複製它們,但是某些樣式可能會向您的網站用戶傳達正確的圖像。
  • 考慮一下您想用字體傳達什麼樣的心情。一些字體看起來更現代,另一些字體則更傳統。有些很有趣,有些更嚴重。
  • 堅持使用易於閱讀的正文文本字體,並根據需要使用更有趣的字體作為標題。
  • 從最受歡迎的Google字體中進行選擇-網站訪問者會熟悉這些字體並且易於閱讀。

選擇字體後,請花點時間嘗試一下。諸如Google字體之類的字體提供程序可讓您鍵入自定義文本,以查看所選字體的外觀。在字體中看到自己的文字後,它可能會幫助您確定該字體是否適合您。

試用您的字體

試用您的字體

請記住,使用網路字體可以非常輕鬆地更改字體,因此在開發主題或設置網站時始終可以切換到其他選項。

如何使用WordPress插件添加Web字體

因此,您已經選擇了字體,現在是時候將其添加到您的網站了。

如果您不願意在主題文件中添加代碼,則可以安裝一個插件,該插件可讓您訪問Google字體並使用網站上所需的任何字體。

Google字體排版插件可讓您訪問整個Google字體庫,並讓您通過WordPress自定義程序對其進行查看。

就像其他任何插件一樣,將插件安裝在您的站點上,然後將其激活。

轉到外觀>自定義以訪問定製器。您會看到「 Google字體」部分。

Customizer中的Google字體

Customizer中的Google字體

單擊該鏈接以訪問字體設置。如下配置它們:

基本設置:為您的正文和標題以及任何按鈕配置默認字體。在下面的屏幕截圖中,您可以看到我為正文添加了易於閱讀的襯線字體,為標題添加了更具特色的字體。

配置基本設置

配置基本設置

高級設置:您可以在此處配置商標(站點標題和說明),導航(菜單),內容和標題(側邊欄和頁腳)更詳細。您還可以載入字體而無需將它們分配給任何內容,這意味著您可以將它們添加到定製程序中的任何自定義CSS中。

字體載入:如果您不需要任何字體粗細(即粗體,斜體之類的東西),則可以在此處取消選中它們,以免不必要地降低網站速度。

調試:如果字體無法正常工作,請使用該選項強制顯示所有字體。

花一些時間使用這些設置,並在定製程序中對其進行測試,以確保它們按照您想要的方式工作。然後,如果對設置滿意,請單擊發布按鈕。請勿在未單擊發布的情況下離開定製器,否則您將丟失更改。

編輯字體顏色

免費版本的插件無法讓您編輯字體的顏色。為此,您必須購買高級版本或使用定製程序中的其他CSS選項。

返回定製器的主屏幕,然後單擊其他CSS選項卡。系統會顯示一個空白文本區域,您可以在其中添加自己的CSS。

要查找您需要設置樣式的元素,請選擇它,然後使用瀏覽器中的代碼檢查器找出它已經具有的顏色樣式。

在下面,我使用的是Google Chrome瀏覽器,並且定位了h1元素。

在Chrome中檢查您的代碼

在Chrome中檢查您的代碼

在我的WordPress主題中,它是從body元素繼承其顏色的。我想添加更具體的內容。在CSS的文本區域中,為元素和要使用的顏色鍵入CSS。我的看起來像這樣:

h1 {
 顏色:#f542f5;
}

這給了我明亮的粉紅色h1元素:

如何在WordPress中更改字體:更改標題的顏色

更改標題的顏色

您可以對要添加顏色的任何文本元素重複此操作,也可以對要添加自定義字體的任何其他文本元素重複此操作,其他屏幕選項中均未包含。如果您想知道要使用哪種CSS字體,請繼續閱讀本文中有關通過CSS修改字體的部分。

如何手動添加Web字體

如果您不想在網站上添加額外的插件並且可以訪問主題代碼,則可以通過向功能文件和樣式表中添加一些代碼來安裝和使用網路字體。

如果您的站點使用可以定製的主題,則可以從主題中編輯功能文件和樣式表。但是,如果您使用的是從WordPress主題目錄中購買或獲得的第三方主題,則需要創建一個子主題。然後您需要為其提供兩個文件:functions.php和style.css。

讓我們完成將網路字體手動添加到主題的過程。在本示例中,我將使用Google字體,因為它是最常用的並且是免費的。

選擇字體並抓住鏈接

首先從Google字體中選擇您的字體。通過單擊旁邊的加號圖標將其添加到您的媒體庫中。

點擊您的媒體庫屏幕底部的標籤,您會看到一些代碼供您添加到您的網站。如果要添加額外的字體粗細和樣式,請單擊“自定義''選項卡並選擇所需的字體和樣式。然後返回到嵌入選項卡。

請勿完全複製代碼:將使用代碼,而不是在代碼中調用字體 網站標題的「部分」,則將字體排入隊列。這是在WordPress中執行此操作的正確方法。

而是從「嵌入字體」部分,僅將鏈接複製到字體。

因此,就我而言,Google字體為我提供了以下代碼:

我只需要複製一下:

https://fonts.googleapis.com/css?family=Raleway
使字體入隊

打開主題的功能文件並添加以下內容,將我字體的鏈接替換為Google為您提供的鏈接:

函數kinsta_add_google_fonts(){
 wp_register_style('googleFonts','https://fonts.googleapis.com/css?family=Raleway');
 wp_enqueue_style('googleFonts');
}
add_action('wp_enqueue_scripts','kinsta_add_google_fonts');

這將從Google字體伺服器中獲取樣式。如果以後需要添加更多字體,則可以在函數中添加新行,也可以將其添加到同一行中,如下所示:

函數kinsta_add_google_fonts(){
 wp_register_style('googleFonts','https://fonts.googleapis.com/css?family=Merriweather|Raleway');
 wp_enqueue_style('googleFonts');
}
add_action('wp_enqueue_scripts','kinsta_add_google_fonts');

這將使Merriweather和Raleway字體同時入隊。

將字體添加到樣式表

這還不能使字體在您的網站上正常工作:您仍然需要將其添加到主題的樣式表中。

打開主題中的style.css文件,並添加代碼以使用Web字體設置單個元素的樣式。確保將其添加到任何現有的字體CSS之後,否則它可能會被覆蓋。

您可以根據自己的喜好來設置樣式,但是通常在body元素上使用清晰的字體,而在標題上使用更精美的字體。

身體 {
 字體家族:「 Raleway」,無襯線;
}

h1,h2,h3 {
 字體家族:「 Merriweather」,襯線;
}

在上述情況下,頁面上的所有內容都將使用Raleway字體,但h1,h2和h3元素除外,後者將使用Merriweather。

現在,保存您的樣式表並檢查您的站點,以確保所有功能均按預期工作。如果未顯示新字體,請嘗試清除瀏覽器緩存,並檢查樣式表中下方的字體是否被任何樣式所覆蓋。這就是為什麼最好在樣式表的底部添加新樣式或將現有字體樣式替換為新樣式(甚至更好)的原因。

添加備份字體

有時候,有人會訪問您的網站,但由於某些原因而無法訪問網路字體文件。也許他們的連接狀況不佳或使用了無法渲染網路字體的舊設備。也許您的網路字體提供商遇到技術問題。

因此,最好有一個備份。

通過Google字體提供的代碼已經有了備份,只需指定serifor sans-serif,但是我們可以做得更多。

使用訪客機器上已經安裝的一種可用於網路的字體,然後包括serifor sans-serif的第二個備用字體,以防萬一他們使用的是甚至沒有網路的移動設備。準備好的字體。

返回您的樣式表並編輯CSS,這樣它會顯示以下內容:

身體 {
 字體家族:「 Raleway」,Helvetica,無襯線;
}

h1,h2,h3 {
 字體家族:「 Merriweather」,喬治亞州,襯線;
}

這意味著只要一切正常,訪問您網站的用戶就會看到您的網路字體。但如果不是,他們將看到Helvetica或Georgia,否則,他們將看到瀏覽器能夠載入的任何襯線和無襯線字體。

在WordPress中託管自己的字體

一些開發人員不喜歡使用Web字體,而是將字體託管在自己的伺服器上,您可能是其中之一。

這可能是出於多種原因中的一種或多種,​​包括安全性,性能或預算。

如果您擔心性能,則可以通過多種方式來優化網路字體的性能,這將在本文後面介紹。但是,如果您決定沿著當地路線行駛,則需要知道如何操作。

為什麼要託管自己的字體?

使用Web字體通常更容易,並且可以為您提供更大的靈活性,並佔用更少的伺服器空間。但這並不意味著在任何情況下本地託管字體都不太合適。

您可能要在本地託管字體的原因包括:

您可能會發現您可以解決其中的一些問題

  • 出於安全原因,您可能不希望從第三方提供商那裡獲取資源,因為您知道自己網站的安全性是由您控制的。
  • 您可能會發現使用第三方服務會影響您網站的性能。
  • 您可能已經購買了字體文件並想要使用它。確保您的許可包括網站使用和印刷材料使用。
  • 您的網站可能託管在本地,例如在Intranet上,並且用戶在使用時將無法訪問網路字體。

在哪裡可以找到可以在本地託管的字體

也可以下載許多網路字體以用作本地託管的字體,但是您必須檢查許可證是否允許這樣做。如果是Google字體,則允許使用。

您還會發現有些字體無法作為網路字體下載和託管。您可以下載到計算機的任何字體文件也可以上傳到您的網站並存儲在該網站中。如果您需要使用無法作為網路字體使用的字體來與您的品牌搭配,那麼這將是解決方案,但請確保您的許可證允許。

如何將本地託管的字體添加到您的WordPress網站

因此,您知道要在本地託管字體,如何進行設置?

該過程與使用網路字體不同。您必須將字體文件上傳到您的站點,然後在樣式表中鏈接到它們,而不必將它們排隊在功能文件中。

下載並轉換字體

首先下載要使用的字體。在Google字體中,您可以通過在庫中查看字體時單擊下載圖標來實現。

如何在WordPress中更改字體:從Google字體下載字體

從Google字體下載字體

在計算機上解壓縮字體文件,並刪除您不需要在網站上使用的字體粗細:上傳不需要的文件毫無意義。

要在您的網站上使用,文件必須為.woff格式。如果不是(如果您從Google字體獲得它們,則不會),可以使用Convertio之類的服務來轉換它們。

將字體上傳到您的主題

現在將字體文件以wp-content / themes / themename上載到主題,其中themename是主題的文件夾。最好將所有字體文件放在主題中它們自己的文件夾中,例如,字體文件夾。

如果您使用的是第三方主題,請為字體文件和樣式表創建子主題。

完成此操作後,您需要將字體添加到樣式表中。

在CSS中添加字體

打開您主題的樣式表。

添加這樣的代碼,用我自己的字體替換:

@ font-face {
 font-family:「 Raleway」;
 src:url(「 fonts / Raleway-Medium.ttf」)format('woff'); / *中* /
 font-weight:正常;
 字體樣式:正常;
}

@ font-face {
 font-family:「 Raleway」;
 src:url(「 fonts / Raleway-Bold.ttf」)format('woff'); / *中* /
 font-weight:粗體;
 字體樣式:正常;
}

@ font-face {
 字體家族:「 Merriweather」;
 src:url(「 fonts / Merriweather.ttf」)format('woff'); / *中* /
 font-weight:正常;
 字體樣式:正常;
}

添加您需要的更多內容。請注意,如果要使用字體的粗體,斜體等變體,則需要使用@fontface聲明每個字體,然後為每種字體指定粗細或樣式,就像我之前在Raleway中對粗體和普通字體所做的那樣重量。

現在,就像使用網路字體時一樣,為元素添加樣式:

身體 {
 字體家族:「 Raleway」,Helvetica,無襯線;
 src:url(「 /fonts/Raleway-Medium.ttf」);
}

h1,h2,h3 {
 字體家族:「 Merriweather」,喬治亞州,襯線;
}

您本地託管的字體現在可以與您的主題一起使用。

如何在WordPress中更改字體

現在,您知道了如何通過以下兩種方法之一在WordPress網站中安裝字體。如何編輯它們?改變它們呢?

您可以通過以下三種方式之一來編輯字體:通過「定製器」,在帖子或頁面編輯屏幕中或使用CSS。

讓我們看一下這些用於更改字體樣式,顏色和大小的選項。

如何在WordPress中更改字體樣式

讓我們看看如果您使用「塊編輯器」或「經典編輯器」,我們將如何做到這一點。

在塊編輯器(Gutenberg)中更改字體樣式

如果您在Gutenberg編輯器中使用的是WordPress的最新版本,則可以在帖子或頁面中編輯文本時更改其樣式。

選擇要編輯的塊,樣式菜單將顯示在其上方。

如何在WordPress中更改字體:Gutenberg塊樣式

古騰堡塊樣式

選擇要編輯的文本,然後單擊圖標使其變為粗體或斜體。如果您點擊旁邊的箭頭,則會看到您也可以選擇刪除線。

古騰堡的突圍

古騰堡的突圍

在經典編輯器中更改字體樣式

如果您運行的是WordPress的舊版本,或者已安裝了經典編輯器插件,則還可以編輯字體樣式。 (如果您不希望使用Gutenberg編輯器,最好更新WordPress並禁用Gutenberg。)

經典編輯器在主編輯窗格上方包括一個工具欄,您可以在其中更改文本樣式。如果單擊右側的「工具欄切換」圖標,則可以訪問更多選項,包括刪除線。

經典編輯器樣式工具欄

經典編輯器樣式工具欄

在定製器中更改字體樣式

如果要更改特定元素的字體樣式,可以通過向定製器中添加手動CSS來實現。

打開定製程序,然後單擊其他CSS。這將打開一個屏幕,您可以在其中鍵入CSS。

定製程序中的其他CSS

定製程序中的其他CSS

現在,您可以在框中輸入CSS作為字體。因此,如果您想將所有h1和h2元素都更改為斜體,則可以添加以下CSS:

h1,h2 {
 字體樣式:斜體;
}
在樣式表中更改字體樣式

如果您願意在樣式表中添加代碼,這是一種更好的方法。

如果您使用的是第三方主題,請為您自己的樣式創建一個子主題,否則在更新主題時所做的任何更改都會丟失。您必須在子主題中創建一個樣式表,以告訴WordPress這是一個子主題:在此處放置新的字體樣式。

如果您使用自己的主題,則可以在自己的樣式表中編輯和修改CSS。該文件為style.css,您可以在主題文件夾中的wp-content / themes中找到它。

藉助WordPress,我們的流量增長了1,187%。我們將向您展示方法。
加入20,000多個其他人,這些人每周都會收到有關WordPress內部技巧的新聞!

          現在訂閱
        
        
          
            
            成功!感謝您的訂閱

您將在一周內收到下一期的Kinsta新聞通訊。

訂閱Kinsta新聞通訊
        

  
    
  

    訂閱
  

  
    
  
    
      
        
      
      
      我同意條款和條件以及隱私政策

在樣式表的末尾添加任何字體樣式,以免被已有的樣式抵消。甚至更好的是,刪除並覆蓋任何現有的字體樣式,除非您要保留它。

使用font-weight更改元素的權重:

span.featured {
 font-weight =粗體;
}

使用font-style更改元素的樣式:

span.featured {
 字體樣式=斜體;
}

用文本對齊方式更改對齊方式:

span.featured {
 文字對齊:居中;
}

如何在WordPress中更改字體顏色

您可能要進行的另一項更改是更改網站中某些文本的顏色。當心不要過度這樣做:您的主題已設計為可以很好地配合使用的顏色,如果添加過多的顏色,則它看起來會顯得花哨且不專業。

在古騰堡更改字體顏色

古騰堡文本塊可讓您編輯文本的顏色和背景。為此,請打開要修改的色塊,然後單擊屏幕右側色塊部分中的顏色設置選項卡。

顏色設置選項卡

顏色設置選項卡

在這裡,您可以編輯文本塊的背景顏色和文本顏色。

自定義顏色

自定義顏色

請注意,如果您使用的顏色組合對可訪問性不利,則WordPress會警告您,例如上面我所使用的示例。避免過度選擇顏色的誘惑–畢竟,您選擇主題是因為主題的顏色設計適合您的網站,添加更多顏色可能會使它顯得花哨。

如果單擊顏色設置選項卡下的高級選項卡,還可以向該模塊添加一個類,然後可以在定製器或樣式表中對其進行樣式設置。因此,例如,如果您在塊中添加了.featured類,則可以使用該類為其設置樣式。

在經典編輯器中更改字體顏色

舊版編輯器的工具欄可讓您更改所選文本的顏色。因此,您可以選擇一個單詞並更改其顏色。在下面,我將句子改為紅色。

在經典編輯器中更改顏色

在經典編輯器中更改顏色

從理論上講,儘管這樣做確實可以為您提供足夠的靈活性,但請注意不要過度使用它。如果您開始為文本添加更多顏色,則可能會導致該網站難以閱讀且對可訪問性不利。

在定製器中更改字體顏色

如果您的主題包含用於更改網站配色方案的選項,那麼這是最佳選擇。

例如,在下面的站點中,我使用的主題使我可以為整個主題選擇新的配色方案。這有助於確保新顏色能夠很好地協同工作並保持一致。

在定製程序中編輯配色方案

在定製程序中編輯配色方案

不同的選項會根據您的主題而有所不同-一些主題可讓您定位標題,鏈接和其他元素並更改其顏色。

如果您想定位特定元素以更改其顏色,但是主題不支持此選項,則可以在「定製器」中添加CSS來實現。

選擇「定製」>「其他CSS」,然後在文本框中鍵入您的CSS。

例如,如果要更改h1headings的顏色,請鍵入以下內容:

h1 {
 顏色:#564534;
}

如果這樣不起作用,則可能需要添加更多特定的CSS。在我的主題中,網站標題鏈接的顏色是使用#site-titleID編碼的,因此我需要添加以下CSS:

#site-title a {
 顏色:#564534;
}

附加CSS-顏色

其他CSS –顏色

用您自己的顏色替換上面使用的顏色。

如果對更改感到滿意,請單擊發布按鈕。

在樣式表中更改字體顏色

與字體樣式一樣,您也可以編輯主題的樣式表(或創建子主題)以更改字體顏色。

用顏色更改顏色。在下面,我使用body元素更改網站文字的主要顏色:

身體 {
 顏色=#222222;
}

確保您覆蓋相同元素的任何現有樣式,並且如果希望它們具有不同的顏色,則還對所有繼承該樣式的元素進行樣式設置。除非具有自己的樣式,否則所有文本都將繼承主體元素的顏色。

在WordPress中更改字體大小

出於可訪問性的原因,您可能決定希望字體大於主題中默認的字體。例如,或者您可能會確定小部件區域中的標題太小。

在古騰堡更改字體大小

使用古騰堡(Gutenberg)編輯器,您可以更改每個塊中文本的大小。

選擇塊,然後在屏幕右側的「塊」菜單中單擊「文本設置」選項卡。您可以使塊中的文本變小或變大,如下所示。

在古騰堡中編輯字體大小

在古騰堡(Gutenberg)中編輯字體大小

提防這樣做太多:如果頁面上所有段落的大小都不同,它將看起來不連貫並且難以閱讀。

在經典編輯器中更改字體大小

傳統編輯器不提供選擇特定文本並更改其大小的選項:因此,如果您確實需要此功能,則需要升級到古騰堡。抱歉!

在定製器中更改字體大小

根據您的主題,您可以選擇更改「定製程序」中的字體大小,或者更改整個網站的字體大小,或者更改標頭和正文。

如果您的主題沒有包含用於更改字體大小的定製器選項,但是您可以使用其他CSS選項。轉到“自定義''>“其他CSS'',然後在框中鍵入CSS。

下面,使用此CSS,使小部件區域中的標題變大:

h2.widget-title {
字型大小:3em;
}

使用其他CSS設置字體大小

使用其他CSS設置字體大小

也許太大了,但可以讓您大致了解。

在樣式表中更改字體大小

更改樣式表中字體的大小與更改字體的任何其他樣式類似。

如果要更改站點中所有文本的大小,請使用bodyelement:

身體 {
 font-size:14px;
}

對於身體元素,您使用像素,但是對於其他元素,您使用emso,其尺寸是相對於身體元素的尺寸的。

h1
#網站標題 {
 字型大小:2em;
}

請記住,如果您要更改主題樣式表中的字體,請先在開發或登台站點上對其進行測試,以免冒著破壞現場站點的風險。

如何在WordPress中優化字體

無論您使用的是網路字體還是本地託管的字體,都應盡一切可能優化字體。

在這裡,我將為您提供一些有關優化字體的技巧,以提高速度和設計效率。

優化字體以提高性能

如果您在網站上使用網路字體,則將盡其所能來確保將其儘快傳遞到您的網頁上,並確保將其託管在其他地方不會降低速度。

  • 使用緩存可確保無需在每次載入頁面時都對其進行重建。 Kinsta託管計劃內置了緩存。
  • 使用網路字體提供程序,該提供程序使用內容傳遞網路或CDN傳遞字體。 Google字體可以做到這一點,並且可以加快字體的交付速度。
  • 只使用您需要的那些字體。不要將樣式表中不會使用的字體(粗體,樣式)排入隊列。如果以後發現需要它們,則可以隨時添加它們。
  • 如果使用網路字體,請確保將它們正確排入隊列。即使這是您的網路字體提供商告訴您的操作,也不要在樣式表中使用@import行。
  • 手動添加CSS時,請將其添加到主題的樣式表中,而不要添加到 header.php文件的部分。這是為什麼最好的做法是將CSS手動編碼到您的主題中,而不是使用Customizer或塊,因為這兩種方法都會將內聯CSS添加到頁面中而不是將其添加到樣式表中。
  • 考慮使用CSS內聯將頁面載入時間縮短几毫秒。這是一個使用base64編碼的過程,用於在載入樣式表之前將樣式表中的CSS添加到頁面中,從而節省了瀏覽器必須載入額外文件的時間。鑒於上述有關不編寫內聯CSS的建議,這似乎違反直覺,但它仍然可以在單獨的CSS文件中工作,並不意味著手動編碼內聯CSS。如果您要載入多種字體,內聯可以稍微加快您的網站速度。
  • 使用縮小來減小樣式表的大小。
  • 如果您在本地託管字體,則僅上傳所需字體的文件以及所需的字體粗細和樣式。僅使用@ font-face聲明添加所需的那些變體。
  • 考慮使用CDN來託管您自己的字體,而不是將其託管在您自己的伺服器上。
  • 託管自己的字體時,請包括其他格式:woff2,woff,ttf和eot。然後,瀏覽器可以選擇載入速度最快的版本。
  • 如果您使用其他字體作為網站標題,則僅使所需字元入隊,而不是整個字體庫入隊。

因此,如果您的網站標題是Kinsta,則可以通過確保像這樣的樣式表來對性能進行一些小的改進:

function kinsta_add_title_font() {
 wp_register_style( 'googleFonts', 『https://fonts.googleapis.com/css?family=Raleway&text=「kinsta');
 wp_enqueue_style( 'googleFonts');
}
add_action( 'wp_enqueue_scripts', 'kinsta_add_title_font' );

Optimizing Fonts for Design

As well as optimizing the performance of your fonts, it also makes sense to make sure they』re visually optimized: that they fit well with the design of your site and with your offline materials.

This is particularly the case if you use a plugin or a child theme to add extra fonts on top of the ones already bundled with your theme. There is a risk of your theme looking messy if there are too many fonts in too many colors and styles.

Before you add extra fonts to your site, consider the following:

  • Are the new fonts consistent with your existing fonts? Do they convey a similar style or mood?
  • If you need to match a font that』s been used for print materials but can』t use the same font as a web font, try finding as close a match as possible on Google Fonts.
  • Are the fonts you』ve chosen consistent with your brand? If you』re running a serious business, you don』t want to use Comic Sans (in fact, whatever kind of website you』re running, you don』t want to use Comic Sans).
  • If you』re changing the colors of your fonts, try to use colors that are already in the design of your theme or that coordinate with them. Adding too many colors will make your site look garish and unprofessional.
  • If you』re trying to pick out a pair of fonts on Google Fonts, try using a service like fontpair to find two that work well together.

The fonts you use in your design will have an impact on the impression visitors get when they reach your site. Make sure you』ve considered this and chosen fonts that will reinforce your brand.

Working with Variable Fonts

Variable fonts are a new kind of fonts that make adding more fonts to your site more efficient.

They allow more information to be stored in one font file, so that if you want variations on your font (bold, italics, etc.), you don』t have to load multiple font files, but can just load the one.

For a font with multiple font weights, styles and slants, this could save a lot of file space and make the process of enqueuing the font or adding it via @fontface easier too.

Variable fonts are supported in the latest versions of Chrome, Edge, Firefox, and Safari, but not by older browsers; so if you do use them, you』ll need a fallback. And there aren』t many variable fonts available just yet. Google Fonts doesn』t include any, but Google does support the specification, so it』s likely they will be added over time.

Font developers are working on creating more variable fonts and improving their reliability, so it』s worth watching progress so that you can use variable fonts to optimize your fonts once they become more stable.

Fonts are taken for granted but they're crucial for ANY website (no exceptions). Learn how to change font, font size, and font color in WordPress! ??‍?

Click to Tweet

Summary

Changing fonts on your WordPress site isn』t a straightforward task. You have different possibilities to choose from:

  1. Using web fonts by installing a plugin.
  2. Using web fonts by coding them into your theme and enqueuing them.
  3. Hosting your fonts.

Then, you should focus on how to optimize your fonts for better performance. If you follow the tips in this guide, you should be able not only to change fonts in WordPress but also have more control over them in your theme.

1 Shares

.essb_links .essb_links_list li a {
  margin-top:0px;
}
@media only screen and (min-width: 64em) {
  .container–narrow.pb–60,
  .knowledgebase .user-content {
    position: relative;
  }
  .widget-share {
    position: absolute;
    left: -200px;
    top: 0px;
    height: 100%;
    width: 200px;
    box-sizing: border-box;
  }
  .widget-share-aligner {
    width: 200px;
    padding-right: 62px;
    box-sizing: border-box;
  }
  .widget-share-inner {
    padding-bottom: 62px;
  }
  .knowledgebase .user-content .widget-share-inner {
    padding-top: 0;
  }
  .widget-share .amount {
    display:flex;
    align-items: center;
    justify-content: flex-end;
    width: 100%;
    margin-right:11px;
    font-size: 14px;
    font-weight:500;
    margin-bottom:10px;
  }
  .widget-share .amount svg {
    margin-right:8px;
    margin-left:10px;
  }
  .essb_links .essb_links_list {
    flex-direction: column;
    align-items: flex-end;
  }
  .essb_links .essb_links_list li {
    display: block;
    margin-bottom:5px !important;
  }
  .widget-share__total {
    margin-bottom:0px !important;
  }
  .widget-share__total .heading–small {
    color: #999999;
    font-size:14px;
    font-weight: 300;
  }
  .essb-total-value {
    margin-right:4px;
  }

}
.essb_links {
  margin:0px;
  padding:0px;
}
.essb_counter_right {
  display:none !important;
}
.essb_links.essb_template_circles-retina .essb_link_hackernews a,
.essb_links.essb_template_circles-retina .essb_link_reddit a,
.essb_links.essb_template_circles-retina .essb_link_mail a,
.essb_links.essb_template_circles-retina .essb_link_mwp a,
.essb_links.essb_template_circles-retina .essb_link_buffer a,
.essb_links.essb_template_circles-retina .essb_link_linkedin a,
.essb_links.essb_template_circles-retina .essb_link_facebook a,
.essb_links.essb_template_circles-retina .essb_link_twitter a
 {
  color: #43414e !important;
  background: #f3f3f6 !important;
}

.essb_links.essb_template_circles-retina li a:focus, .essb_links.essb_template_circles-retina li a:hover {
  border-color: #fff !important;
  background: #43414e !important;
}

.essb_links.essb_template_circles-retina a {
  border-color: #f3f3f6 !important;
  background: #f3f3f6;
}
.essb_links .essb_icon:before {
  font-size:15px !important;
  top:8px;
  left:9px;
}
.essb_links .essb_icon {
  width:32px;
  height:32px;
}
.essb_links.essb_counter_modern_right .essb_counter_right {
  background: #f3f3f6 !important;
}
@media only screen and (max-width: 63.999em) {
  .widget-share-aligner {
    position: relative !important;
    top: 0 !important;
  }
  .essb_links .essb_links_list li {
    margin-right: 8px !important;
  }
}

相關文章