CSS 谷歌字体

谷歌字体

如果您不想在 HTML 中使用任何标准字体，则可以使用 Google Fonts。

Google Fonts 可免费使用，有超过 1000 种字体可供选择。

如何使用谷歌字体

只需在 <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 Font

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 Font

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 Font

Lorem ipsum dolor sit amet.

123456790

亲自试一试 »

笔记：在 CSS 中指定字体时，始终至少列出一种备选字体（以避免意外行为）。因此，在这里您还应该将通用字体系列（如衬线或无衬线）添加到列表的末尾。

有关所有可用 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 Font

Sofia Font

Trirong Font

亲自试一试 »

笔记：请求多种字体可能会减慢您的网页速度！所以要小心。

设置 Google 字体样式

当然，您可以使用 CSS 随意设置 Google 字体的样式！

示例

设置 "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 Font

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

亲自试一试 »