CSS API 更新

Google Fonts 現在可在 v2 API 更新中完整支援可變字型。我們會說明如何呼叫單字和多種字型系列，以及如何指定軸線範圍。如要深入瞭解可變字型，請透過 TypeNetwork 的 David Berlow 互動說明手冊瞭解詳情。

新功能

以新的基準網址開頭：

https://fonts.googleapis.com/css2

已變更每個系列中樣式的語法，用來描述變數字型「設計空間」。

快速入門導覽課程指南

複製並貼上此 HTML 檔案：

<html>
  <head>
    <link rel="stylesheet"
          href="https://fonts.googleapis.com/css2?family=Crimson+Pro">
    <style>
      body {
        font-family: 'Crimson Pro', serif;
        font-size: 48px;
      }
    </style>
  </head>
  <body>
    <div>Making the Web Beautiful!</div>
  </body>
</html>

使用瀏覽器開啟檔案時，網頁應在 Crimson Pro 字型中顯示「讓網路更美氣」的文字。

打造精美的網頁！

多個家庭

如要要求多個家庭，請為每個家庭指定 family= 參數。

舉例來說，如何要求 Crimson Pro 和 Literata 的字型：

https://fonts.googleapis.com/css2?family=Crimson+Pro&family=Literata

複製並貼上此 HTML 檔案：

<html>
  <head>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Crimson+Pro&family=Literata">
    <style>
      body {
        font-size: 48px;
      }
      div:nth-child(1) {
        font-family: 'Crimson Pro', serif;
      }
      div:nth-child(2) {
        font-family: 'Literata’, serif;
      }
    </style>
  </head>
  <body>
    <div>Making the Web Beautiful!</div>
    <div>Making the Web Beautiful!</div>
  </body>
</html>

使用瀏覽器開啟檔案時，網頁應該先在 Crimson Pro 中顯示「Make the Web Beautiful」文字，然後再以 Literata 格式顯示。

打造精美的網頁！
打造精美的網頁！

軸範圍

可變字型提供連續的樣式範圍，且通常不會出現其他延遲。這項做法與回應式設計相關。 這個動態字體排版採用連續的風格範圍，在頁面上提供 100 到 900 之間的所有權重，並根據某些條件迅速調整權重。

如果要要求變數字型軸的範圍，請將 .. 合併 2 個值

字型 要求
Crimson Pro [wght 200-900] https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@200..900
克林森 Pro 斜體 [wght 200-900] https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@1,200..900
Crimson Pro 大膽斜體與 [wght 200-900] https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@0,200..900;1,700
您的瀏覽器似乎不支援變數字型 (caniuse)。在支援字型變化的瀏覽器中，下列文字應顯示 Crimson Pro 的流暢粗細，如 400 到 500。CSS 動畫可以讓文字在互動時順暢地改變樣式。
如果您的瀏覽器完全支援可變字型 (caniuse)，則下列文字應會將 Crimson Pro 轉譯為從 400 到 500 之間的順暢粗細。CSS 動畫可以讓文字在互動期間順暢地改變樣式。
打造精美的網頁！
打造精美的網頁！
打造精美的網頁！
打造精美的網頁！
打造精美的網頁！
打造精美的網頁！

個別樣式，例如重量

如果沒有樣式規格，API 就會提供要求系列的預設樣式。如要要求其他個別樣式 (例如特定粗細)，請在字型系列名稱後方加上半形冒號 (:)，後面接著以字母順序排列的軸屬性關鍵字清單、@ 符號，以及這些軸屬性的一或多個值清單。

這些示例顯示了實際運作情況。

字型 要求
Crimson Pro (預設) https://fonts.googleapis.com/css2?family=Crimson+Pro
深圳榮紅 https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@700
Crimson Pro 一般版和大膽式 https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@400;700
深圳紅髮色與大膽斜體 https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@0,700;1,700

Google Fonts 列出各種字型系列可用的樣式。

預設樣式

當要求未指定軸的位置或範圍時，系統會使用預設位置。斜軸的預設位置為 0 (一般)，權重軸的預設值為 400 (一般)。

如果家庭的軸線不包含預設位置，則如未針對這些軸指定位置，要求將會失敗。舉例來說，當要求使用權重軸介於 500 到 900 的家庭時，必須指定權重位置。

非標準權重

使用靜態字型時，粗細的樣式通常會指定為 100 的倍數 (例如 300、400、700)。可變字型提供標準粗細和中等粗細。如要轉譯中間權重：

https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@450
您的瀏覽器似乎不支援變數字型 (caniuse)。在支援字型變化的瀏覽器中，下列文字應以 400、450 和 500 的視覺差異呈現 Crimson Pro。
如果您的瀏覽器完全支援可變字型 (caniuse)，下列文字應以 400、450 和 500 的視覺差異呈現 Crimson Pro。
打造精美的網頁！
打造精美的網頁！
打造精美的網頁！

針對延遲和檔案大小進行最佳化處理

請清楚說明您使用的樣式。API 以最精簡的一組字型提供所要求的樣式。要求未使用的樣式可能會導致使用者下載不必要的字型資料，導致延遲時間變長。如果您只使用 3 種特定重量，請在要求中指定這些權重，做為個別樣式。如果您使用連續的權重範圍，請在要求中指定該權重範圍。

使用字型顯示功能

「font-display」屬性可讓您控製字型仍在載入或無法使用時的處理方式。指定預設值 auto 以外的值通常是適當的做法。

在 display 參數中傳遞所需值：

https://fonts.googleapis.com/css2?family=Crimson+Pro&display=swap

將字型要求最佳化

通常，當您要在網站或應用程式上使用網站字型時，會事先知道您需要哪些字母。這通常是在標誌或標題中使用網頁字型時。

在這種情況下，請考慮在字型要求網址中指定 text= 值。這樣 Google Fonts 就能根據您的要求傳回字型檔案。在某些情況下，這麼做可將字型大小檔案縮減高達 90%。

如要使用這項功能，只要在您的 API 要求中加入 text= 即可。舉例來說，如果只有使用 Inconsolata 做為網誌的標題，則可以將標題本身設為 text= 的值。要求外觀如下：

https://fonts.googleapis.com/css2?family=Comfortaa&text=Hello

和所有查詢字串一樣，請將值進行編碼編碼：

https://fonts.googleapis.com/css2?family=Comfortaa&text=Hello%20World

這項功能也支援國際字型，可讓您指定 UTF-8 字元。舉例來說，「¡Hola!」表示如下：

https://fonts.googleapis.com/css2?family=Comfortaa&text=%c2%a1Hola!

請注意，「text=」參數只能指定一次。此要求適用於要求中的所有家庭如果您需要在多個家庭中使用不同文字最佳化，請使用不同的 API 要求。

建立 API 網址

嚴格

總而言之，更新版 CSS API 比原始 CSS API 可接受哪些要求更嚴格。

一般準則：

  • 按照字母順序列出軸 (en-US 個語言代碼)
  • 軸值群組 (例如元組) 必須按照數值排序
  • 元組不可重疊或碰觸 (例如：wght 400..500 和 500..600)

API 網址規格

/css2?family=<spec>[&family=<spec>...][&text=<text>][&display=<display>]

spec：<family_name>[:<axis_tag_list>@<axis_tuple_list>]

family_name：字型系列名稱

axis_tag_list：<axis>[,<axis>...] // Sorted alphabetically (en-US locale)

axis：軸標記，例如 ital、wdth、wght

axis_tuple_list：<axis_tuple>[;<axis_tuple>...]

axis_tuple：<value>[,<value>...] // Same length as axis_tag_list

value：<range> | <float>

range：<float>..<float>

float：對應軸範圍內的值

text：顯示在要求字體中的文字

display：auto | block | swap | fallback | optional

舊版瀏覽器支援

如果瀏覽器不支援不變字型，可能無法顯示您的設計。查看瀏覽器的 /iiuse 支援字型字型支援。

練習漸進式強化後，就能避免在舊版瀏覽器中產生非預期的行為。在 CSS 中使用 @supports 查詢來控制變數字型功能。

在本範例中，我們想要使用 Markazi Text 的粗細 450，但在不支援可變字型功能時，必須改回使用一般 (粗細 400) 或中等 (粗細 500)：

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Markazi+Text:wght@450" />

<style>
  * {
    font-family: 'Markazi Text';
    font-weight: 400;
  }

  @supports (font-variation-settings: "wght" 450) {
    * {
      font-family: 'Markazi Text';
      font-weight: 450;
    }
  }
</style>

CSS 要求 Markazi+Text:wght@450 會將權重 450 傳送至支援變數字型與將 400 和 500 權重提供給不支援用戶端的用戶端。一般而言，在舊版瀏覽器中使用與要求範圍有關的備用選項。

Axis 備用名稱
ital 0、1
wght 100、200、300、400、500、600、700、800、900

這些範例說明在幾個不同要求中，可在舊版瀏覽器中使用哪些樣式。

要求 舊版瀏覽器可用的樣式
ital@0 ital@0
wght@500 wght@500
wght@432 wght@400;500
wght@440..560 wght@400;500;600

可用的變數字型

您可以前往這裡查看 v2 API 中可用的變數字型表格。

延伸閱讀

  • 前往 Google Fonts 查看 Google Fonts API 提供的字型系列完整清單。
  • 若要進一步瞭解 Google Fonts API 的運作方式，請參閱技術注意事項頁面。