開始使用 Google Fonts API

本指南說明如何使用 Google Fonts API 將字型新增至網路 網頁。您不需要執行任何程式設計；使用者只需要新增 樣式表連結，然後參照 CSS 樣式中的字型。

簡短範例

舉例來說，複製下列 HTML 並貼到檔案中：

<html>
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet"
          href="https://fonts.googleapis.com/css?family=Tangerine">
    <style>
      body {
        font-family: 'Tangerine', serif;
        font-size: 48px;
      }
    </style>
  </head>
  <body>
    <div>Making the Web Beautiful!</div>
  </body>
</html>

然後使用新型網路瀏覽器開啟檔案。您應該會看到顯示 利用名為 Tangerine 的字型：

讓網路變得更美觀！

這個句子是普通的文字，只要使用 CSS 就能變更其外觀。嘗試 在上例中為樣式新增陰影：

body {
  font-family: 'Tangerine', serif;
  font-size: 48px;
  text-shadow: 4px 4px 4px #aaa;
}

現在文字下方應會顯示投射陰影：

讓網路變得更美觀！

而這些只是 Fonts API 和 CSS 的開端。

總覽

只要兩個步驟，即可開始使用 Google Fonts API：

  1. 新增樣式表連結，要求所需的網路字型： 

    <link rel="stylesheet"
  href="https://fonts.googleapis.com/css?family=Font+Name">

  2. 請在樣式表中，使用要求的網頁字型設定元素樣式： 

    .css-selector {
font-family: 'Font Name', serif;
}

    或是元素本身加上內嵌樣式 

    <div style="font-family: 'Font Name', serif;">Your text</div>

，瞭解如何調查及移除這項存取權。

如需可用字型清單，請參閱 Google Fonts。

在樣式表網址中指定字型系列和樣式

要決定要在樣式表連結中使用哪個網址，請先從 Google Fonts API 基準網址：

https://fonts.googleapis.com/css

接著新增 family= 網址參數，包含一或多個字型系列名稱。 。

舉例來說，假設您要 Inconsolata 字型：

https://fonts.googleapis.com/css?family=Inconsolata
敬上

如要請求多個字型系列，請以直立線字元分隔名稱 (|)。

比方說 橘子、 Inconsolata 和 Droid Sans：

https://fonts.googleapis.com/css?family=Tangerine|Inconsolata|Droid+Sans

只要要求多種字型，即可在網頁中使用這些字型。 (但請勿過度執行；大部分網頁不需要使用太多字型， 加入過多字型可能會造成網頁載入速度變慢)。

Google Fonts API 透過 預設值。如想要求其他樣式或粗細，請在: 字型，後面接著以逗號 (,) 分隔的樣式或粗細清單。

例如：

https://fonts.googleapis.com/css?family=Tangerine:bold,bolditalic|Inconsolata:italic|Droid+Sans

如要瞭解特定字型有哪些樣式和粗細，請參閱 Google Fonts 中的字型清單。

針對要求的每種樣式，您可以選擇完整名稱或 縮寫；您也可以選擇指定權重的權重：

樣式 指定詞
斜體 italic 或 i
粗體 bold 或 b 或數值權重，例如 700
粗體斜體 bolditalic 或 bi

舉例來說，如要要求 Cantarell 斜體和 Droid Serif 粗體，您可以使用 下列網址： 

https://fonts.googleapis.com/css?family=Cantarell:italic|Droid+Serif:bold
https://fonts.googleapis.com/css?family=Cantarell:i|Droid+Serif:b
https://fonts.googleapis.com/css?family=Cantarell:i|Droid+Serif:700

使用字型

font-display 可讓您 控製字型無法使用時的情況。指定其他值 通常適合使用預設的 auto。

在查詢字串 display 參數中傳遞所需值： 

https://fonts.googleapis.com/css?family=Roboto&display=swap

指定指令碼子集

Google Font Directory 中的部分字型 支援多種字集 (例如拉丁文、斯拉夫文和希臘文)。在訂單中 ，指定要下載哪些子集參數 。

舉例來說，為了要求取得 Roboto Mono 字型，網址會 品牌：

https://fonts.googleapis.com/css?family=Roboto+Mono&subset=cyrillic

要求印度子集 Roboto Mono 字型，網址會 品牌：

https://fonts.googleapis.com/css?family=Roboto+Mono&subset=greek

若要同時請求希臘和西里爾字母的子集 Roboto Mono 字型，網址會 品牌：

https://fonts.googleapis.com/css?family=Roboto+Mono&subset=greek,cyrillic

系統會一律納入拉丁文子集 (如果有的話)，且不需要指定。 請注意，如果用戶端瀏覽器支援 Unicode 範圍 (http://caniuse.com/#feat=font-unicode-range) 子集參數，就會被忽略。瀏覽器會從中 來取得文字顯示所需的文字內容

如需可用字型和字型子集的完整清單，請參閱 Google Fonts。

最佳化字型要求

通常當您想在網站或應用程式中使用網頁字型時 預先得知您需要哪些字母。這種情況經常發生在您使用 加上標誌或標題的網頁字型。

在這種情況下，建議你指定字型中的 text= 值 要求網址這樣 Google 可以傳回針對 請求。在某些情況下，字型檔案最多能縮減 90%。

如要使用這項功能，只要在 Google Fonts API 要求中加入 text= 即可。適用對象 舉例來說，如果只有使用 Inconsolata 做為網誌標題，可以 做為 text= 的值。要求內容如下 例如：

https://fonts.googleapis.com/css?family=Inconsolata&text=Hello

如同所有查詢字串，您應該將值進行網址編碼：

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

這項功能也適用於國際字型，您可以指定 UTF-8 字元。例如：HappyHola!表示：

https://fonts.googleapis.com/css?family=Inconsolata&text=%c2%a1Hola!
敬上

啟用字型效果 (Beta 版)

在網站上製作標題或顯示文字時，通常需要 透過裝飾性的方式打造文字風格為簡化工作 大幅改變了字型的效果 製作出精美的顯示文字例如：

這是字型效果！

如要使用這項 Beta 版功能，只要將 effect= 新增至您的 Google Fonts 即可 API 要求，並在您產生的 HTML 元素中新增對應的類別名稱 每個資源中各不相同問題在上述範例中，我們使用了 shadow-multiple 字型效果。 因此要求看起來會像這樣：

https://fonts.googleapis.com/css?family=Rancho&effect=shadow-multiple

如要使用這種效果，請在 HTML 元素中加入相應的類別名稱。 對應的類別名稱一律為效果名稱加上 font-effect-。 因此 shadow-multiple 的類別名稱會是 font-effect-shadow-multiple：

<div class="font-effect-shadow-multiple">This is a font effect!</div>

如要要求多項效果，可以使用直立線分隔效果名稱 字元 (|)。

https://fonts.googleapis.com/css?family=Rancho&effect=shadow-multiple|3d-float

以下是我們提供的所有字型效果的完整清單：

效果 API 名稱 類別名稱 支援
分析文字 anaglyph font-effect-anaglyph Chrome、Firefox、Opera、Safari
磚塊 brick-sign font-effect-brick-sign Chrome、Safari
無框畫 canvas-print font-effect-canvas-print Chrome、Safari
裂縫 crackle font-effect-crackle Chrome、Safari
衰減 decaying font-effect-decaying Chrome、Safari
破壞 destruction font-effect-destruction Chrome、Safari
全新 distressed font-effect-distressed Chrome、Safari
耐用木頭 distressed-wood font-effect-distressed-wood Chrome、Safari
大使 emboss font-effect-emboss Chrome、Firefox、Opera、Safari
火災 fire font-effect-fire Chrome、Firefox、Opera、Safari
火災動畫 fire-animation font-effect-fire-animation Chrome、Firefox、Opera、Safari
脆弱 fragile font-effect-fragile Chrome、Safari
草地 grass font-effect-grass Chrome、Safari
冰霜 ice font-effect-ice Chrome、Safari
密托西斯 mitosis font-effect-mitosis Chrome、Safari
霓虹燈 neon font-effect-neon Chrome、Firefox、Opera、Safari
Outline outline font-effect-outline Chrome、Firefox、Opera、Safari
果實 putting-green font-effect-putting-green Chrome、Safari
袖扣 scuffed-steel font-effect-scuffed-steel Chrome、Safari
陰影多個 shadow-multiple font-effect-shadow-multiple Chrome、Firefox、Opera、Safari
交錯 splintered font-effect-splintered Chrome、Safari
靜態 static font-effect-static Chrome、Safari
Stonewash stonewash font-effect-stonewash Chrome、Safari
3D 3d font-effect-3d Chrome、Firefox、Opera、Safari
3D 浮點值 3d-float font-effect-3d-float Chrome、Firefox、Opera、Safari
復古 vintage font-effect-vintage Chrome、Safari
桌布 wallpaper font-effect-wallpaper Chrome、Safari

設定字型樣式的方法有很多種， 經由 CSS 供應商提供我們只是要提供一些點子，讓您快速上手。如要 建議, 試試 Google 搜尋 「css 文字效果」和 不妨瀏覽網路上的其他創意構想！

延伸閱讀

  • 查看 Google Fonts API 所提供之字型系列的完整清單 Google Fonts。
  • 瞭解如何使用網路字型載入器 進一步控管載入字型
  • 進一步瞭解 Google Fonts API 的運作方式， 「技術考量」頁面。