Question

我正在使用Google Webfont Loader来为我的网页字体加载回调，它运行正常。

虽然，当加载了几个组件：Google +1按钮，Twitter搜索窗口小部件和添加此按钮时，他们会向DOM添加一个新的样式表，并使浏览器再次呈现该网站。这导致font-face消失，然后显示添加到dom的每个新样式表。

我可以完全隐藏字体，直到组件被加载，但它们往往很慢，所以这会给我带来非常糟糕的用户体验。大约1秒的无标题网站。

Andy提示如何强制font-face不重绘或如何阻止Google，Twitter和FB嵌入脚本中动态加载的CSS？

更新：在此演示http://kristoferforsell.com/dev/fontexample/

Answer 1

目前这是浏览器和@ font-face属性的固有问题。加载字体并更新页面以反映字体时，会发生闪烁。如果您希望完全删除“闪烁”，唯一可靠的解决方法是将字体作为数据URI包含在样式表中。当然，使用标准的“安全”字体也会消除眨眼。

数据URI允许您在样式表中实际嵌入字体代码，以便在页面刷新以显示所需字体时不闪烁。使用数据URI，显然会增加任何样式表的文件大小（kb）。

可以找到获取base64代码的在线转换器here

@ font-face的用法就像这样......

 @font-face {
font-family: "My Font";
src: url("data:font/opentype;base64,[   the base64 code here   ]");
}

Answer 2

不确定是否会解决您的问题，但您可以使用css将元素的可见性设置为隐藏，直到加载字体。 Google的API提供了wf-loading和wf-active类，这些类已添加到正文中以解决此问题。

我总是为@ font-face规则设置一个单独的样式表，并在其中放入以下规则，其中replace是要替换的元素的类，对于你来说就是p代码。

.wf-loading .replace { visibility: hidden;}

你的

.wf-loading p { visibility: hidden;}

然后，只要加载了webfont，JS就会将wf-active类放在主体上，然后显示文本。让我知道这是怎么回事，如果你有任何问题，那就告诉我一行。也许值得做一些搜索“闪烁的无格式内容”或“闪烁的无格式文本”，因为这是一个众所周知且有据可查的错误。

Answer 3

我可以建议一个简单而肮脏的技巧，我已经用它来解决这样的问题。如果你实现这一点，从用户的角度来看，效果将是整个页面将立即加载（使用正确的Web字体），但是在延迟之后。一旦加载，任何东西都不会闪烁或改变。将整个页面内容包装在div中，并将其可见性设置为隐藏。然后在加载整页（样式表和所有内容）后使用js打开可见性。这是代码：

<head>
<script>
function show()
{document.getElementById('wrapper').style.visibility='visible';}
</script>
</head>
<body onload="show()">
<div id="wrapper">
...your entire page contents...
</div>
</body>

onload确保仅在整个身体加载后才能打开可见性。虽然我没有使用Web字体，但我使用这个技巧淡化了this website的全部内容，之后没有更改或更新。但是，在整个页面进入视图之前会有一段延迟。

编辑：我将Google网络字体添加到我链接的网站。仍然很好。没有字体闪烁。

Answer 4

这是一个黑暗中的镜头，因为我没有测试它：你能创建另一个仅包含社交网络按钮的html页面，然后将其加载到iframe中吗？然后，只有在文档完全加载后才将src设置为iframe，因此它不会保留任何内容。

在html中：

<iframe id="socialMedia"></iframe>

在剧本中：

$(document).ready(function() {
   $('#socialMedia').src = "http://mysite.com/mysocialmediastrip.html";
});

mysocialmediastrip.html包含所有社交媒体按钮。设置src将导致iframe重新加载并拉入该内容，但是IIRC，页面的其余部分将保持不变 - 所有按钮渲染都将在mysocialmediastrip.html中完成，而不是在主页面中完成。

Answer 5

我完全明白你对延迟过程的看法，在实际展示货物之前等待窗口加载。 Abhranil提供了一个很好的解决方案，但你可以进一步解决他的问题。您可以使用jQuery的ajax加载使用特殊字体类型的特定页面内容。为什么？因为ajax带有一个名为beforeSend()的特殊函数。在beforeSend函数（）中，您可以加载一个非常酷的礼物动画，该动画将在您的主要内容可供查看之前显示在屏幕上。

利用那一刻，在主赛事之前向观众展示一些创意！

Answer 6

最好和最简单的答案是在指定字体时添加 font-display: block

@font-face {
   font-display: block; /* Fix flickering */
}

您还应该在 html 文件中预加载字体

<head>
  <link rel="preload" as="font" href="/path_to_your_font.ttf">
  <-- repeat for all typeface -->
</head>

动态加载新的css文件时，字体闪烁

6 个答案: