我使用字体事件解决了 FOUC。我已经使用 visibility: hidden
隐藏了 p, h1, h2, a, span
和页面底部的一些 javascript,然后在 typekit active
事件,它将它们设置回 visible
。
此解决方案在我的本地环境中运行良好,在生产环境中,它似乎在重新加载页面时运行良好。但是在生产环境中逐页点击时它不起作用(截屏视频:http://screencast.com/t/m8YQwFNNsrv)
我认为不同之处在于,当从一个页面到另一个页面点击时,会利用浏览器缓存。
最佳答案
可能是竞争条件。在您到达页面底部之前,Web 字体响应正在评估(从缓存中),您的 JS 将在该页面底部执行隐藏这些元素,但到那时没有任何效果。
我总是发现让 FOUC 发生更好,而不是在网络字体最终无法加载并且您要隐藏内容的情况下解决许多边缘情况。
关于javascript - Typekit 字体事件无助于 Flash Of Unstyled Content (FOUC),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23505760/