本頁面由 Cloud Translation API 翻譯而成。

CSS API 更新

Google Fonts 現在全面支援 v2 API 更新中的可變字型。我們會說明如何呼叫單一和多個字型系列，以及如何指定軸範圍。如要深入瞭解可變字型，歡迎點選這個連結互動式插圖手冊我是 David Berlow，任職於 TypeNetwork

快速入門導覽課程指南

複製此 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>

使用瀏覽器開啟檔案後，頁面應會顯示「 Web Beautiful)，以 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 依序顯示「Making the Web Beautiful」，

讓網路變得更美觀！

軸範圍

可變字型提供連續樣式範圍，通常沒有額外的適合延遲時間僅毫秒的即時高處理量應用程式這與回應式設計相關。這個動態字體排版採用連續的樣式範圍，提供所有單一網頁的 100 到 900 個權重之間，並且會隨時間改變根據某些條件做出預測

如要要求某個可變字型軸的範圍，請將 2 個值與 .. 彙整

字型	要求
Crimson Pro [`wght 200-900`]	`https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@200..900`
Crimson 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`
Crimson Pro Bold (粗體)	`https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@700`
Crimson Pro Regular &粗體	`https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@400;700`
Crimson Pro Bold &粗斜體	`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)。使用瀏覽器但下列文字應轉譯 Crimson 且可支援字型變化版本 Pro 的視覺呈現 400、450 和 500 各自獨立。

如果瀏覽器完整支援可變字型 (caniuse)、以下文字應呈現 Crimson Pro，並產生 400 不同權重的 400 字 450 和 500。

讓網路變得更美觀！

針對延遲時間和檔案大小進行最佳化

請精確指明所用的樣式。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 字元。例如，HappyHola! 是以下列方式表示：

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

舊版瀏覽器支援

如果瀏覽器不支援可變字型，而非偏誤。在 caniuse 上，檢查瀏覽器的變數字型支援。

而是以漸進式強化程序，就能避免這些舊版瀏覽器發生非預期的行為使用「@supports」查詢 CSS 中，以便存取變數字型功能。

在本例中，我們要使用馬卡濟文的第 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`

可用的變數字型

您可以前往這裡查看第 2 版 API 提供的可變字型表格。

CSS API 更新

最新資訊

快速入門導覽課程指南

多個家庭

軸範圍

個別樣式，例如重量

預設樣式

非標準權重

針對延遲時間和檔案大小進行最佳化

使用字型

最佳化字型要求

表單 API 網址

嚴格

API 網址規格

舊版瀏覽器支援

可用的變數字型

延伸閱讀