将 typekit 与字体事件一起使用时避免 FOUT

Question

我们正在使用它来加载与 typekit 异步的字体：

<script src="https://use.typekit.net/whatever.js"></script>
<script>try{Typekit.load({async:true});}catch(e){}</script>

但随后我们遇到了问题，在页面加载前的一瞬间将字体设置为 arial，因此我们隐藏了这样的元素（adobe 将此 class 广告到元素）：

.wf-loading{
    h1, h2, h3, h4, h5, p, a{ 
        visibility: hidden; //hide stuff until adobe gives us the font
    }
}

但是如果 adobe 的服务器宕机了怎么办，上个月在伦敦发生了两次。元素会被隐藏吗？其他人如何使用 typekit 解决这个问题？

这里没有信息：https://helpx.adobe.com/typekit/using/font-events.html

Answer 1

我以前运行了解过这个，但不记得具体细节了。

我很确定它是：

a) Typekit 会在一段时间后删除 .wf-loading class 作为安全措施。 b) 添加您自己的超时脚本，从正文中删除 class。

Answer 2

这是一个修复程序，可确保在 Typekit 服务器出现故障时显示浏览器默认字体。

<script>
        (function(d) {
            loadFonts = 1;
            if(window.sessionStorage){
                if(sessionStorage.getItem('useTypekit')==='false'){
                    loadFonts = 0;
                }
            }

            if (loadFonts == 1) {
                    var config = {
                        kitId: 'XXXXXXXX',
                        scriptTimeout: 3000,
                        async: true
                    },
                    h=d.documentElement,t=setTimeout(function(){h.className=h.className.replace(/\bwf-loading\b/g,"")+" wf-inactive";if(window.sessionStorage){sessionStorage.setItem("useTypekit","false")}},config.scriptTimeout),tk=d.createElement("script"),f=false,s=d.getElementsByTagName("script")[0],a;h.className+="wf-loading";tk.src='https://use.typekit.net/'+config.kitId+'.js';tk.async=true;tk.onload=tk.onreadystatechange=function(){a=this.readyState;if(f||a&&a!="complete"&&a!="loaded")return;f=true;clearTimeout(t);try{Typekit.load(config)}catch(e){}};s.parentNode.insertBefore(tk,s);
                }
            }

        )(document);
        </script>
<style>
        .wf-loading p, .wf-loading h1, .wf-loading h2, .wf-loading h3, .wf-loading h4 {
            visibility: hidden;
        }
        .wf-active  p, .wf-active h1, .wf-active h2, .wf-active h3, .wf-active h4 {
            visibility: visible;
        }
        .wf-inactive    p, .wf-inactive h1, .wf-inactive h2, .wf-inactive h3, .wf-inactive h4 {
            visibility: visible;
        }
</style>

您可以阅读有关 the full solution in this blog post 的更多信息。

将 typekit 与字体事件一起使用时避免 FOUT

Avoid FOUT when using typekit with font events

css

fonts

typekit