提供快速精美網路字型的 API

如何使用 Google Fonts CSS API 有效率地提供網路字型。

Jimmy Mooney

多年以來，網頁字體技術發生了許多變化。過去，這項做法只適用於特定情況，需要使用文字圖片或 Flash 外掛程式 (這會影響網站的搜尋引擎最佳化)，但現在已成為網路上的標準做法。過去，您必須在網頁載入前載入整個字型，包括您可能未使用的樣式和字元，但這項做法已成為過去式。

Google Fonts CSS API 也隨著網路字型技術的變化而不斷演進。這個 API 的價值主張已從最初的「讓瀏覽器在所有使用 API 的網站中快取常用的字型，加快網頁載入速度」進化到現在。這點不再正確，但 API 仍提供額外且重要的最佳化功能，讓網站能快速載入，字型也能正常運作。

使用 Google Fonts CSS API 時，網站只能要求將 CSS 載入時間降到最短所需的字型資料，確保網站訪客能夠盡快載入內容。API 會針對每個要求，回應該網路瀏覽器的最佳字型。

您只需要在程式碼中加入一行 HTML 程式碼即可。

如何使用 Google Fonts CSS API

Google Fonts CSS API 說明文件總結如下：

您不需要進行任何程式設計，只要在 HTML 文件中加入特殊樣式表連結，然後在 CSS 樣式中參照字型即可。

您至少需要在 HTML 中加入一行程式碼，如下所示：

<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap" rel="stylesheet" />

從 API 要求字型時，您可以指定要使用的字型系列，以及選用的字型粗細、樣式、子集和其他選項。接著，API 會以下列其中一種方式處理您的要求：

  1. 如果您的要求使用 API 已提供檔案的常見參數，API 會立即將 CSS 傳回給使用者，並引導他們前往這些檔案。
  2. 如果您要求的字型參數目前未在 API 快取中，API 會使用 HarfBuzz 快速執行字型子集作業，並傳回指向這些字型的 CSS。

字型檔案可以很大，但不一定

網路字型可能會很大，在 WOFF2 中，單一 Noto Sans Japanese 字型重量就將近 3.4 MB，如果每位使用者都下載這個字型，網頁載入時間就會變慢。每當每一毫秒都很重要，且每個位元組都珍貴時，請確保您只載入使用者需要的資料。

Google Fonts CSS API 可即時產生非常小的字型檔案 (稱為子集)，只為使用者提供網站所需的文字和樣式。您可以使用 text 參數要求特定字元，而不是顯示整個字型。

<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap&text=RobtMn" rel="stylesheet" />

圖表顯示基本拉丁文、基本希臘文和擴充希臘文的字元數。

CSS API 也會自動為使用者提供其他網頁字型最佳化功能，不需任何 API 參數。API 會為使用者提供已啟用 unicode-range 的 CSS 檔案 (如果網頁瀏覽器支援)，讓他們只為網站需要的特定字元載入字型。

如今，Unicode 範圍 CSS 描述符是可用來對抗大型字型下載作業的工具之一。這個 CSS 屬性會設定 @font-face 宣告所包含的萬國碼字元範圍。如果網頁上顯示其中一個字元，系統就會下載該字型的字型。這項功能適用於所有語言，因此您可以使用包含拉丁、希臘或斯拉夫字元的字型，並製作較小的子集。在上圖中，您可以發現，如果必須載入這三個字元集，就會超過 600 個字符。

一張圖表，顯示基本拉丁文、擴充拉丁文、韓文和日文的字元數。

這也能讓網頁支援中文、日文和韓文 (CJK) 字體。在上述圖表中，您可以看到 CJK 字型涵蓋拉丁字元字型的 15-20 倍。這些字型通常很大，而且這些語言的許多字元不如其他語言的字元那麼常用。

使用 CSS API 和 Unicode 範圍，可將檔案傳輸量減少 約 90%。您可以使用 unicode-range 描述元，分別定義各個部分，且只有在內容包含這些字元範圍中的其中一個字元時，才會下載每個切片。

範例：如果您只想在 Noto Sans JP 中設定「こんにちは」這個字詞，可以採取以下做法：

  • 自行代管 WOFF2 檔案。
  • 使用 CSS API 擷取 WOFF2。
  • 使用 CSS API，並將 text= 參數設為「こんにちは」。

比較不同方法下載 Noto Sans JP 的圖表。

在這個範例中，您可以看到使用 CSS API 後，相較於自行代管 WOFF2 字型，您已經節省了 97.5%。這是因為 API 內建支援將大型字型分割為萬國碼範圍。進一步指定要顯示的文字，即可進一步縮小字型大小，讓字型大小僅為 CSS API 字型的 95.3%，比自架字型小 99.9%。

Google 字型 CSS API 會自動以使用者瀏覽器支援的格式提供字型，且格式會盡可能縮小且相容。如果使用者使用支援 WOFF2 的瀏覽器，API 就會以 WOFF2 格式提供字型，但如果使用者使用舊版瀏覽器，API 就會以該瀏覽器支援的格式提供字型。為減少每位使用者的檔案大小，API 也會在不需要時從字型中移除資料。舉例來說，如果使用者的瀏覽器不需要提示資料，系統就會移除這些資料。

使用 Google Fonts CSS API 讓網頁字型與時俱進

Google 字型團隊也致力於推動新的 W3C 標準，持續開發創新的網路字型技術，例如 WOFF2。目前的一個專案是逐步字型傳輸，可讓使用者在螢幕上使用字型檔案時，只載入極少的字型檔案，並視需要串流傳輸其餘部分，超越萬國碼範圍的效能。當您使用我們的 Web Font API 時，會讓使用者在瀏覽器中取得這些基礎字型傳輸技術改善功能。

這就是字型 API 的優點：使用者不必更改網站，就能享有每項新技術的改善成果。新的網路字型格式？別擔心！是否支援新的瀏覽器或作業系統？我們已處理這個問題。因此，您可以專注於使用者和內容，而無須費心維護網頁字型。

變數字型支援內建

變數字型是一種字型檔案，可儲存多種軸，且 Google Fonts CSS API 新版本內含相關支援。您可以加入額外的變化軸，並使用字型更有彈性，但幾乎能將字型檔案放大兩倍。

在 CSS API 要求中提供更明確的資訊，Google 字型 CSS API 就只會提供網站所需的變數字型部分，以便減少使用者下載的大小。這樣一來，您就能在網頁中使用可變字型，而不會造成長時間的網頁載入時間。方法是指定軸上的單一值，或是指定範圍。您甚至可以在單一要求中指定多個軸和多個字型系列。這個 API 可彈性調整，以滿足您的需求。

易於實作，且經過最佳化處理

Google Fonts CSS API 可協助您提供以下字型：

  • 與網路瀏覽器的相容性更高。
  • 盡量小。
  • 快速送達。
  • 使用起來更方便。

如要進一步瞭解 Google Fonts，請前往 fonts.google.com。如要進一步瞭解 CSS API，請參閱 API 說明文件。

特別銘謝

主頁橫幅由 leesehee 提供。