フォントイベント

Question

でtypekitを使用するときに我々はtypekitと非同期（async）フォントをロードするためにこれを使用しているFOUTを避けてください：私たちはそう

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

しかし、その後、我々は2番目のページがロードされる前に、分割のためのArialとしてスタイルされているフォントの問題を持っていましたこのような要素（アドビシステムズ社の広告要素にこのクラスを）隠す：

.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

ここでは、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について詳しく読むことができます。

Answer 2

私は前にこれに遭遇しましたが、正確な詳細は覚えていないことができます。

私はそれはどちらかだかなり確信している：

A）Typekitは、安全対策として、一定時間後に.wfローディングクラスを削除します。 b）bodyからクラスを削除する独自のタイムアウトスクリプトを追加します。