本指南說明如何使用 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:
新增樣式表連結,要求所需的網路字型:
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Font+Name">
在樣式表中,使用要求的網路字型設定元素樣式:
.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 的運作方式,請參閱「技術考量」頁面。