如何使用 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;}
大功告成,您现在可以打开您的网页欣赏一下了。