CSS API 更新

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

最新資訊

一切都是以新的基準網址開始:

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>

使用瀏覽器開啟檔案後,頁面應會顯示「 Web Beautiful),以 Crimson Pro 字型。

讓網路變得更美觀!

多個家庭

如要申請多個系列,請為每個系列指定 family= 參數。

比方說 Crimson ProLiterata

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:軸代碼,例如italwdthwght

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:會顯示在要求字體中的文字

displayauto |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 提供的可變字型表格。

延伸閱讀

  • 查看 Google Fonts API 所提供之字型系列的完整清單 Google Fonts
  • 進一步瞭解 Google Fonts API 的運作方式, 「技術考量」頁面。