開始使用 Google Fonts API

本指南說明如何使用 Google Fonts API 在網頁中加入字型。您不必進行任何程式設計，只需在 HTML 文件中加入特殊的 stylesheet 連結，然後參照 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

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

舉例來說，如要要求 Tangerine、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-range (http://caniuse.com/#feat=font-unicode-range)，系統會忽略子集參數；瀏覽器將從字型支援的子集中，選取轉譯文字所需的內容。

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

最佳化字型要求

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

在這種情況下，建議您考慮在字型要求網址中指定 text= 值。這可讓 Google 傳回針對您的要求進行最佳化的字型檔案。在某些情況下，這麼做可將字型檔案大小減少最多 90%。

如要使用這項功能，只要將 text= 新增至 Google Fonts API 要求即可。舉例來說，如果你只有使用 Inconsolata 做為網誌標題，可以將標題本身設為 text= 的值。要求看起來會像這樣：

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

如同所有查詢字串，您應該使用網址編碼值：

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

這項功能也適用於國際字型，可讓您指定 UTF-8 字元。例如，「Hola!」會以下列格式表示：

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

啟用字型效果 (Beta 版)

製作網站的標題或顯示文字時，通常會想以裝飾方式使文字的風格更獨特。為了簡化您的工作，Google 提供一系列字型效果，您無需費心製作精美的顯示文字。例如：

這是字型效果！

如要使用此 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 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 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 的運作方式，請參閱「技術考量」頁面。