Google Fonts API 使用入门

本指南介绍了如何使用 Google Fonts API 将字体添加到网页中 页面。您无需进行任何编程；你所要做的就是添加一个特殊的 样式表链接至您的 HTML 文档，然后在 CSS 样式中引用字体。

简单示例

下面是一个示例。复制以下 HTML 并将其粘贴到文件中：

<html>
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet"
          href="https://fonts.googleapis.com/css?family=Tangerine">
    <style>
      body {
        font-family: 'Tangerine', serif;
        font-size: 48px;
      }
    </style>
  </head>
  <body>
    <div>Making the Web Beautiful!</div>
  </body>
</html>

然后在现代网络浏览器中打开该文件。您应该会看到一个显示 以下为“Tangerine”字体：

打造美丽的网络！

句子是普通文本，因此您可以使用 CSS 更改其外观。试试看 向上例中的样式添加阴影：

body {
  font-family: 'Tangerine', serif;
  font-size: 48px;
  text-shadow: 4px 4px 4px #aaa;
}

现在，您应该可以在文本下方看到阴影：

打造美丽的网络！

这只是使用 Fonts API 和 CSS 可以执行的操作的开始。

概览

只需两步即可开始使用 Google Fonts API：

  1. 添加样式表链接以请求所需的网络字体： 

    <link rel="stylesheet"
  href="https://fonts.googleapis.com/css?family=Font+Name">

  2. 在样式表中使用请求的网页字体设置元素的样式： 

    .css-selector {
font-family: 'Font Name', serif;
}

    或者为元素本身采用内嵌样式： 

    <div style="font-family: 'Font Name', serif;">Your text</div>

。

如需查看您可以使用的字体列表，请参阅 Google Fonts。

在样式表网址中指定字体系列和样式

要确定在样式表链接中使用哪个网址，请先使用 Google Fonts API 基准网址：

https://fonts.googleapis.com/css

然后，添加 family= 网址参数，并指定一个或多个字体系列名称和 样式。

例如，要请求 Inconsolata 字体：

https://fonts.googleapis.com/css?family=Inconsolata

若要请求多个字体系列，请用竖线字符分隔名称 （|）。

例如，请求字体 橘红色、 Inconsolata 和 Droid Sans：

https://fonts.googleapis.com/css?family=Tangerine|Inconsolata|Droid+Sans

请求多种字体可让您在网页中使用所有这些字体。 （但不要过度使用；大多数网页不需要很多字体，而且请求 大量字体可能会导致网页加载速度变慢）。

Google Fonts API 通过 默认值。若要请求其他样式或粗细，请将英文冒号 (:) 附加到 指定字体，后跟一系列以英文逗号 (,) 分隔的样式或粗细。

例如：

https://fonts.googleapis.com/css?family=Tangerine:bold,bolditalic|Inconsolata:italic|Droid+Sans

要了解特定字体适用的样式和粗细，请参见 Google Fonts 中列出的字体。

对于请求的每种样式，可以指定全名或 缩写词；对于权重，您可以指定数值权重：

样式 说明符
斜体 italic 或 i
粗体 bold 或 b，或者数字权重（例如 700）
粗斜体 bolditalic 或 bi

例如，要请求 Cantarell 斜体和 Droid Serif 粗体，您可以使用任意 以下网址之一： 

https://fonts.googleapis.com/css?family=Cantarell:italic|Droid+Serif:bold
https://fonts.googleapis.com/css?family=Cantarell:i|Droid+Serif:b
https://fonts.googleapis.com/css?family=Cantarell:i|Droid+Serif:700

使用 font-display

font-display 控制字体不可用时的操作。指定其他值 通常与默认的 auto 不同。

在查询字符串 display 参数中传递所需的值： 

https://fonts.googleapis.com/css?family=Roboto&display=swap

指定脚本子集

Google Font Directory 中的部分字体 支持多种文字（如拉丁文、西里尔文和希腊文）。订单 用于指定应下载哪些子集，就应该使用 。

例如，要请求 Roboto Mono 字体，则网址为 是：

https://fonts.googleapis.com/css?family=Roboto+Mono&subset=cyrillic

要请求 Roboto Mono 字体，则网址为 是：

https://fonts.googleapis.com/css?family=Roboto+Mono&subset=greek

要同时请求 Roboto Mono 字体，则网址为 是：

https://fonts.googleapis.com/css?family=Roboto+Mono&subset=greek,cyrillic

如果有拉丁语子集，则始终包含该子集，无需指定。 请注意，如果客户端浏览器支持 unicode-range (http://caniuse.com/#feat=font-unicode-range) 系统会忽略子集参数浏览器都会从这些子集中选择 以获取渲染文本所需的内容。

有关可用字体和字体子集的完整列表，请参阅 Google Fonts。

优化字体请求

很多时候，如果您想在自己的网站或应用中使用网页字体 提前知道您需要提供哪些信函如果您使用 网页字体。

在这些情况下，您应考虑在字体中指定 text= 值 请求网址。这样，Google 便可返回针对您的 请求。在某些情况下，这样做最多可将字体文件缩小 90%。

如需使用此功能，只需将 text= 添加到您的 Google Fonts API 请求即可。对于 例如，如果您只使用“Inonsolata” 作为博客标题，则可以输入 标题本身作为 text= 的值。请求将如下所示 例如：

https://fonts.googleapis.com/css?family=Inconsolata&text=Hello

与所有查询字符串一样，您应对值进行网址编码：

https://fonts.googleapis.com/css?family=Inconsolata&text=Hello%20World

此功能也适用于国际字体，可让您指定 UTF-8 字符。例如，“¡Hola!表示为：

https://fonts.googleapis.com/css?family=Inconsolata&text=%c2%a1Hola!

启用字体效果（Beta 版）

在网站上制作标题或显示文字时，您通常需要 为文本增添装饰风格。为了简化您的工作，Google 提供了一系列字体效果，让您可以轻松使用 生成美观的显示文字例如：

这是字体效果！

若要使用此 Beta 版功能，只需将 effect= 添加到 Google Fonts API 请求，并将相应的类名称添加到您 应用场景在上面的示例中，我们使用了 shadow-multiple 字体效果， 因此请求如下所示：

https://fonts.googleapis.com/css?family=Rancho&effect=shadow-multiple

要使用该效果，请将相应的类名称添加到您的 HTML 元素中。通过 对应的类名称始终使用前缀为 font-effect- 的效果名称。 因此 shadow-multiple 的类名称为 font-effect-shadow-multiple：

<div class="font-effect-shadow-multiple">This is a font effect!</div>

您可以用竖线分隔各种效果名称，从而请求多种效果 字符 (|)。

https://fonts.googleapis.com/css?family=Rancho&effect=shadow-multiple|3d-float

以下是我们提供的所有字体效果的完整列表：

效果 API 名称 类名称 支持
立体图像 anaglyph font-effect-anaglyph Chrome、Firefox、Opera、Safari
砖砌标牌 brick-sign font-effect-brick-sign Chrome、Safari
画布照片 canvas-print font-effect-canvas-print Chrome、Safari
碎裂 crackle font-effect-crackle Chrome、Safari
衰减 decaying font-effect-decaying Chrome、Safari
销毁 destruction font-effect-destruction Chrome、Safari
痛苦 distressed font-effect-distressed Chrome、Safari
仿木材 distressed-wood font-effect-distressed-wood Chrome、Safari
浮雕 emboss font-effect-emboss Chrome、Firefox、Opera、Safari
火灾 fire font-effect-fire Chrome、Firefox、Opera、Safari
火焰动画 fire-animation font-effect-fire-animation Chrome、Firefox、Opera、Safari
易碎 fragile font-effect-fragile Chrome、Safari
草 grass font-effect-grass Chrome、Safari
冰 ice font-effect-ice Chrome、Safari
有丝分裂 mitosis font-effect-mitosis Chrome、Safari
霓虹色 neon font-effect-neon Chrome、Firefox、Opera、Safari
Outline outline font-effect-outline Chrome、Firefox、Opera、Safari
推杆进洞 putting-green font-effect-putting-green Chrome、Safari
磨砂钢 scuffed-steel font-effect-scuffed-steel Chrome、Safari
阴影多个 shadow-multiple font-effect-shadow-multiple Chrome、Firefox、Opera、Safari
碎裂 splintered font-effect-splintered Chrome、Safari
静态 static font-effect-static Chrome、Safari
Stonewash stonewash font-effect-stonewash Chrome、Safari
三维 3d font-effect-3d Chrome、Firefox、Opera、Safari
三维浮点 3d-float font-effect-3d-float Chrome、Firefox、Opera、Safari
复古 vintage font-effect-vintage Chrome、Safari
壁纸 wallpaper font-effect-wallpaper Chrome、Safari

设置字体样式的方式还有许多其他方式 。我们只是提供了一些建议，希望能帮助您顺利上手。有关 提示，尝试通过 Google 搜索 “css 文字效果”和 您可以快速浏览网上已有的许多创意！

深入阅读