Question

在DOM准备就绪后，我很快就解决了Foundation的均衡器插件问题。我正在加载一些TypeKit字体，他们需要几毫秒加载，但均衡器插件在字体加载之前触发。

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

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

所以...有没有办法在TypeKit字体加载后触发均衡器插件？另外，我已经看到有一种方法可以在回流时触发插件，这可能是最好的，但我没有看到基础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包含代码从（嵌入到CSS片段中的（旧）JavaScript）更改了：

从此：

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

然后均衡器工作正常。

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

2 个答案: