jQuery 高度的 Font Face 问题 - 第二次迭代之前的值不正确

Question

这是一个带有我的代码的jsFiddle

如您所见，返回了文本区域的高度完美。但这是因为文本区域不是字体模式。

在我的网站上，文本是由 font-face 生成的，但它在 font-face 加载之前获取高度，因为一旦您将 div 悬停一次并运行第二次迭代，它就会返回正确的高度。

所以 jQuery 高度才起作用，但只有在网站完全加载字体后才有效。

有解决这个问题的方法吗？

感谢您的指点。

简单标记

<div class="home-mod">    
    <div class="mod-center"><img ... /></div>    
    <div class="mod-info"> <!-- this is the slider, slides up when .mod-info is hovered -->                    
        <a class="mod-link" href="..." title="test">DYNAMIC FONT-FACE TEXT HERE</a>

        <div class="mod-excerpt">                        
            DYNAMIC NORMAL TEXT HERE                            
        </div>            
    </div>                           
</div>

当前脚本 - 当文本不是字体时完全可以完美工作

$(function() {
    // positioning the current div.mod-info inside current div.home-mod

    $(".home-mod").each(function() { 
        // this finds the div.mod-link height, and assigns var to div.mod-info top position
        var moduleLink = $(this).find(".mod-link").height(),
        modulePlus = moduleLink+20;

        $(this).find('.mod-info').css("top", "-" + modulePlus + "px");
    });        

    // animating current div.mod-info to new top position

    $("div.mod-info").hover(function() {
        // first iteration
        // getting dynamic overall height of div.mod-info and animate to 

        var moduleInfo = $(this).height();

        // this then animates to new position 
        $(this).animate({ top: "-" + moduleInfo + "px" });        
    }, function() {
        // second iteration
        // returns back to original postion

        var moduleLink = $(this).find(".mod-link").height(),
        modulePlus = moduleLink+20;

        $(this).animate({ top: "-" + modulePlus + "px" });        
    });

    // this justs finds the link and in .home-mod and make its clickable        
    $(".home-mod").click(function() {            
        window.location = $(this).find("a.mod-link").attr("href");
        return false;            
    });                    
});

更新 - 已解决

这对我有用，而不是准备好文档。负载略有滞后，但比不正确的值要好。

$(window).load(function(){  

    // my script here...

}); 

Answer 1

是的。

1. 最简单的解决方法 - 以像素为单位设置文本的行高（您想要获取高度的位置）。如果字体中字母的宽度相似 - 它将起作用。

2. 创建 2 个隐藏的（不通过 display:none，使用 position:absolute + top:-5000px;）div 并带有文本 + <代码>空白：nowrap。例如，第一个使用 monospace，第二个使用 your_font,monospace font-family。然后创建setInterval（50ms延迟是正常的）并比较它们的高度。
   当高度变得不同时 - 您的字体已加载，您需要 clearInterval。

3. 最长的方法 - 使用 $(window).load