有没有一种方法可以使字体的梯度动画？

Question

假设我想使用这种字体：

@font-face {
  src: url("https://cdn.glitch.global/f206356a-29f3-4941-a91f-d78ba238df98/Abelone-FREE.otf?v=1650648293770") format("opentype");
  font-family: "Abelone";
}

* {
  font-family: "Abelone";
  font-size: 80px;
}

Hello, world.

有没有办法用CSS或JavaScript来动画包含的梯度？如果没有，例如，是否有其他仅使用SVG或剪裁口罩进行类似的方法？

重要：铬不会显示梯度。请使用Firefox查看它们。

编辑：Opentype SVG字体显示/渲染

1. ​
2. ​

​a href =“ https://blog.adobe.com/en/publish/2017/11/11/02/color-font-week-abelone” rel =“ nofollow noreforler”> colorfontweek - abelone

Answer 1

CSS过滤器可能会有可能。

HTML代码：

<div class=animated>Does it work?</div>

CSS：

div.animated {
filter: hue-rotate(50deg);
}

这应该更改颜色。