CSS API 更新

Google Fonts 现在完全支持在 v2 API 更新中使用可变字体。我们将介绍如何同时调用单个和多个字体系列,以及如何指定轴范围。如需深入了解可变字体,请参阅来自 TypeNetwork 的 David Berlow 撰写的互动式插图手册

最新资讯

这一切都以新的基准网址开头:

https://fonts.googleapis.com/css2

用于为每个系列内指定样式的语法已更改为描述可变字体的“设计空间”。

快速入门指南

复制此 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>

使用浏览器打开文件时,页面应以 Crimson Pro 字体呈现文本“Make the Web Beautiful”。

让网络变得更美好!

多个家庭

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

例如,如需请求获取 Crimson ProLiterata 字体,请执行以下操作:

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 中。

让网络变得更美好!
让网络变得更美好!

轴范围

可变字体可提供连续的样式范围,通常不会有额外的延迟。这与自适应设计相关。 这种动态排版使用连续的样式范围,不仅可在页面上提供 100 到 900 之间的所有粗细,还能根据某些情况灵活调整粗细。

如需请求可变字体轴的范围,请使用 .. 联接这两个值

字体 请求
深红色 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
Crimson Pro Baed 斜体和 [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
深红色专业粗体 https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@700
深红色专业版常规和粗体 https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@400;700
深红色专业粗体和粗体斜体 https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@0,700;1,700

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

默认样式

如果请求未指定轴的位置或范围,则使用默认位置。斜体轴的默认位置为 0(正常),重量轴的默认位置为 400(常规)。

对于轴不包含默认位置的系列,没有为这些轴指定位置的请求将失败。例如,当请求系列的权重轴介于 500 到 900 之间时,必须指定权重位置。

非标准权重

对于静态字体,粗细样式通常指定为 100 的倍数(例如 300、400、700)。可变字体既提供标准粗细又提供中间粗细。如需呈现中间权重,请执行以下操作:

https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@450
您的浏览器似乎不支持可变字体 (caniuse)。在支持字体变体的浏览器上,以下文本应以视觉上不同的粗细(400、450 和 500)呈现 Crimson Pro。
如果您的浏览器完全支持可变字体 (caniuse),则以下文本应以视觉上不同的粗细度(400、450 和 500)呈现 Crimson Pro。
让网络变得更美好!
让网络变得更美好!
让网络变得更美好!

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

请准确说明您当前使用的样式。该 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:轴标记,例如 italwdthwght

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:将以所请求字体显示的文本

displayauto | block | swap | fallback | optional

旧版浏览器支持

不支持可变字体的浏览器可能无法按预期显示您的设计。查看浏览器对 Caniuse 的可变字体支持。

通过练习逐步增强,您可以避免在旧版浏览器中出现意外行为。在 CSS 中使用 @supports 查询,以控制可变字体功能。

在此示例中,我们希望使用 Markazi 文本的粗细为 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。一般来说,请求范围的回退在旧版浏览器中可用。

Axis 后备广告
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 的工作原理,请参阅技术注意事项页面。