如何確保自定義字體已加載

我正在使用Angular 2和Webpack。樣式被添加到沒有封裝的Angular組件。如何確保自定義字體已加載

自定義字體存在問題 - 好像它們是異步加載的，所以某些組件在創建它們時正在測量它們的大小，而不是使用自定義初始字體。

我該如何解決這個問題？

據我所知，沒有任何有用的事件......我想過檢查currecnt字體和設置一些德拉，但沒有找到一種方法來切割元素的當前字體。即使未應用此字體，計算的值也會始終返回。

或者，也許可以應用一些角/特定於webpack的解決方案？

~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.

來源

2016-11-10 Qwertiy

你可以等待'link'上的'load'事件 –

@JaromandaX，snippet只是一個例子。我對webpack中加載事件的樣式一無所知，在角色組件生命週期中沒有類似的東西。你能幫助解決原始問題嗎？ – Qwertiy

問題問「如何確保自定義字體被加載」 - 我建議等待您加載自定義字體時創建的'link'上的'load'事件 - 這不是解決原始問題 - 如果代碼片段不是'對回答這個問題很有用，那麼爲什麼要包括它呢？ –

您可以使用Font Face Observer。它會監視Web字體何時應用到頁面並通知您。目前，這是確定您的網絡字體是否已加載的最佳解決方案。

如果你真的對這個主題感興趣，請查看Zach Leatherman的博客。他寫了一個關於這個話題的非常comprehensive guide :)

來源

2016-11-10 23:18:45

如何確保自定義字體已加載

回答

相關問題