css - 页面加载时可变字体闪烁

Question

我有以下问题:我正在使用家庭内部( https://rsms.me/inter/ )中的可变字体并通过以下方式实现它:

@font-face {
  font-family: 'Inter var';
  font-weight: 100 900;
  font-display: swap;
  font-style: normal;
  font-named-instance: 'Regular';
  src: url("Inter-roman.var.woff2?v=3.15") format("woff2");
}

html { font-family: 'Inter var', sans-serif; }

在设置字体样式时，我只想更改字体粗细，因此我这样声明:

p { font-variation-settings: 'wght' 200; }

浏览器以正确的系列和粗细呈现字体，但不幸的是，在页面加载时，字体总是很快“闪烁”。在我看来，浏览器首先以正常的字体粗细呈现字体，然后以我想要的粗细重新呈现它。这个问题发生在我使用变量 font-variation-settings 的所有字体上。
该行为发生在每次页面加载时，也在重新加载时发生。您可以在此处查看页面重新加载期间的问题:

谢谢你的提示!

Answer 1

正如我们发现的，字体闪烁的原因有很多。

帖子创建者找到了提示此帖子的问题的解决方案:
“我以某种方式修复了它:我问过字体的创建者，这是他的回答:“可能是因为您正在使用 font-display:swap(它故意导致对未缓存在客户端中的字体的请求的“闪烁” ，这应该很少见。)请参阅 developer.mozilla.org/en-US/docs/Web/CSS/@font-face/...” 如果我将字体显示更改为阻止，它不再闪烁，但有一个更长的时间，字体不会被渲染。我决定改变元素并使用标准的非可变字体。 – Mista K。”

在服务器上加载:
虽然我当然不是这方面的专家。在服务器上加载文件可解决此问题。这可能是由于样式表在服务器上加载时被缓存。

改变字体:
这不是一个修复，但不幸的是，错误可能是由字体本身引起的。

另一个快速修复:
元素可能需要添加加载屏幕，因此可以在其中加载字体。

抱歉，这不是最权威的帖子，这只是我们在讨论此问题时发现的解决方案。随意对此发表评论以补充此内容，甚至告诉我我错了。