CSS Google 字体
Google 字体
如果您不想使用 HTML 中的任何标准字体，您可以使用 Google Fonts。
Google Fonts 可以免费使用，并且有超过 1000 种字体可供选择。
如何使用 Google 字体
只需在<head>部分，然后在 CSS 中引用字体。
例子
在这里，我们要使用来自 Google Fonts 的名为“Sofia”的字体：
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia">
<style>
身体 {
字体系列：“Sofia”，无衬线；
}
</style>
</head>
结果：
索菲亚字体
Lorem ipsum dolor sit amet。
123456790
亲自尝试 »
例子
在这里，我们要使用来自 Google Fonts 的名为“Trirong”的字体：
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Trirong">
<style>
身体 {
字体系列：“Trirong”，衬线；
}
</style>
</head>
结果：
字体类型：
Lorem ipsum dolor sit amet。
123456790
亲自尝试 »
例子
在这里，我们要使用来自 Google Fonts 的名为“Audiowide”的字体：
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Audiowide">
<style>
身体 {
字体系列：“Audiowide”，无衬线；
}
</style>
</head>
结果：
Audiowide 字体
Lorem ipsum dolor sit amet。
123456790
亲自尝试 »
笔记： 在 CSS 中指定字体时，始终至少列出一种后备字体（以避免出现意外行为）。因此，您还应该在此处将通用字体系列（如 serif 或 sans-serif）添加到列表末尾。
要查看所有可用的 Google 字体列表，请访问我们的 如何 - Google 字体教程.
使用多种 Google 字体
要使用多种 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 字体
索菲亚字体
字体类型：
亲自尝试 »
笔记： 请求多种字体可能会降低您的网页速度！因此请多加注意。
为 Google 字体添加样式
当然，您可以使用 CSS 按照自己喜欢的方式设置 Google 字体的样式！
例子
设置“Sofia”字体的样式：
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia">
<style>
身体 {
字体系列：“Sofia”，无衬线；
字体大小：30px；
文字阴影：3px 3px 3px #ababab;
}
</style>
</head>
结果：
索菲亚字体
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>
身体 {
字体系列：“Sofia”，无衬线；
字体大小：30px；
}
</style>
</head>
<body>
<h1 class="font-effect-fire">索菲亚之火</h1>
</body>
结果：
索菲亚之火
亲自尝试 »
要请求多种字体效果，只需用管道字符 (|）， 像这样：
例子
为“Sofia”字体添加多种效果：
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia&effect=neon|outline|emboss|shadow-multiple">
<style>
身体 {
字体系列：“Sofia”，无衬线；
字体大小：30px；
}
</style>
</head>
<body>
<h1 class="font-effect-neon">霓虹灯效果</h1>
<h1 class="font-effect-outline">轮廓效果</h1>
<h1 class="font-effect-emboss">浮雕效果</h1>
<h1 class="font-effect-shadow-multiple">多重阴影效果</h1>
</body>
结果：
霓虹灯效果
轮廓效果
浮雕效果
多重阴影效果
亲自尝试 »
