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

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

本文关键字：均衡器 字体 加载      更新时间：2023-09-26

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

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

然后，当TypeKit字体加载时，div不会调整大小。它们太高了，因为它们的高度是在回退字体可见时调整的。

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

在阅读了Typekit和Foundation 5均衡器文档（以及Foundation 6文档）后，我会尝试以下操作：

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插件。

在尝试了各种解决方案后，我只是简单地将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">

均衡器工作正常。

相关文章：