CSS 谷歌字体

谷歌字体

如果您不想使用 HTML 中的任何标准字体，则可以使用 Google Fonts API 向页面添加数百种其他字体。

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

如何使用谷歌字体

只需添加一个样式表链接并引用您选择的字体系列：

实例1

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia">
<style>
body {
  font-family: "Sofia";
  font-size: 22px;
}
</style>
</head>
<body>
<h1>Sofia Font</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
</body>
</html>

运行一下

实例2

应用 Google 字体中的 Trirong：

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

运行一下

实例3

应用了 Google 字体中的 Audiowide：

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

运行一下

如需所有可用的 Google 字体列表，请访问本站的完整的 Google 字体。

应用多种谷歌字体

<!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样式一起使用谷歌字体！

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

运行一下

启用字体效果

谷歌还启用了不同的字体效果，你可以使用。

首先将 effect=effectname 添加到 googleapi，然后将特殊类名添加到要使用特殊效果的元素。类名总是以 font effect 开头，以 effectname 结尾。

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

运行一下

CSS 谷歌字体

谷歌字体

如何使用谷歌字体

实例1

实例2

实例3

应用多种谷歌字体

设置Google字体样式

启用字体效果

分类导航