如何解决页面加载时可变字体闪烁
我遇到以下问题:我正在使用来自家族内部(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变量一起使用的字体都发生了此问题。
该行为在每次页面加载以及重新加载时发生。您可以在以下页面重新加载期间查看问题:
感谢提示!
解决方法
我们发现,字体闪烁的原因很多。
-
帖子创建者找到了解决该帖子问题的方法:
“我已通过某种方式对其进行了修复:我已经问过字体的创建者,这就是他的回答:“可能是因为您使用的是font-display:swap(它故意导致对未缓存字体的请求出现“闪烁”在客户端,这应该很少。)请参阅developer.mozilla.org/en-US/docs/Web/CSS/@font-face/…“如果我将字体显示更改为“阻止”,它将不再闪烁,但是有更长的时间无法显示字体。我决定更改项目并使用标准的不可变字体。– Mista K。”
-
正在服务器上加载
:虽然我当然不是专家。将文件加载到服务器上可以解决此问题。这可能是由于样式表在加载到服务器时被缓存了。
-
更改字体:
这不是一个修复程序,但是很不幸,字体本身可能会导致错误。
-
另一个快速解决方案:
项目可能需要添加加载屏幕,因此可以在其中加载字体。
抱歉,这不是最权威的帖子,这只是我们在讨论此问题时发现的解决方案。随时对此发表评论,甚至可以告诉我我错了。
,这似乎是字体本身的问题,我能提供的最佳解决方案是仅使用另一种字体。我建议使用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
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。