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

如需请求多个字体系列,请使用竖线字符 (|) 分隔名称。

例如,如需请求字体 TangerineInconsolataDroid 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 中的字体列表。

对于您请求的每个样式,您可以提供全名或缩写;对于权重,您也可以指定数值权重:

风格 说明符
斜体 italici
粗体 boldb 或数值权重(例如 700)
粗斜体 bolditalicbi

例如,如需请求 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 字体目录中的一些字体支持多种文字(例如拉丁语、西里尔语和希腊语)。为了指定应下载哪些子集,应将子集参数附加到网址。

例如,要请求 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%。

如需使用此功能,只需在 Google Fonts API 请求中添加 text= 即可。例如,如果您只使用 Inconsolata 作为博客标题,则可以将标题本身设为 text= 的值。请求如下所示:

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

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

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

此功能也适用于国际字体,允许您指定 UTF-8 字符。例如,“你好!”表示为:

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

启用字体效果(Beta 版)

在网站上设置标题或显示文本时,您通常需要采用装饰性的方式设置文本的样式。为了简化您的工作,Google 提供了一系列字体效果,以便您轻松生成精美的显示文本。例如:

这是一种字体效果!

若要使用此 Beta 版功能,只需将 effect= 添加到 Google Fonts API 请求,并将相应的类名称添加到您希望影响的 HTML 元素中即可。在上面的示例中,我们使用了 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 动画 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 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

设置字体样式的方式还有很多,而且通过 CSS 可以实现很多操作。我们只是提供了一些提示,以帮助您上手。如需更多创意,请尝试在 Google 中搜索“css 文本效果”,并浏览网络上现有的许多创意!

深入阅读

  • 如需查看 Google Fonts API 提供的字体系列的完整列表,请访问 Google Fonts
  • 了解如何使用网页字体加载器更好地控制字体加载。
  • 如需详细了解 Google Fonts API 的工作原理,请参阅技术注意事项页面。