此页面由 Cloud Translation API 翻译。

CSS API 更新

现在，在 v2 API 更新中，Google Fonts 完全支持可变字体。我们将解释了如何调用单个字体系列和多个字体系列，以及如何指定轴范围。如需深入了解可变字体，请参阅此互动插图手册是 TypeNetwork 的 David Berlow。

快速入门指南

复制此 HTML 并将其粘贴到文件中：

<html>
  <head>
    <link rel="stylesheet"
          href="https://fonts.googleapis.com/css2?family=Crimson+Pro">
    <style>
      body {
        font-family: 'Crimson Pro', serif;
        font-size: 48px;
      }
    </style>
  </head>
  <body>
    <div>Making the Web Beautiful!</div>
  </body>
</html>

使用浏览器打开该文件时，网页应呈现以下文本：“ “Web Beautiful”

打造美丽的网络！

多个家人群组

如需请求多个系列，请为每个系列指定 family= 参数。

例如，请求字体 Crimson Pro 和 Literata：

https://fonts.googleapis.com/css2?family=Crimson+Pro&family=Literata

复制此 HTML 并将其粘贴到文件中：

<html>
  <head>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Crimson+Pro&family=Literata">
    <style>
      body {
        font-size: 48px;
      }
      div:nth-child(1) {
        font-family: 'Crimson Pro', serif;
      }
      div:nth-child(2) {
        font-family: 'Literata’, serif;
      }
    </style>
  </head>
  <body>
    <div>Making the Web Beautiful!</div>
    <div>Making the Web Beautiful!</div>
  </body>
</html>

使用浏览器打开该文件后，网页应首先呈现 Crimson Pro 和 Literata，呈现“Making the Web Beautiful”文本。

打造美丽的网络！

轴范围

可变字体提供连续的样式范围，延迟时间这与自适应设计相关。这种动态排版使用连续的样式范围，提供所有网页上的权重在 100 到 900 之间，并相应地调整权重根据某些条件进行预测。

如需请求可变字体轴的范围，请使用 .. 将 2 个值相联接

字体	请求
Crimson Pro [`wght 200-900`]	`https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@200..900`
深红色斜体 [`wght 200-900`]	`https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@1,200..900`
深红色 Pro 粗体斜体和[`wght 200-900`]	`https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@0,200..900;1,700`

您的浏览器似乎不支持可变字体 (caniuse)。在支持字体变体的浏览器上，应呈现以下文本 Crimson Pro 作为一组从 400 到 500 的平滑权重。CSS 动画文本在互动时能平滑地变化风格

如果您的浏览器完全支持可变字体 (caniuse)，那么下面的文本应该会将 Crimson Pro 呈现为介于 400 到 500 之间。CSS 动画可以让文字在交互时顺畅地改变样式。

打造美丽的网络！

个别样式（例如重量）

如果没有样式规范，API 将提供默认样式请求的家庭。要请求其他单个样式（例如特定粗细），在字体系列名称后面附加一个冒号 (:)，后跟一系列轴属性关键字（按字母顺序排列）、一个 @ 符号 (@)，以及一个或多个列表这些轴属性的值的组合

这些示例展示了实际操作。

字体	请求
Crimson Pro（默认）	`https://fonts.googleapis.com/css2?family=Crimson+Pro`
深红色 Pro Bold	`https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@700`
Crimson Pro 普通及粗体	`https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@400;700`
Crimson Pro 粗体和粗斜体	`https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@0,700;1,700`

Google 字体中列出了每个字体系列可用的所有样式。

默认样式

如果请求没有为轴指定位置或范围，则默认位置。斜体轴的默认位置为 0（正常），权重轴的默认值为 400（常规）。

如果系列的轴不包含默认位置，则包含不为这些轴指定位置的操作将会失败例如，在请求权重轴的范围介于 500 到 900 之间，则权重位置必须是。

非标准权重

对于静态字体，粗细样式通常指定为 100 的倍数（例如 300、400、700）。可变字体同时提供标准粗细和中间权重。如需渲染中间权重，请执行以下操作：

https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@450

您的浏览器似乎不支持可变字体 (caniuse)。在浏览器中，则以下文本应呈现深红色分别创建视觉上不同的权重：400、450 和 500。

如果您的浏览器完全支持可变字体 (caniuse)、以下文字应该以视觉上不同的权重“400”呈现 Crimson Pro， 450 和 500

打造美丽的网络！

针对延迟时间和文件大小进行优化

请精确描述您使用的样式。API 提供请求的样式以最紧凑的字体集显示请求未使用的样式可能会导致您的用户下载超过所需字体数据，导致延迟时间更长。如果您仅使用 3 个特定粗细，在您的请求中将它们指定为单独的样式。如果您使用连续的权重范围，请在请求中指定该权重范围。

使用 font-display

font-display 属性可以控制在字体仍在加载或否则不可用如果指定除默认 auto 以外的值，则会导致通常比较合适

在 display 参数中传递所需的值：

https://fonts.googleapis.com/css2?family=Crimson+Pro&display=swap

优化字体请求

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

在这些情况下，您应考虑在字体中指定 text= 值请求网址。这样，Google Fonts 即可返回针对你的请求在某些情况下，这样可以将字体文件的大小减小多达 90%。

如需使用此功能，只需将 text= 添加到您的 API 请求中即可。例如，如果您只使用 Inconsolata 作为博客标题，则可以添加标题自身作为 text= 的值。请求如下所示：

https://fonts.googleapis.com/css2?family=Comfortaa&text=Hello

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

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

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

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

请注意，“text=”只能指定一次。它适用于所有家人群组如果需要，请使用单独的 API 请求跨多个系列进行不同的文本优化。

设置 API 网址

严格程度

总体而言，经过更新的 CSS API 对请求的定义更为严格比原始 CSS API 更容易接受。

通用准则：

按字母顺序列出轴（语言区域：en-US）
轴值组（即元组）需要以数字方式排序
元组不能重叠或碰触（例如 wght 400..500 和 500..600）

API 网址规范

/css2?family=<spec>[&family=<spec>...][&text=<text>][&display=<display>]

spec：<family_name>[:<axis_tag_list>@<axis_tuple_list>]

family_name：字体系列的名称

axis_tag_list：<axis>[,<axis>...] // Sorted alphabetically (en-US locale)

axis：轴标记，例如ital、wdth、wght

axis_tuple_list：<axis_tuple>[;<axis_tuple>...]

axis_tuple：<value>[,<value>...] // Same length as axis_tag_list

value：<range> |<float>

range：<float>..<float>

float：相应轴范围内的值

text：将以所请求的字体显示的文本

display：auto |block |swap |fallback |optional

旧版浏览器支持

不支持可变字体的浏览器可能无法将您的设计显示为。您可以在 caniuse 中查看浏览器的可变字体支持。

通过练习渐进式增强，则可以避免在这些旧版浏览器中出现意外行为。使用@supports 查询来限制可变字体功能。

在本示例中，我们想使用 Markazi Text 的权重 450，如果存在变量，则回退到常规（权重 400）或中（权重 500）以下字体功能不受支持：

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Markazi+Text:wght@450" />

<style>
  * {
    font-family: 'Markazi Text';
    font-weight: 400;
  }

  @supports (font-variation-settings: "wght" 450) {
    * {
      font-family: 'Markazi Text';
      font-weight: 450;
    }
  }
</style>

CSS 请求 Markazi+Text:wght@450 向以下客户端发送权重 450：为非可变字体，将字体粗细设置为 400 和 500。一般来说，旧版浏览器中将提供与请求范围相关的后备广告。

轴	后备
`ital`	0、1
`wght`	100、200、300、400、500、600、700、800、900

这些示例显示了少数几种浏览器在旧版浏览器上可以使用的样式不同请求

请求	旧版浏览器上可用的样式
`ital@0`	`ital@0`
`wght@500`	`wght@500`
`wght@432`	`wght@400;500`
`wght@440..560`	`wght@400;500;600`

可用的可变字体

有关 v2 API 中可用的可变字体的表格，请点击此处。

深入阅读

要查看 Google Fonts API 提供的字体系列的完整列表，请访问 Google Fonts。
详细了解 Google Fonts API 在技术注意事项页面。

CSS API 更新

最新资讯

快速入门指南

多个家人群组

轴范围

个别样式（例如重量）

默认样式

非标准权重

针对延迟时间和文件大小进行优化

使用 font-display

优化字体请求

设置 API 网址

严格程度

API 网址规范

旧版浏览器支持

可用的可变字体

深入阅读