一、入门使用 Google Fonts
Google Fonts 是一项可以免费使用的字体服务，网站设计人员可以通过它，为其网站选择适合的字体。在 Google Fonts 中有超过 800 种字体，你可以浏览、选择并在网页中应用。 我们可以在 HTML 文件中通过以下方法使用 Google Fonts：
<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<style>
body {
font-family: 'Open Sans', sans-serif;
}
</style>
首先，我们从 Google Fonts 中的链接获取所需字体。该链接包含了我们所使用字体的信息。可以在 HTML 的’shead’ 中将该链接文件导入。在’style’ 字段中，我们将字体应用到网页正文 body 的样式上。 这段代码中的’sans-serif’ 意味着，如果指定的字体没有被找到，浏览器将默认采用无衬线字体。
二、Google Fonts 中的分类
Google Fonts 中的各个字体被分为六大类别： Serif、 Sans-serif、 Display、 Handwriting、 Monospace、 System fonts。主要分类如下：
1.Sans-serif
Sans-serif 字体适用于任何网站和设计项目。它的主要特点是没有衬线，因此易于阅读，非常常用，包括了以下字体：
<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<style>
body {
font-family: 'Open Sans', sans-serif;
}
</style>
2.Serif
Serif 字体通常更具有艺术性和设计风格。它的特点是有衬线，可以更好地突出文字的重点，包括了以下字体：
<link href='https://fonts.googleapis.com/css?family=Merriweather' rel='stylesheet' type='text/css'>
<style>
body {
font-family: 'Merriweather', serif;
}
</style>
3.Display
Display 字体非常适合作标题使用，因为它们会引起人们的注意并且非常容易辨认，包括了以下字体：
<link href='https://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
<style>
h1 {
font-family: 'Lobster', cursive;
}
</style>
4.Handwriting
Handwriting 字体看起来像手写，很漂亮，非常适合作为个人博客的标题或者商业宣传品的设计。包括了以下字体：
<link href='https://fonts.googleapis.com/css?family=Shadows+Into+Light' rel='stylesheet' type='text/css'>
<style>
h1 {
font-family: 'Shadows Into Light', cursive;
}
</style>
5.Monospace
Monospace 字体是一种等宽字体，可以使代码变得更具有可读性。在编写代码的时候非常实用，包括了以下字体：
<link href='https://fonts.googleapis.com/css?family=Inconsolata' rel='stylesheet' type='text/css'>
<style>
pre {
font-family: 'Inconsolata', monospace;
}
</style>
6.System fonts
System fonts 是最新发布的特性，它可以在不引用 Google Fonts 的情况下使用计算机里已经存在的字体。这对于节省页面加载时间非常有帮助，因为不需要再加载与 Google Fonts 相关的链接文件。以下是代码示例：
<style>
.system-font {
font-family: system-ui;
}
</style>
三、复合字体的使用
如果你想在同一篇文章中同时使用两种及以上的字体，你可以通过以下两种方法实现：
1、HTML 代码的应用
<div style="font-family: 'Montserrat', sans-serif;">
<p>这是一个 Montserrat 字体</p>
<p style="font-family: 'Lobster', cursive;">这是个 Lobster 字体</p>
</div>
2、CSS @font-face 的应用
‘Montserrat-Medium’字体的CSS代码如下：
@font-face {
font-family: 'Montserrat-Medium';
src: url('Fonts/Montserrat-Medium.ttf');
}
通过以下 CSS 将该 Montserrat-Medium 字体应用到某一元素中：
.class-name {
font-family: 'Montserrat-Medium', sans-serif;
}
四、高级用法
1、谷歌字体 JavaScript API
谷歌字体 JavaScript API 是一个用于更简单使用 Google Fonts 的工具。
<!DOCTYPE html>
<html>
<head>
<title>Tooltip example</title>
<link href='https://fonts.googleapis.com/css?family=Cherry+Swash' rel='stylesheet'>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js'></script>
<script src='https://cdn.rawgit.com/mattmezza/googlefontpicker/1.1/googlefontpicker.min.js'></script>
<script>
$(function () {
$('.font-selector').googleFontPicker();
});
</script>
<style>
body {
font-family: 'Cherry Swash', cursive;
}
</style>
</head>
<body>
<select class='font-selector'>
<option value='Open+Sans'>
Open Sans
</option>
<option value='Lobster'>
Lobster
</option>
</select>
</body>
</html>
2、Font Data API
Font Data API 是一个 W3C 正在开发的规范，它允许允许浏览器动态下载 Web 字体。这一规范目前仍在调试，但是在未来它可能会让 Google Fonts 更高效地技能名字。
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans" type="text/css" media="all"><!--Optional-->
<style>
@font-face {
font-family: "My Custom Font";
src: url(fonts/my-custom-font.woff) format("woff2");
font-weight: normal;
font-style: normal;
}
p {
font-family: "Open Sans", "My Custom Font", sans-serif;
}
</style>
五、总结
Google Fonts 的使用非常方便，可以通过其提供的各种分类和字体，满足不同场景的需求。而其代码示例也非常实用，方便了源代码使用者更快速地了解 Google Fonts 的使用方式。
