如何确保加载自定义字体答案

【问题标题】：How to ensure that custom font is loaded如何确保加载自定义字体
【发布时间】：2017-03-25 01:52:09
【问题描述】：

我正在使用 Angular 2 和 Webpack。样式被添加到 Angular 组件中，无需封装。

自定义字体存在问题 - 似乎它们是异步加载的，因此某些组件在创建它们时正在测量其大小，因此使用初始字体而不是自定义字体。

我该如何解决这个问题？

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

或者也许可以应用一些 Angular/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.

【问题讨论】：

你可以在link上等待load事件
@JaromandaX，sn-p 只是一个例子。我对 webpack 中的样式加载事件一无所知，在 angular comonent lifecicle 中也没有类似的东西。你能帮忙解决原来的问题吗？
问题询问“如何确保加载自定义字体” - 我建议等待您创建的 load 事件以加载自定义字体 - 怎么不解决原始字体问题 - 如果 sn-p 对回答问题没有用处，那么为什么要包含它呢？

标签： javascript css angular fonts webpack

【解决方案1】：

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

如果您真的对该主题感兴趣，请查看 Zach Leatherman 的博客。他就这个话题写了一个很comprehensive guide:)

【讨论】：