Category Archives: CSS

在WordPress中更改字體的五種方法

在WordPress中更改字體的五種方法

使用WordPress建立網站時,排版很重要。與其他品牌元素一起,它可以建立您的品牌形象,使網站訪問者舒心悅目,這是至關重要的。這也是在WordPress中更改字體可以讓您的網站與眾不同的原因。

然而,對字體的更改有重大影響(有時會使其複雜化)的是,您選擇的WordPress主題會限制您對字體的選擇。

但是WordPress默認的TinyMCE編輯器允許您自定義某些字體。有幾種方法可以更改WordPress中的字體:

1.使用WordPress主題定制器;

2.借助字體插件;

3.通過應用CSS代碼;

4.調整主題的style.css樣式表

5.通過website builder訪問Google字體庫。

在本文中,我將通過5種方法來指導您如何調整網站的排版。

1.使用主題定制器更改字體樣式

WordPress中的每個主題都有一個主題定制器,包括原生(默認)或自定義的。這是一個方便的內置WordPress功能,無需更改編碼(包括字體)即可更改主題的設計

請注意,WordPress主題定制器的功能取決於您使用的主題。由於每個主題都有不同的自定義選項,因此您可能無法更改字體樣式。

WordPress有數千個主題,因此這裡很難贅述特定主題中字體選項的豐富程度。某些主題可能提供的選項非常有限,而其他主題則可能具有功能豐富的工具來修改字體的每一細節。

作為示例,我們可以進入Visual Composer Starter主題,該主題使用默認的主題定制器來修改字體樣式。

因此,要更改字體時,首先要檢查的是您使用的主題是否具有執行此操作的選項。如果有的話,您將可以在WordPress儀表板中找到它。要進行檢查,第一步是轉到外觀定制

現在,您將看到主題具有的所有自定義選項。下面是Twenty Nineteen和Visual Composer Starter兩個主題定制器之間的區別:

如您所見,Visual Composer Starter主題具有如下可更改字體選項:樣式和所有您可能需要調整的參數的選項,諸如單獨的標題層次結構(H1、H2等)、段落以及按鈕。

更改版式設置後,請不要忘記應用更改以保存在主題定制器中。之後,您網站上的所有字體將會自動更改生效。

2.安裝WordPress字體插件以更改字體

如果您的主題沒有提供您所需的字體,或者根本沒有提供更改字體的選項,那麼最好(便捷的方法)是使用專用的字體插件。通過使用字體插件之一,無需更改您網站的代碼或手動配置字體。

字體插件有兩種常見的類型:內嵌字體和允許您上傳使用的特定字體。如果您在如何匹配字體方面苦苦掙扎一籌莫展,那麼可以從FonPair工具中獲取大量靈感。

有許多插件比默認TinyMCE編輯器提供了更多的排版功能。

擁有一個可以讓您使用Google字體的插件始終是一個不錯的選擇,因為它們大約有900種字體可供選擇。就像一個流行的Easy Google Fonts插件一樣,這種插件可讓您添加自定義Google字體並通過主題定制器控製字體。或者您可以選擇Google字體排版插件來更改特定部分或整個網站上的字體,該插件提供了有用的實時預覽功能,可以實時採樣字體。

但是,如果您要上傳自己的自定義字體而不依賴於預定義的庫,則可以選擇使用知名的“任何字體”插件。

但是,您可以在其他WordPress插件(例如website builder)中訪問富字體庫。或者確切地說,現在Google字體已集成到Visual Composer插件中,這意味著您可以直接從Frontend編輯器中使用它。

3.自定義CSS代碼以調整版式

調整網站字體的另一種方法是使用CSS。如果您熟稔CSS代碼,這將特別方便。如果您要使用的主題不能自定義更改字體,也只能通過修改css代碼來實現。但是,請注意,如果您更換了WordPress主題,您先前對css代碼的更改將會失效。

舉例來說,假如您使用的是WordPress默認的“Twenty Nineteen”主題,該主題不提供自定義修改主題功能,但它支持自定義修改CSS。要找到此選項,請打開定制器,然後單擊“其他CSS”選項卡

如下圖,我創建了一個頁面,顯示默認情況下標題1、標題2、標題3和段落文本的外觀。

並且我在下圖中添加了一些自定義CSS來更改樣式。添加自定義CSS可以讓您修改網站的排版,並可以在屏幕右側預覽修改效果。您也可以在開頭添加*,以將所需的字體添加到整個網站。

注意:如果使用的是Visual Composer,則可以直接從編輯器添加自定義CSS,以在本地或全局更改字體。

4.在style.css樣式表中更改字體樣式

如果您是精通WordPress的高手,您可以通過修改主題文件來自定義網站。通過這種方法,您可以將CSS代碼直接添加到主題style.css文件中,從而更改WordPress中的字體。

要在WordPress儀表板中找到此文件,請轉到外觀主題編輯器,然後在主題文件選項卡下選擇style.css文件。

WordPress主題中的字體取決於特定主題作者的設定,並且在主題的不同區域可能配置了不同的字體。這意味著尋找字體以進行更改可能非常耗時。而且,如果您打算修改主題文件,則為安全起見,最好創建一個子主題,這樣可以避免在更新主題後丟失您所做的更改。

最好的建議是簡單地查找、刪除和覆蓋任何現有的(或特定的)字體樣式,避免被具有更高CSS特異性的任何配置所影響。

如果要使用自定義字體,有兩個選項可將字體嵌入WordPress網站。

首先,您可以使用@ font-face規則來定義要使用的新字體系列。查找、下載沒有版權問題的字體並將其上傳到您的服務器,以便您能指定字體文件的URL。例如,您可以使用Google字體庫來查找和下載所選字體系列。

然後,指定字體名稱,並通過@ font-face規則將這些值(字體名稱和字體文件的URL)放在主題CSS樣式表的頂部。例如:

@font-face {

font-family: 『MyWebFont』;

src: url(『myfont.woff2』) format(『woff2』),

url(『myfont.woff』) format(『woff』);

}

如果要在整個主題中全局更改字體,請將*放在開頭。

第二個方法是使用字體網站提供的代碼嵌入特定字體(在我們的示例中,我們仍以Google Fonts庫為例)。選擇一種特定的樣式,然後單擊矩形圖標以獲取代碼。

使用標記將其插入網站HTML代碼的中,或使用@import規則在style.css文件頂部添加字體。

無論您的偏好是什麼,使用Visual Composer,您可以使用CSS HTMLJavaScript編輯器添加自定義代碼段,或者在站點範圍內或特定頁面上修改代碼。

5.使用Website Builder添加Google字體

如今,大多數人都會使用網站構建器來創建網站。它們通常提供的功能之一就是可以調整字體,包括更改字體。

例如,使用Visual Composer Website Builder,您將獲得很多自定義選項。它具有高級的TinyMCE編輯器,除默認選項外,您還可以使用所有Google字體,更改字體大小、行高、字母間距等。

這無疑是處理您網站排版的最簡單方法之一,就像任何所見即所得編輯器一樣,所有內容都集中在一個地方。在Visual Composer中,您可以輕鬆地嘗試使用字體:搜索特定的字體並預覽。

此外,在Visual Composer Hub (具有定期更新的現成模板、元素和加載項的免費云庫)中,您可以添加Google Fonts Heading Element來製作精美的自定義標題。

結論

此時,您應該熟悉有關如何在WordPress中更改字體的所有現有方法。這裡沒有魔術,只需確定是否要處理一點編碼問題即可。然後,應用上述選項之一,並以精美的字體使訪問者的體驗飛速增長。

但是,調整現有字體並添加新字體的最簡單方法是使用插件,或者更好的是使用網站構建器。下載免費的WordPress網站構建器,您不僅可以控製網站的版式,還可以自定義頁面和文章的其它區域。

如何更換 WordPress 網站字體?利用自訂 CSS 功能 1 分鐘搞定!

如何更換 WordPress 網站字體?利用自訂 CSS 功能 1 分鐘搞定!

最後更新時間:2020 年 12 月 8 日

你是否也有遇到這樣的情形過?在 Themeforest 上看到好看的 WordPress 佈景主題,但買回來的範例網站更換成中文字後,卻發現奇怪,怎麼感覺沒有原本的好看?

接下來這篇文章,我將教你如何透過簡單的自訂 CSS 功能,更換你的網站字體,1 分鐘將你的網站變好看!

為什麼你的網站不好看?

很多人覺得買回來的佈景主題不好看,絕大多數的原因是因為,這些佈景主題都是以英文字體下去設計的,因此如果你直接替換成預設的中文字體,那確實會沒原本的那麼好看。

而要解決這個問題其實很簡單,就是把預設的中文字體換掉,但是,該如何更換網站上的字體呢?

預設網站字體
英文字體
如何更換 WordPress 網站字體?利用自訂 CSS 功能 1 分鐘搞定! | 3
預設中文字體

如何更換網站字體?

要修改 WordPress 網站上的字體,你會需要透過 WordPress 內建的一個「自訂 CSS」的功能,而所謂的 CSS,則是用來掌管網站外觀的程式語言。

接下來,我將教你把預設的中文字體改成「微軟正黑體」,是一款相當適合作為在網頁上瀏覽的字體,同時也是目前 Weblai 網站上所使用的字體。

更換成微軟正黑體

如何更換 WordPress 網站字體?利用自訂 CSS 功能 1 分鐘搞定! | 4

在登入 WordPress 後台的情況下,點擊前台上方的黑框,進入自訂模式。

如何更換 WordPress 網站字體?利用自訂 CSS 功能 1 分鐘搞定! | 5

找到最下面的附加的 CSS 選項。

如何更換 WordPress 網站字體?利用自訂 CSS 功能 1 分鐘搞定! | 6

將以下代碼複製貼上至空白處,並按下發佈

body {
    font-family: Helvetica, 'PingFang TC', "微軟正黑體", "Microsoft JhengHei", sans-serif !important;
}

h1,h2,h3,h4,h5,h6{
    font-family: Helvetica, 'PingFang TC', "微軟正黑體", "Microsoft JhengHei", sans-serif !important;
}

這段 CSS 程式碼的意思,是將你網站的內文以及標題預設字體都更改成別的字體,在這邊我搭配的組合為:

  1. Helvetica – 一款經典的現代化英文字體,你網站的之後的英文文字體會是這個
  2. PingFang TC – IOS 系統內建的字體「蘋方」,如果是你 Mac, iPhone 即會顯示此字體
  3. 微軟正黑體 – Windows 系統內建的字體,如果你是 Windows 電腦即會顯示此字體
  4. Microsoft JhengHei – 微軟正黑體的英文版,這是確保非中文語系的使用者也能正常顯示
  5. sans-serif – 預設的字體,如果在上面的情況下都不符合,則會出現此字體

簡單來說,英文字體會顯示 Helvetica,中文字體則依據你的瀏覽裝置顯示 PingFang TC 或 微軟正黑體

如何更換 WordPress 網站字體?利用自訂 CSS 功能 1 分鐘搞定! | 7

接著回到網站前台,你就會發現你所有的字體都改變了,變得更好看、更現代感的中文字體。

補充

如果你對字體沒有任何想法的話,可以直接用下面這組程式碼,讓字體回歸成所有系統預設的字體組合。

body {
    font-family: -apple-system, Segoe UI, Noto Sans, Ubuntu, Cantarell, Helvetica Neue !important;
}

結語

其實在網站上,中文字體的選擇不多,最常見的選擇就是 Microsoft 的「微軟正黑體」以及 Google 的「思源黑體」( Noto Sans TC ),95% 以上的中文網站應該都是使用這兩個字體。

你可能會好奇,為什麼中文網站都只有這兩種字體可以使用呢?難道我不能使用新細明體甚至標楷體嗎?

這是因為在網站工程的領域中,中文字體相較英文字體有一個先天性的劣勢,就是中文字體的量太多,導致字體的檔案大小太大,進而影響到網站速度。

影響的速度有多大呢?一套中文字體往往有高達數萬字的中文字,檔案大小動輒 10 MB 上下;而相較於中文字體,英文字體只有 26 個字母,檔案大小往往不到 100k,這中間的差距大概是 100 倍的載入速度。

這也是為什麼我們只用微軟正黑體和思源黑體的緣故,微軟正黑體是因為如果你有安裝 Windows,它就直接在你電腦中安裝好了。

而思源黑體則是因為 Google 將此字體放上雲端開源公開,讓你的網站能夠透過某種方式取得此字體的資料,解決了載入速度的問題。

值得一提的是,台灣有一家新創公司 Justfont 致力於解決網頁中文字體的不足,你可以透過它們的服務,取得一些特別的中文字體,並且也不會影響太多速度。

例如我的接案網站就是使用 Justfont 的字體「金萱」:

如何更換 WordPress 網站字體?利用自訂 CSS 功能 1 分鐘搞定! | 8

所以,如果你想要讓自己網站的字體跟別人不一樣的話,可以參考看看 Justfont 的網頁字體服務,不過確實會影響到一點網站速度,因此這部分再請你自行評估看看了。

最後,除了換字體之外,如果你想要進一步讓文章標題變得更好看的話,可以參考下面這篇,將預設的標題樣式換掉:

延伸閱讀:如何自訂 WordPress 文章標題樣式?5 步驟學會用 CSS 自己改樣式!

額外資訊

我目前正在製作一部 WordPress 網站的線上課程,主要內容會是教你如何從完全不懂程式碼的新手,透過學習架設 WordPress 網站與 SEO,打造出一個在一年內能為你帶來 100 萬收入的個人網站。如果你有興趣的話,歡迎填寫下方的訂閱表單,我將會告訴你最新的開課資訊。

.

加入 FB 討論社團

另外,我開設了一個 Facebook 社團,叫做「WordPress 網站架設 | 網路賺錢 | 部落格經營 – WebLai 交流區」,社團中討論的主題主要會是關於 WordPress 網站架設部落格經營、以及網路賺錢