0

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

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

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

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

4

2 回答 2

1

在阅读了Typekit和Foundation 5 Equalizer文档（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 插件。

于 2015-12-30T14:50:18.973 回答
0

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

均衡器然后工作正常。

于 2020-04-18T12:52:32.943 回答