0
我正在使用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>
你可以等待'link'上的'load'事件 –
@JaromandaX,snippet只是一個例子。我對webpack中加載事件的樣式一無所知,在角色組件生命週期中沒有類似的東西。你能幫助解決原始問題嗎? – Qwertiy
問題問「如何確保自定義字體被加載」 - 我建議等待您加載自定義字體時創建的'link'上的'load'事件 - 這不是解決原始問題 - 如果代碼片段不是'對回答這個問題很有用,那麼爲什麼要包括它呢? –