页面加载时可变字体闪烁

编程问答 2022-06-07

问题描述

我遇到以下问题：我正在使用来自家族内部（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变量一起使用的字体都发生了此问题。

该行为在每次页面加载以及重新加载时发生。您可以在以下页面重新加载期间查看问题：

problem appearing while reloading page

感谢提示！

解决方法

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

  1. 帖子创建者找到了解决该帖子问题的方法：

    “我已通过某种方式对其进行了修复：我已经问过字体的创建者，这就是他的回答：“可能是因为您使用的是font-display：swap（它故意导致对未缓存字体的请求出现“闪烁”在客户端，这应该很少。）请参阅developer.mozilla.org/en-US/docs/Web/CSS/@font-face/…“如果我将字体显示更改为“阻止”，它将不再闪烁，但是有更长的时间无法显示字体。我决定更改项目并使用标准的不可变字体。– Mista K。”

  2. 正在服务器上加载

    ：

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

  3. 更改字体：

    这不是一个修复程序，但是很不幸，字体本身可能会导致错误。

  4. 另一个快速解决方案：

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

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

,

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

HTML：

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

CSS：

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

----------原始帖子----------

为什么不只是简单地使用p {font-weight: 200;}，这可能会解决问题并且可能更容易阅读（至少从外部迫害中）

如果这样不起作用，请尝试将font-family添加到body而不是html

font-facesasssasswebfonts