如何在字体加载或回流后触发均衡器？

Question

我遇到了一个问题，即 DOM 准备好后 Foundation 的均衡器插件启动得太快了。我正在加载一些 TypeKit 字体，它们需要几毫秒才能加载，但均衡器插件会在字体加载之前触发。

后备字体（与我的 TypeKit 字体的高度不同）在很短的时间内可见，可能是 50 毫秒。当后备字体可见时，均衡器将高度应用到我的 div。后备字体更高，在某些情况下，它使文本行中断为 2 行。

然后当 TypeKit 字体加载时，div 不会调整大小。它们被留得太高了，因为当后备字体可见时它们的高度被调整了。

所以...有什么方法可以在加载 TypeKit 字体后启动均衡器插件吗？另外，我看到有一种方法可以在回流时触发插件，这可能是最好的，但我在 Foundation 6 中看不到回流，只有 5。

Answer 1

看完 Typekit and Foundation 5 Equalizer docs (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">

均衡器然后工作正常。

如何在字体加载或回流后触发均衡器？

How to trigger equalizer after fonts have loaded or on reflow?

javascript

typekit

zurb-foundation-6