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

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

Jimmy Mooney

這些年來，網頁字型技術有不少變化。過去需要處理文字圖片或 Flash 外掛程式 (同時破壞了網站的搜尋引擎最佳化) 而成為小眾市場的做法，現在是網路上的一種標準做法。有很久的時間，您一定得在網頁載入之前載入整個字型，並呈現您可能從未用過的樣式和字元，但這些字型已經是過去的方式。

這些年來，Google Fonts CSS 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 已有檔案的常用參數，就會立即將 CSS 傳回給使用者，並導引至這些檔案。
  2. 如果您要求的字型含有 API 尚未快取的參數，則會使用 HarfBuzz 快速進行字型子集，並傳回指向這些參數的 CSS。

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

網頁字型可以很大，並且是正確的。在 WOFF2 中只剩下一個 Noto Sans Japan 的權重將近 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 檔案 (如果網路瀏覽器支援)，因此他們只會針對網站所需的特定字元載入字型。

只要使用萬國碼範圍 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，由於 API 內建的支援將大型字型分離 Unicode 範圍，讓您省下自行託管 WOFF2 字型的成本，因此可省下 97.5%。進一步指定要顯示的文字，還能進一步將字型縮小至 CSS API 字型的 95.3%，比自行託管的字型少 99.9%。

Google Fonts CSS API 會根據使用者瀏覽器支援的最小和相容格式，自動提供字型。如果您的使用者使用可支援 WOFF2 的瀏覽器，API 會以 WOFF2 提供字型，但如果使用者使用的是舊版瀏覽器，API 則會以該瀏覽器支援的格式傳送字型。為了縮減每位使用者的檔案大小，API 也會在不需要時從字型中移除資料。舉例來說，如果使用者的瀏覽器不需要這類資料，提示資料就會遭到移除。

運用 Google Fonts CSS API，確保網路字型未來安全無虞

Google Fonts 團隊也為 WOFF2 等網路字型技術持續推動創新，為 W3C 標準做出貢獻。目前有一個專案是「Incremental Font Transfer」，這項功能可讓使用者在螢幕中載入字型檔案的極小部分，隨選串流處理其他部分，超越 Unicode 範圍的效能。當您使用我們的網頁字型 API，當在瀏覽器中推出字型傳輸這些基本技術時，使用者都能獲得改善。

這是字型 API 的優點：使用者不必變更您的網站，就能享有各項新技術改良的好處。要採用新網路字型格式嗎？別擔心！要支援新的瀏覽器或作業系統嗎？什麼都沒問題因此，您不必費心維護網頁字型，而是專注於其他使用者與您的內容。

支援內建字型

變數字型是一種字型檔案，可以在多個軸中儲存多種設計變化版本，新版 Google Fonts CSS API 支援這些字型。加入額外的變化軸，讓字型更有彈性，卻幾乎是字型檔案大小的兩倍。

當您在 CSS API 要求中更具體地指定，Google Fonts CSS API 只能提供網站所需的變數字型，以縮減使用者的下載大小。這樣即可在網路上使用可變字型，不會導致網頁載入時間過長。只要在軸上指定單一值，或是指定範圍，即可達成這個目的，您甚至可以在單一要求中指定多個軸和多個字型系列。API 可讓您視需要靈活調整。

導入簡單，且經最佳化調整

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

  • 與網路瀏覽器相容。
  • 最小。
  • 快速送達。
  • 更容易使用。

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

特別銘謝

主頁橫幅由 leesehee 提供。