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 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 中。
轴范围
可变字体可提供连续的样式范围,通常不会有额外的延迟。这与自适应设计相关。 这种动态排版使用连续的样式范围,不仅可在页面上提供 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 |
个体样式,例如粗细
如果没有样式规范,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
针对延迟时间和文件大小进行优化
请准确说明您当前使用的样式。该 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 的可变字体支持。
通过练习逐步增强,您可以避免在旧版浏览器中出现意外行为。在 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 的工作原理,请参阅技术注意事项页面。