如何使用Google Fonts?

如何使用 Google Fonts API

• Google Fonts 提供了超过 800 种的高质量的字体，所有的浏览器都兼容，无需引入 JavaScript，简单易用，更重要的是，免费。（虽然，暂时不支持中文字体，因为中文字体库实在是太大了）。

挑选字体

登录Google Fonts

• 在主页中，您可以直接浏览所有的字体，可以按单个词语来查看，或者按句子段落来查看整体效果，还可以调整字体大小。如果您对字体分类比较熟悉，就可以使用右边的搜索条件对字体作筛选。找到您喜欢的字体之后，点击"+"按钮，然后在网页下方的"Family Selected"中即可找到您添加的所有字体。

在线测试您的文字

• 直接在您选好的字体输入框里面输入您要测试的文字，来查看效果。您还可以调整其它的与字体相关的样式，比如字体大小，间隔，变换，等等。

在您的网页中添加字体链接

• 如果确认使用该字体， 在网页下方的"Family Selected"中，点击"-"按钮，在接下来的页面中，您将看到详细的说明，包括字体链接和如何将字体添加到您的网页中。

Standard 方式：
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">

@import 方式：
<style>
@import url('https://fonts.googleapis.com/css?family=Roboto');
</style>

• 下一步定义在那个标签上使用该字体，例如：在<class="myheader">标签上使用，
  .myheader {font-family: 'Roboto', cursive;}
  大功告成，您现在可以打开您的网页欣赏一下了。