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
自己动手试一试 »
