使用带有字体事件的 typekit 时避免使用 FOUT答案

【问题标题】：Avoid FOUT when using typekit with font events使用带有字体事件的 typekit 时避免使用 FOUT
【发布时间】：2016-04-12 11:37:28
【问题描述】：

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

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

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

.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

【问题讨论】：

标签： css fonts typekit

【解决方案1】：

这是一个确保在 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 的更多信息。

【讨论】：

【解决方案2】：

我以前也遇到过，但不记得具体的细节了。

我很确定它是：

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

【讨论】：