在 WordPress 中移動到系統字體堆棧（如何以及為什麼）

我是網絡性能的忠實粉絲。 但我也不認為它應該或不得不妥協設計。 中間總是有一個很好的平衡。 早在 2017 年，我就在 GitHub 的博客上挖掘他們的字體。 它非常容易閱讀。 因此，我使用 Chrome Devtools 深入研究了這些屬性，發現它們使用的是系統字體堆棧。

多年來我一直在使用系統字體並且喜歡它們。 所以今天，我想向您展示如何在您的 WordPress 網站上使用系統字體堆棧。

什麼是系統字體堆棧？

網站有不同類型的字體可供選擇。 你幾乎有四種不同的選擇：

• 網絡安全字體：免費且瀏覽器不需要下載時間，但通常看起來過時，因此使用不多。 沒有人真正喜歡 Arial 或 Tahoma，是嗎？ 查看網絡安全字體的完整列表。
• 網絡字體：看起來很漂亮，但需要通過瀏覽器下載。 提供免費和高級選項。 添加到您網站的整體頁面權重。 但是，它們可以從緩存的 CDN 中提供。 提供者包括 Google、Adobe Fonts (TypeKit) 等。
• 在本地託管 Web 字體：提供免費和高級選項。 它仍然需要下載時間，並且可以利用緩存 CDN 上的單個 HTTP/2 連接。 現在所有主要瀏覽器都有單獨的緩存分區，因此在本地託管它們實際上對性能更好。 您可以使用 Perfmatters 在本地託管您的 Google 字體。
• 系統字體：免費，與操作系統相匹配，看起來相當不錯，而且不需要下載時間！ Weather.com、GitHub、Bootstrap、Medium、Ghost、Booking.com（閱讀他們的系統字體故事）、PubMed 甚至您的 WordPress 儀表板都使用它們。 在我個人看來，系統字體在 macOS 上比在 Windows 上看起來要好一些。

系統字體並不是什麼新鮮事。 事實上，Medium 在 2015 年就在使用它們。它們感覺就像你的操作系統，因為它們使用的是原生字體。 許多現代操作系統非常明智地選擇字體，並且都具有非常時尚的外觀和感覺。 這不像默認回到 Arial 或 Times New Roman 的網絡安全字體。 相信我; 沒有人願意在網站上看到 Times New Roman。

最重要的是，系統字體就像網絡安全字體一樣工作，因為它們不需要瀏覽器的任何下載時間。 這可以幫助減少您網站上的整體頁面權重。 截至 2022 年 4 月，網絡字體平均佔整個網站權重的 6.07% 左右。 雖然這不是很大，但請記住，您所做的每一個小優化都會增加一個快速的網站，尤其是在移動設備上。

使用系統字體有什麼缺點嗎？ 不！ 這就是它的美妙之處。 PageSpeed Insights 中的警告，如“確保文本在字體加載期間保持可見”甚至從未發揮作用，因為從技術上講，沒有任何內容被下載。

系統字體堆棧 CSS

使用帶有 web 字體的 font-family 屬性，您通常擁有主要字體和一兩個備用字體。 使用系統字體，您必須包含所有不同的操作系統，因此您必須堆疊更多的字體。 這就是為什麼它被稱為“系統字體堆棧”。

例如，下面是 CSS 可能與 Web 字體一起出現的方式。

 font-family: "Open Sans","Helvetica Neue",sans-serif;

這是系統字體堆棧的外觀。 好消息是，它們並沒有全部加載。 這只是應該從操作系統加載的字體（如果可用）的順序。

 字體系列：-apple-system、system-ui、BlinkMacSystemFont、“Segoe UI”、Helvetica、Arial、sans-serif、“Apple Color Emoji”、“Segoe UI Emoji”、“Segoe UI Symbol”

您知道您的 WordPress 儀表板使用系統字體堆棧嗎？ 這是他們正在使用的。

 字體系列：-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif

CSS-Tricks 也有另一種方法來使用@font-face 應用系統字體。

系統字體堆棧備忘單

您必須在此處選擇所需的設置。 以下是每個操作系統附帶的字體列表。 注意：這會隨著時間的推移而變化，因此您可能需要在新操作系統出現時重新訪問您的字體。 我將確保更新此列表。

如何實現系統字體堆棧

我在 woorkup.com 和我的所有其他網站上都使用了系統字體堆棧。 我覺得我終於找到了兩全其美。 這就是我的做法。

選項 1：使用 GeneratePress WordPress 主題

想讓這變得超級簡單嗎？ 只需轉到 GeneratePress 主題，這是我在所有網站上使用的主題。 在定制器中，在排版下，您只需選擇“系統堆棧”。 就是這樣！

Astra 等其他注重性能的主題也可以選擇使用系統字體。

選項 2：使用 CSS 添加系統字體堆棧

如果您使用的是另一個 WordPress 主題，您可以使用一些 CSS 輕鬆移動到系統字體堆棧。

第1步

在 WordPress 中，您需要更改font-family上的 CSS。 您可以使用 WordPress 定制器在“附加 CSS”下添加代碼。

第2步

輸入以下代碼。 這可能因主題而異，但對於大多數人來說，以下內容應該覆蓋所有內容。 我使用與 GithHub 相同的系統字體堆棧，除了我添加system-ui作為 Chrome 的較新版本支持它。 請記住，它們將按照它們在堆棧中出現的順序使用。

 body {字體系列：-apple-system，system-ui，BlinkMacSystemFont，“Segoe UI”，Helvetica，Arial，sans-serif，“Apple Color Emoji”，“Segoe UI Emoji”，“Segoe UI Symbol”；}
h1,h2,h3,h4,h5,h6 {font-family:-apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji ", "Segoe UI 符號";}

根據您的主題，您可能需要為正文內容添加段落標籤。 所以它會是這樣的：

 body, p {font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; }

第 3 步

您還需要禁用從 WordPress 主題加載的任何第 3 方字體，例如 Google 字體。 這又會有所不同，因為每個開發人員包含不同的字體。 但現在許多主題都有一種簡單的方法來打開或關閉 Google 字體。

如果您使用默認的 WordPress 主題之一，則可以輕鬆使用免費的禁用 Google 字體插件。 或者您也可以在我們的 Perfmatters 插件中禁用 Google 字體。

速度測試前後

當然，我無法抗拒。 這是速度測試之前和之後。 每個測試運行五次，取平均值。

之前的速度測試

這是之前的速度測試，當時我加載了 Google 字體。

測速後

這是使用我的系統字體堆棧後的速度測試。 如您所見，我將整個頁面的重量減少了大約 60 KB，並擺脫了三個請求。 一個到 fonts.googleapis.com，然後兩個下載不同字體粗細版本的 Roboto。 系統字體堆棧比使用 Google 字體快大約 6% 。

我知道很多網站使用 4-5 種不同的字體粗細或樣式，有時甚至使用 2-3 種不同的 Google 字體。 所以你可能會看到比我更重要的改進。

我還將我們的 novashare.io WordPress 網站移至系統字體並取得了很好的效果； 看看下面的這個速度測試。

字體平滑

字體平滑歸結為個人喜好。 當您應用抗鋸齒時，您的字體會更薄更輕。 我沒有在這個網站上使用它，因為我更喜歡稍厚的字體； 我覺得這感覺有點溫暖。 但是你可以同時試驗一下，看看你喜歡哪一個。

您可以將其添加到正文中。

 身體 {
-webkit-font-smoothing：抗鋸齒；
-moz-osx-font-smoothing：灰度；
}

概括

系統字體可以很好地替代網絡字體和網絡安全字體。 我仍然非常喜歡我的字體的外觀，現在我知道它不會給用戶帶來任何負擔。 儘管 Google 字體可以在本地託管，但它仍然是整個頁面權重的一部分。

好奇你的想法是什麼？ 您是否在 WordPress 中使用過系統字體堆棧？ 如果是這樣，請在下面告訴我。