我看到 Google Fonts 推出了一个新的设计(推文)。 与上次大型重新设计相比,这次感觉更具迭代性。 我几乎看不出区别,除了它是蓝色的而不是红色的,还有一个非常棒的复选框:仅显示可变字体。

在上面的主导航中,提供仅显示可变字体的选项是一个非常大胆的功能。 这是对该功能的坚定承诺。 鉴于 Google Fonts 拥有约 90% 的托管网络字体的市场份额,并处理了 数万亿次 请求,这将极大地激发人们对 可变字体 的兴趣和使用。 网络设计师和开发人员对可变字体已经期待了一段时间,但我敢打赌,今年我们将开始看到它在更广泛的领域中使用。
一些关于可变字体的灵感促使了微型网站的诞生。 请参阅 v-fonts.com 和 Axis-Praxis。 这里还有一个:variablefonts.io! 与其他网站一样,它也提供了交互式示例,但它还包含最新的直接建议和资源链接。

Google Fonts 最近做得另一件非常棒的事情是允许使用 font-display
。 它有一个不错的默认值 (swap
),并且可以轻松地作为查询参数进行更改。 Matt Hobbs 有一篇 最近的文章 讲述了它的作用、重要性和使用方法。
说到 Google Fonts,我前几天偶然发现了浏览器扩展程序 Snapfont。 这是一个“随心所欲付费”的东西(我给了他们 5 美元)。

它只是用您选择的字体替换网站上的所有字体,让您快速体验一下。 它没有任何选项,因此不适用于微调任何选择。“标题”按钮对我来说根本不起作用。 但我喜欢它简单易用,可以快速体验使用新字体的网站。
嗨,感谢您试用 Snapfont! 标题基本上只匹配标题标签。 有些情况下它不会应用标题字体,但这种情况很少见。
此外,我对可变字体感到非常兴奋,Snapfont 处于能够试用可变字体的绝佳位置,但不幸的是,如今获得 Chrome 扩展程序的批准需要 1-3 周时间。 目前正在准备一个更新,希望它能在下周获得批准。 如果您想获得最新更新,您仍然可以通过 Gumroad(https://gumroad.com/l/getsnapfont)手动下载字体,并通过 Google 扩展程序页面手动加载它。
不确定它与 Firefox 的阅读模式有何不同
有谁知道如何下载可变字体以将其托管在自己的服务器上? 我通常使用此服务,但它尚不支持可变字体:https://google-webfonts-helper.herokuapp.com/fonts
此外,我甚至没有看到 Google Fonts 提供可变字体文件。 是的,您现在可以在 Google Fonts UI 中添加自定义粗细,但在浏览器中,您不会只获得一个字体文件,即使您的浏览器支持可变字体,每个粗细仍然是一个单独的请求和文件。 只需查看此 CSS 文件 - 它包含自定义粗细 666,但仍然作为附加的单独 woff2 文件:https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@400;666
好的,我找到了。 您可以获取可变字体文件,但不是通过 GUI,而是通过 API。 构建 CSS 文件的 URL,打开 CSS 文件,然后使用指向单个可变字体文件的(神秘的)链接。 语法在此处解释
https://variablefonts.io/implementing-variable-fonts/#gf-api
https://developers.google.com/fonts/docs/css2#forming_api_urls