二维码
搜索 ×

CSS 谷歌字体

  • 作者：图形开发学院
  • 更新时间：2023年11月01日
  • 阅读量：0
  • 收藏数：0

CSS 谷歌字体

谷歌字体

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

Google Fonts 是免费使用的，并且有 1000 多种字体可供选择。

如何使用 Google 字体

只需在 <head> 部分添加一个特殊的样式表链接，然后引用 CSS 中的字体即可。

1
2
3
4
5
6
7
8
在这里，我们想使用Google Fonts中名为“Sofia”的字体：

<head>  
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia">**  
<style>  
body {  font-family: "Sofia", sans-serif;}  
</style>  
</head>

结果：

1
2
3
4
5
6
7
8
在这里，我们想使用 Google Fonts 中名为“Trirong”的字体：

<head>  
**<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Trirong">**  
<style>  
body {  font-family: "Trirong", serif;}  
</style>  
</head>

结果：

1
2
3
4
5
6
7
8
在这里，我们想使用 Google Fonts 中名为“Audiowide”的字体：

<head>  
**<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Audiowide">**  
<style>  
body {  font-family: "Audiowide", sans-serif;}  
</style>  
</head>

结果：

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

有关所有可用 Google 字体的列表，请访问我们的操作方法 - Google 字体教程.

使用多种 Google 字体

要使用多个 Google 字体，只需用竖线分隔字体名称即可，如下所示：|

1
2
3
4
5
6
7
8
9
10
请求多种字体：

<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>

结果：

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

设置 Google 字体样式

当然，您可以使用CSS随心所欲地设置Google字体的样式！

1
2
3
4
5
6
7
8
9
10
设置“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>

结果：

启用字体效果

Google 还启用了您可以使用的不同字体效果。

首先添加到 Google API， 然后将一个特殊的类名添加到将使用特殊类名的元素中 影响。类名始终以 开头和结尾。effect=*effectname*``font-effect-``*effectname*

1
2
3
4
5
6
7
8
9
10
11
12
13
14
将火焰效果添加到“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>

结果：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
为“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>

结果：

推荐教程