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

自己尝试一下 →

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

<h1>Sofia Font</h1>
<p>Lorem ipsum dolor sit amet.</p>
<p>123456790</p>

</body>
</html>


例子

在这里,我们要使用 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

自己尝试一下→

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

<h1>Trirong Font</h1>
<p>Lorem ipsum dolor sit amet.</p>
<p>123456790</p>

</body>
</html>


例子

在这里,我们要使用 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

自己尝试一下→

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

<h1>Audiowide Font</h1>
<p>Lorem ipsum dolor sit amet.</p>
<p>123456790</p>

</body>
</html>


注意:在 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

自己尝试一下→

<!DOCTYPE html>
<html>
<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>
<body>

<h1 class="a">Audiowide Font</h1>

<h1 class="b">Sofia Font</h1>

<h1 class="c">Trirong Font</h1>

</body>
</html>


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



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

自己尝试一下→

<!DOCTYPE html>
<html>
<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>
<body>

<h1>Sofia Font</h1>
<p>Lorem ipsum dolor sit amet.</p>
<p>123456790</p>

</body>
</html>



启用字体效果

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

自己尝试一下→

<!DOCTYPE html>
<html>
<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>
<p class="font-effect-fire">Lorem ipsum dolor sit amet.</p>
<p class="font-effect-fire">123456790</p>

</body>
</html>


要请求多种字体效果,只需用竖线字符分隔效果名称即可 (|),如下所示:

例子

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

自己尝试一下→

<!DOCTYPE html>
<html>
<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>
</html>