CSS动画Google字体

Google Fonts 现在支持可变字体了！太棒了。

嘿🛠

@jh3yy

你知道吗？🧐

@googlefonts现在提供可变字体，这意味着你可以为它们添加动画效果！😎🔥

太有趣了！😁

💻 codepen.io/jh3y/pen/OJMOm… via @CodePen

2020年7月1日上午11:33

什么是可变字体？

如果你不熟悉可变字体，它们真的很酷。最大的好处是可以用更少的网络请求访问字体变体。这可以减少字体文件的大小！

这一切都得益于这些炫酷的新功能。这些功能允许我们在运行时更改字体的特性，例如weight和slant。除了实用优势之外，它还意味着我们可以为这些特性添加动画效果！

我们将这些特性称为轴。可变字体不必全部支持，也可以选择只支持其中一两个。

有关可变字体的更多信息，请查看这篇文章！

那么 Google 字体怎么样？

嗯，在使用 Google Fonts 的可变字体时，有一件事不太清楚。如何获取整个字体？

假设我们选择“Roboto Mono”并进行设置。

@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap');

h1 {
  font-family: 'Roboto Mono', monospace;
}

现在我们决定更改可变字体的设置。我们知道“Roboto Mono”支持“可变粗细轴”。如果我们尝试更新示例中的粗细，没有任何反应……

h1 {
  font-variation-settings: 'wght' 300;
}
h1 {
  font-variation-settings: 'wght' 700;
}

嗯。怎么了？

如果我们检查特定的重量，然后使用“选择此样式”，我们就可以抓住我们想要的重量！

更新我们的 CSS 将反映该权重。

对于多个权重，请输入权重，后跟分号。

@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@200;700&display=swap')

将鼠标悬停在此演示中的单词上即可转换到更高的级别wght。

不过，我注意到这里有个有趣的现象。输入范围内的任意两个值，你就可以访问整个范围！

例如，在这里我使用

@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@699;700&display=swap')

但我仍然可以访问整个支持范围内的权重。

不知道以后这种情况会不会改变？或者，输入任意两个值都会触发你想要变量版本的情况？

我们如何让它们动起来？

与普通的 CSS 动画没什么区别。我们可以为“font-variation-settings”属性添加动画。

@keyframes breathe {
  50% {
    font-variation-settings: 'wght' 700;
  }
}

这里我们使用一些变量来决定下限和上限。

我们如何进一步错开字符？为此，我们可以在 HTML 中拆分字符。

<h1>
  <span style="--index: 0">W</span>
  <span style="--index: 1">a</span>
  <span style="--index: 2">a</span>
  <span style="--index: 3">a</span>
  <span style="--index: 4">v</span>
  <span style="--index: 5">e</span>
</h1>

注意到我们是如何为字符索引使用内联 CSS 变量的吗？我们可以用它来指定字符的动画延迟。作用域变量意味着更少的 CSS。

h1 span {
  animation-delay: calc((var(--index) - 6) * 0.25s);
}

这将给我们这个。

我们可以更进一步，添加一些颜色并堆叠文字😎混合我们的一些 CSS 转换，我们可以做很多事情！

对于我最初的演示，我将一些东西与 GreenSock 和 Splitting 放在一起。

但是，我们没有理由不能仅使用 CSS 来做类似的事情。

我们可以通过创建类似的关键帧来交换饱和度。

@keyframes rise {
  50% {
    font-variation-settings: 'wght' var(--upper);
    color: hsl(var(--hue), 80%, 65%);
  }
}

就是这样！

从 Google Fonts 中获取一些可变字体，试试看！我还没试过所有字体。目前为止，我只看到对weightaxis 的支持。

如果您发现任何支持其他轴的，请告诉我！

有没有什么好的可变字体资源？我很想看看！

一如既往，我很乐意听听你的意见。欢迎留言或在Twitter 上关注我！