在 CSS 中加载 @font-face 时如何删除浏览器中的默认字体？ “FOUT”

Posted 2023-03-06

【中文标题】在 CSS 中加载 @font-face 时如何删除浏览器中的默认字体？ “FOUT”

【英文标题】：How to remove the default font in the browser while loading @font-face in CSS? "FOUT"

【发布时间】：2012-08-02 17:40:57

【问题描述】：

我正在使用@font-face 将两种外部字体加载到我的网页中。它们在 Chrome 中加载完美，但是当我在 IE 中尝试时，浏览器在页面加载时显示一些默认字体，然后根据我的 css @font-face 将字体更改为正确的字体。

如何在页面加载时删除默认字体，使其不显示在 IE 和其他浏览器中？我想删除所谓的 FOUT（无样式文本的闪烁）。我有什么办法可以通过样式表做到这一点？

感谢您的帮助！

【问题讨论】：

user1577346，由于我的回答适合您，请接受该回答，该回答将在其上打上绿色复选标记。谢谢。

【参考方案1】：

您可以使用 CSS 过渡在 N 毫秒后淡入您的文本，或者您认为足以加载字体资源的任何内容。 css3 transition animation on load?

【讨论】：

不是一个好的答案。您提供的链接显示了如何在鼠标 hover 事件期间 fade-out 文本。

在不提供任何实际回答此问题的相关代码的情况下发布指向其他 SO 问题的链接是不行的，通常作为评论完成。

【参考方案2】：

对于您不想要的默认浏览器字体，将font-size CSS 属性设置为0px 并确保您已在@font-face 类名称CSS 规则中声明font-size 。

如果您还想使用专用脚本解决此问题（Firefox 3.5/3.6 或 Internet Explorer 7-9），请查看FOUT-B-Gone javascript 解决方案。

【讨论】：

这会起作用，但我想要一个像modernizr这样的特征检测器的后备，以防font-face不可用并且你可以给font-size一个正值

在网页的字体回退规则期间，您始终可以恢复字体大小，但这是 OP 可能不需要的不同要求。

您确定font-size 允许在@font-face 中使用吗？它未在w3.org/TR/css3-fonts/#font-prop-desc

中列出

@atlavis，我已经澄清了我的答案以避免混淆。此外，您也可以将font-size-adjust CSS 规则属性用于@font-face CSS 规则。