Question

我正在使用Angular 2和Webpack。样式被添加到Angular组件而不进行封装。

自定义字体存在问题 - 看起来它们是异步加载的，所以有些组件在创建它们的时候就会测量大小，用初始字体而不是自定义来完成。

我该如何解决这个问题？

据我所知，没有任何有用的事件......我考虑过检查当前字体并设置一些dela，但是没有找到一种方法来检查元素的当前字体。即使未应用此类字体，也始终返回计算值。

或许可以应用某些角度/特定于webpack的解决方案？

＆＃13;

~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;
}();

＆＃13;

body {
  font-family: 'Shrikhand', cursive;
}

p {
  outline: 1px dotted red;
  float: left;
  clear: left;
  white-space: nowrap;
}

＆＃13;

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

＆＃13;

PS：Same question in Russian.

Answer 1

您可以使用Font Face Observer。它将监视何时将Web字体应用于页面并通知您。目前，它是确定您的网络字体是否已加载的最佳解决方案。

如果您真的对这个主题感兴趣，请查看Zach Leatherman的博客。他在这个主题上写了一篇非常comprehensive guide的内容：）

如何确保加载自定义字体

1 个答案: