交换字体时的字体转换

Question

我从 Google 字体加载了一个外部字体。我使用font-display: swap; 回退到默认字体，直到加载外部字体。但是，当它交换字体时，过渡真的很突然。

有没有办法将这种字体交换行为转换为例如淡入淡出转换？

Answer 1

您不能在 font-family 中使用过渡或动画。但是，您可以尝试使用两个 div，每个 div 使用不同的字体。您默认隐藏第二个 div，然后将第一个 div 的不透明度设置为 0，将第二个 div 的不透明度设置为 1。