页面加载时可变字体闪烁

Question

我有以下问题：我正在使用来自 inter 家族 (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

这似乎是字体本身的问题，我能提供的最佳解决方案是简单地使用另一种字体。我建议使用 google 字体

HTML:

    <head>
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans">
    </head>

CSS:

p {
    font-family: 'Open Sans';
}

------------原版Post----------

为什么不直接使用 p {font-weight: 200;}，这可能会解决问题并且可能更易于阅读（至少从外部角度来看）

也可以尝试将 font-family 添加到 body 而不是 html 如果这不起作用

Answer 2

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

post 问题的解决方案由 post 创建者找到：

“我已经以某种方式修复了它：我问过字体的创建者，这是他的回答：”可能是因为你正在使用 font-display:swap（它故意导致对字体的请求“闪烁”没有缓存在客户端，这应该很少见。）参见 developer.mozilla.org/en-US/docs/Web/CSS/@font-face/…”如果我将字体显示更改为块，它不再闪烁但是有一段较长的时间，字体不会被渲染。我决定改变项目并使用标准的非可变字体。– Mista K."
正在服务器上加载：

虽然我当然不是这方面的专家。在服务器上加载文件可以解决问题。这可能是由于样式 sheet 在服务器上加载时被缓存。
更改字体：

这不是一个修复，但不幸的是，错误可能是由字体本身引起的。
另一个快速修复：

项目可能需要添加加载屏幕，因此可以在其中加载字体。

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

页面加载时可变字体闪烁

variable font flickers on page load

css

sass

font-face

webfonts