CSS 谷歌字体
谷歌字体
如果你不想使用 HTML 中的任何标准字体，可以使用 Google Fonts。
Google Fonts 免费使用，并提供超过 1000 种字体可供选择。
如何使用 Google Fonts
只需在 <head> 部分添加一个特殊的样式表链接，然后在 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 的列表，请访问我们的 如何 - 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 还启用了你可以使用的不同字体效果。
首先，在 Google API 中添加 effect=effectname，然后为将使用特殊效果的元素添加一个特殊的类名。类名始终以 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
亲自尝试 »
