優化 Google 字體性能
已發表: 2020-03-28令人驚嘆的圖像和字體為優秀的網站設計增光添彩。 不幸的是，這兩個 Web 元素在很大程度上促成了許多網站出現令人討厭的延遲的原因。 當然，只有網絡字體才能提供令人耳目一新、出乎意料和新奇的東西。
然而，有辦法遏制這種可怕的現象。 SVG 正在幫助開發人員應對圖像渲染的一些挑戰。 而對於最常用的網絡字體 Google Fonts 來說，改進頁面的渲染時間只是部署幾個可用的技巧來優化 Google Font 的性能。
什麼是谷歌字體？
谷歌字體是專門調整的字形集合，構成在網站上使用的字體。 它們專門設計用於在 Internet 上使用，因此稱為網絡字體。
網絡字體的解剖結構最好被描述為一組矢量形狀（字形），這些形狀經過特殊排列以形成符號或書寫字母。
谷歌字體於 2010 年推出，當時只有大約 30 種字體，現在谷歌字體擁有大約 170 億種字體，目前為所有網站的 57% 左右提供支持。 完全免費的谷歌字體在撰寫本文時每秒記錄約 500,000 次瀏覽量，自 2010 年以來已累積超過 37 萬億次瀏覽量。
在您的網站上使用 Google 字體可以讓您擺脫對系統字體或“網絡安全字體”的限制，例如 Arial 和 Georgia，這些字體大多預裝在所有操作系統中。
如何實現谷歌字體
網站上的 Google 字體實施是使用應用程序編程接口 (API) 完成的，參考用戶選擇的字體。 Google 提供的這個 API 可以使用標準 CSS 鏈接標籤或導入語法嵌入到您的 HTML 文檔中。 下面是用於實現 Baloo Chettan 2 的 API 示例。
使用標準 CSS 鏈接標籤
使用導入語法<style>
@import url('https://fonts.googleapis.com/css?family=Baloo+Chettan+2&display=swap');
</style>
使用 HTML 文檔中的上述任何 API，您可以通過引用來在 CSS 文檔中使用 font-family，如下例所示。
font-family : 'Baloo Chettan 2'，草書；
優化 Google 字體性能的重要性
與其他網絡字體一樣，實施和使用 Google 字體並不是什麼大不了的事，只是將字體交付給您的網站訪問者。 請記住，用戶的設備上沒有這些字體。 換句話說，他們的瀏覽器必須先下載它們，然後才能看到您的網站內容。
字體粗細
每種字體都有一個權重，可能會對您網站的延遲產生負面影響。 例如，Google 的 Baloo Chettan 2 字體的總大小為 720 KB。 這意味著如果您必須使用整個 Baloo 字體系列 (19) 以及您網站上所有可用的語言和變體，您需要在網站加載中考慮大約 9MB。 當然，這是不理想的，與網絡字體優化沒有任何關係。 但是，弄錯意味著讓您的網站訪問者等待幾秒鐘，然後他們才能看到您網站上的任何文字。
字體格式
到目前為止，網絡上使用的主要網絡字體格式有四 (4) 種。 它們是 TrueType 字體 (TTF)、Embedded Open Type (EOT)、Web Open Font Format (WOFF) 和 Web Open Font Format 2.0 (WOFF2)。
不幸的是，這些格式都不被認為是適用於所有瀏覽器的通用格式。
僅 IE 支持 EOT。 Chrome 和 Opera 對大多數格式的支持最多，而大約 86% 的瀏覽器支持 WOFF 格式。 這可能要求您包含要使用的每種字體的所有字體格式。 這個想法是通過確保所有瀏覽器都可以顯示每種字體來提供一致的體驗。
這些問題是迫切需要優化 Google 字體性能的眾多原因的一部分。
優化 Google 字體性能
Google 字體優化從您的 Font API 位置和請求格式開始，一直到渲染。 以下是有關如何優化 Google 字體的簡單技巧。
預加載 Google 字體資源
強烈建議您使用新的網絡平台功能： <link rel="preload"> ，它可以讓您提前加載網絡字體。 此功能允許您繞過默認瀏覽器行為，該行為通常會延遲文本渲染，方法是首先構建渲染樹以在訪問資源鏈接之前知道它需要哪些字體資源。
<link rel="preload">通常包含在 HTML 的<head>標記中，以便儘早觸發對字體的請求，而無需等待 CSSOM 的創建。 該功能僅向瀏覽器提供即將需要您的網絡字體的預先信息，而不提供有關如何使用它們的任何信息。
此外，建議您在預加載功能旁邊使用合適的 CSS @font-face 定義，以告知瀏覽器如何使用資源 URL。 請參閱下一點中的示例。
注意：並非所有瀏覽器都支持 <link rel=”preload”>。 不支持它的瀏覽器只會忽略代碼。 但是，當存在首選字體的遠程副本時，此功能有時會產生浪費的請求。
對多種字體使用一個請求
谷歌字體優化的另一個好方法是將多個字體請求組合到一個標籤中。 不為每種字體包含單獨的 <link> 標籤，從而分批發送多個請求。 要組合字體請求，只需將 API 中的字體用 | 分隔即可。 特點。 但是，這也可以通過簡單地在 Google 字體頁面上一次選擇您需要的所有字體來實現。
錯誤的字體請求格式：
<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap"
rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Baloo+Chettan+2&display=swap"
rel="stylesheet">
推薦的字體請求格式：
<link href="https://fonts.googleapis.com/css?family=Baloo+Chettan+2|Roboto&display=swap"
rel="stylesheet">
通過將多個字體請求組合到一個標籤中，我們可以避免瀏覽器多次訪問服務器，並且還可以幫助舊瀏覽器在每個域一次最多 2 個連接。
優化所有瀏覽器的字體格式
不支持特定字體格式的瀏覽器會忽略它並跳轉到渲染樹的下一步。 為了提供一致的體驗，您需要在 CSS @font-face 聲明中包含所有字體格式。
但是，重量可以減輕。 描述字體的各個圖形由類似的信息組成，這些信息可以使用兼容的壓縮器（例如 GZIP）進行壓縮。 雖然 TTF 和 EOT 格式默認壓縮，但您需要確保您的服務器配置為在交付兩種字體格式時應用壓縮。
為 WOFF 使用最佳壓縮設置，它具有內置壓縮功能，並採用自定義預處理和壓縮算法來交付 WOFF2，文件大小減少約 30%。
CSS @font-face 聲明示例@font-face {
font-family: 'Baloo Chettan 2';
font-style: normal;
font-weight: 600;
src: local('Baloo Chettan 2'),
url('/fonts/awesome.eot') format('embedded-opentype'), /* IE6-IE8 */
url('/fonts/awesome.woff2') format('woff2'), /* Super modern web browsers */
url('/fonts/awesome.woff') format('woff'), /* Modern web browsers */
url('/fonts/awesome.ttf') format('truetype'), /* Android, Safari */
url('/fonts/awesome.svg') format('svg'); /* Super modern web browsers */
注意： src: 指向多個資源變體，而 url() 允許您加載外部字體，而 local() 允許您在本地獲取字體。 format() 表示特定 URL 中的字體格式。
優先考慮 src 列表中的 local()
儘管除非您引用默認系統字體，否則這種 Google 字體優化想法可能並不真正適用於手機用戶，但它仍然是優化網絡字體的有效技巧。
如果您查看上面的 CSS @font-face 聲明示例，您會注意到 local() 在 src: 描述符中以逗號分隔的資源變體列表的頂部。 這種優先級是故意的，其想法是將用戶瀏覽器發送到本地字體的第一個來源，然後在本地不可用時選擇下載它們。
這確保了瀏覽器不會繼續下載已安裝在用戶計算機上的本地字體，從而確保更好的網站性能。
自定義字體渲染：CSS font-display
使用@font-face 的字體顯示描述符控製字體性能，您可以根據下載所需的時間來決定應該如何呈現 Google 字體。 最初，當字體加載時間過長時，Web 瀏覽器有默認設置。 他們中的大多數設置了一個超時，之後他們使用後備字體，但不幸的是，他們的超時時間不同。
如果網絡字體尚未準備好，Chrome 和 Firefox 會在三秒後使用備用字體，並會在下載後立即將文本交換為預期的字體。 Internet Explorer 將在 0 秒內執行相同的操作，而 Safari 沒有字體呈現超時行為。
新引入的 font-display 屬性目前支持五種取值範圍： auto | 塊| 交換| 後備| 可選的
如果以特定字體呈現文本非常重要，則應將該屬性設置為塊值。 這是因為它允許瀏覽器在未準備好時使用無敵文本代替首選字體，並在完成下載後立即將其換入。 大多數瀏覽器使用這個值作為它們的默認 ( auto ) 值。
如果您有能力渲染臨時字體，直到首選字體準備好，則可以使用交換。 Swap 類似於塊，但在頁面開始加載時立即呈現後備字體，並在它們準備好後立即用首選字體替換它們。 該值具有無限交換週期和零秒塊週期。
交換值對於正文並不理想，以免因移動文本而中斷讀者體驗。 您可以將其用於徽標文本，您需要使用後備快速顯示公司名稱或口號，但最終需要官方字體用於品牌推廣。
示例：字體顯示屬性設置為交換@font-face {
font-family : 'Baloo Chettan 2';
font-style : normal;
font-weight : 600;
font- display : swap
src : local('Baloo Chettan 2'),
url('/fonts/awesome.eot') format('embedded-opentype'); /* IE6-IE8 */
url('/fonts/awesome.woff2') format('woff2'), /* Super modern web browsers */
url('/fonts/awesome.woff') format('woff'), /* Modern web browsers */
url('/fonts/awesome.ttf') format('truetype'), /* Safari, Android */
url('/fonts/awesome.svg') format('svg'); /* modern web browsers */
可以看到交換值在用於演示如何在 HTML 文檔中鏈接 Google 字體的第一行代碼（Google 字體 API）中實現。
回退類似於交換，但交換期有限。 如果首選字體未在設定的時間段內（通常是零秒）加載，則文本將在頁面的剩餘生命週期內保持備用字體。 這是正文的一個很好的候選； 它盡可能快地呈現文本，並且在任何人開始閱讀時都不會改變它。
可選值是fallback的副本，但允許瀏覽器根據用戶的網絡速度決定是否啟動 Web 字體下載。 在連接太弱的情況下，瀏覽器將不得不通過不發送任何下載網絡字體的請求來限制請求並優先處理最需要的資源。
限製字體系列和變體
由於每個字體系列和變體都會影響頁面重量，因此您的 Google 字體優化過程的一部分必須包括限制這兩個元素。
大多數專家會建議您最多使用兩種字體系列； 對於標題和內容。 這是合乎邏輯的，可以讓您在利用網絡字體改進設計的同時安全地玩遊戲。
italic 、regular、 bold等多種變體的可用性並不一定意味著您可以“選擇”將它們包含在您的下載中。 將您的下載減少到所需的確切變體，並避免包含太多。 下載完整的變體會很浪費，因為您只想使用其中的一個詞。 這就是谷歌字體的下一個優化技巧派上用場的地方。
使用文本參數
text 參數是您需要了解的最佳 Google 字體優化技巧之一，令人驚訝的是，大多數開發人員並不使用它。 該參數允許您僅加載您需要的字符。
假設您希望在公司名稱中僅使用兩個字體字母，如下例所示。 我為字母 C 和 N 使用了不同的字體：
公司名稱
您可以請求僅加載這兩個字母，而不是整個字體。 字體 URL 將包含額外的參數，如下所示：
https://fonts.googleapis.com/css?family=Baloo+Chettan+2=CN
這種優化 Google 字體性能的方法非常有效，可以讓您削減多達 90% 的字體粗細。
綜上所述
谷歌字體優化是提高網站整體性能的關鍵策略。
除了良好的排版設計之外，可訪問性和可讀性始終是關注的主要因素。 上述提高字體性能的方法都集中在縮小字體重量、盡可能快地訪問網絡字體以及在用戶網絡不穩定時呈現有效的格式/替代方案。
如果您嘗試過任何這些方法，以及本文未提及的任何網絡字體優化過程，請告訴我們。