如何在加载字体或重排字体后触发均衡器？

Question

我在DOM准备好后，Foundation的均衡器插件触发得太早了。我正在加载一些TypeKit字体，它们需要花费几毫秒的加载时间，但是均衡器插件在字体加载之前就已触发。

发生什么情况是后备字体（与我的TypeKit字体不同的高度）在很短的时间内可见，可能是50毫秒。当后备字体可见时，均衡器将高度应用于我的div。后备字体较高，在某些情况下，其使文本行分成2行。

然后，当TypeKit字体加载div时，不调整大小。它们的高度过高是因为在显示后备字体时已调整了它们的高度。

所以...有没有办法可以在TypeKit字体加载后触发均衡器插件？另外，我已经看到有一种方法可以在重熔时触发插件，这可能是最好的，但是在Foundation 6中，关于重熔我什么也没看到，只有5。

Answer 1

[阅读Typekit和Foundation 5 Equalizer文档（Foundation 6 docs, too）之后，我会尝试这样做：

try {
    Typekit.load({
      active: function() {
        // JavaScript to execute when fonts become active
        $(document).foundation('equalizer', 'reflow'); // Foundation 5
    // OR
        var elem = new Foundation.Equalizer(element); 
        elem.applyHeight();         // Foundation 6

      }
    })
} catch(e) {}

也就是说，使元素高度相等的现代方法是在CSS中使用flexbox，而不是JavaScript插件。

Answer 2

[尝试了各种解决方法后，我只是简单地将Typekit包含代码从（旧的）javascript嵌入到CSS片段中进行了更改：

来自此：

<script src="https://use.typekit.net/yourprojectcode.js"></script>
<script>try{Typekit.load({ async: true });}catch(e){}</script>

至此：

<link rel="stylesheet" href="https://use.typekit.net/yourprojectcode.css">

然后均衡器工作正常。