CSS Google Fonts
Google Fonts
如果您不想使用 HTML 中的任何標準字型，您可以使用 Google Fonts。
Google Fonts 可免費使用，擁有超過 1000 種字型可供選擇。
如何使用 Google Fonts
只需在 `
` 部分新增一個特殊的樣式錶鏈接，然後在 CSS 中引用字型即可。示例
這裡，我們想使用 Google Fonts 中的名為 "Sofia" 的字型
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia">
<style>
body {
font-family: "Sofia", sans-serif;
}
</style>
</head>
結果
Sofia 字型
Lorem ipsum dolor sit amet.
123456790
自己動手試一試 »
示例
這裡，我們想使用 Google Fonts 中的名為 "Trirong" 的字型
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Trirong">
<style>
body {
font-family: "Trirong", serif;
}
</style>
</head>
結果
Trirong 字型
Lorem ipsum dolor sit amet.
123456790
自己動手試一試 »
示例
這裡，我們想使用 Google Fonts 中的名為 "Audiowide" 的字型
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Audiowide">
<style>
body {
font-family: "Audiowide", sans-serif;
}
</style>
</head>
結果
Audiowide 字型
Lorem ipsum dolor sit amet.
123456790
自己動手試一試 »
注意： 在 CSS 中指定字型時，始終至少列出一個備用字型（以避免意外行為）。所以，這裡也應該在列表末尾新增一個通用字體系列（如 serif 或 sans-serif）。
有關所有可用 Google Fonts 的列表，請訪問我們的 How To - Google Fonts 教程。
使用多個 Google Fonts
要使用多個 Google 字型，只需用豎線字元 (`|`) 分隔字型名稱，如下所示
示例
請求多個字型
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Audiowide|Sofia|Trirong">
<style>
h1.a {font-family: "Audiowide", sans-serif;}
h1.b {font-family: "Sofia", sans-serif;}
h1.c {font-family: "Trirong", serif;}
</style>
</head>
結果
Audiowide 字型
Sofia 字型
Trirong 字型
自己動手試一試 »
注意： 請求多個字型可能會減慢您的網頁速度！所以請小心。
樣式化 Google Fonts
當然，您可以使用 CSS 隨意樣式化 Google Fonts！
示例
樣式化 "Sofia" 字型
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia">
<style>
body {
font-family: "Sofia", sans-serif;
font-size: 30px;
text-shadow: 3px 3px 3px #ababab;
}
</style>
</head>
結果
Sofia 字型
Lorem ipsum dolor sit amet.
123456790
自己動手試一試 »
啟用字型效果
Google 還啟用了您可以使用的各種字型效果。
首先將 `effect=effectname` 新增到 Google API，然後將一個特殊的類名新增到將使用特殊效果的元素中。類名始終以 `font-effect-` 開頭，並以 `effectname` 結尾。
示例
為 "Sofia" 字型新增火效果
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia&effect=fire">
<style>
body {
font-family: "Sofia", sans-serif;
font-size: 30px;
}
</style>
</head>
<body>
<h1 class="font-effect-fire">Sofia on Fire</h1>
</body>
結果
Sofia on Fire
自己動手試一試 »
要請求多種字型效果，只需用豎線字元 (`|`) 分隔效果名稱，如下所示
示例
為 "Sofia" 字型新增多種效果
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia&effect=neon|outline|emboss|shadow-multiple">
<style>
body {
font-family: "Sofia", sans-serif;
font-size: 30px;
}
</style>
</head>
<body>
<h1 class="font-effect-neon">Neon Effect</h1>
<h1 class="font-effect-outline">Outline Effect</h1>
<h1 class="font-effect-emboss">Emboss Effect</h1>
<h1 class="font-effect-shadow-multiple">Multiple Shadow Effect</h1>
</body>
結果
Neon Effect
Outline Effect
Emboss Effect
Multiple Shadow Effect
自己動手試一試 »
