カスタムフォントを確実に読み込む方法

Question

私はAngular 2とWebpackを使用しています。スタイルは、カプセル化なしでAngularコンポーネントに追加されます。

カスタムフォントに問題があります。非同期に読み込まれているように見えますが、作成された時点でサイズを調べているコンポーネントの一部は、カスタムフォントではなく初期フォントで表示されます。

どうすればこの問題を解決できますか？

私が理解しているように、有益なイベントはありません...私はcurrecntフォントをチェックし、いくつかのデラを設定することを考えましたが、要素の現在のフォントをチェッキする方法を見つけませんでした。このようなフォントが適用されていない場合でも、計算された値は常に返されます。

また、角度/ウェブパック固有のソリューションを適用することはできますか？

~function() { 
 
    var link = document.createElement('link'); 
 
    link.rel = 'stylesheet'; 
 
    link.href = 'https://fonts.googleapis.com/css?family=Shrikhand&_='+Date.now(); 
 
    document.head.appendChild(link); 
 
    
 
    var dest = document.getElementById('dest'); 
 
    console.log(getComputedStyle(dest).fontFamily); 
 
    var width = getComputedStyle(dest).width; 
 
    dest.style.width = width; 
 
}();

body { 
 
    font-family: 'Shrikhand', cursive; 
 
} 
 

 
p { 
 
    outline: 1px dotted red; 
 
    float: left; 
 
    clear: left; 
 
    white-space: nowrap; 
 
}

<p style="font-family: initial;">Need to handle font loading</p> 
 
<p id="dest">Need to handle font loading</p> 
 
<p>Need to handle font loading</p>

PS：Same question in Russian.

Answer 1

あなたはFont Face Observerを使用することができます。 Webフォントがページに適用されたときを監視し、通知します。現在のところ、あなたのウェブフォントが読み込まれているかどうかを判断する最良の解決策です。

あなたが本当にZach Leathermanのブログをチェックしてください。彼はトピックに非常にcomprehensive guideを書きました:)