jQuery高度的字体问题-直到第二次迭代才出现不正确的值

Question

这是一个jsFiddle与我的代码

可以看到，文本区域的高度被完美地返回了。但这是因为文本区域没有设置为font-face模式。

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

所以jQuery的高度是有效的，但只有在网站完全加载了font-face。

是否有解决这个问题的方法?

谢谢你的指点。

简单标记

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

当前脚本-完全工作完美，当文本不是FONT-FACE

$(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;            
    });                    
});

UPDATE - SOLVED

没有准备好文件，这对我来说很有效。加载有轻微延迟，但比不正确的值要好。

$(window).load(function(){  
    // my script here...
}); 

Answer 1

是。

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

2. 创建2个隐藏(不通过display:none，使用position:absolute + top:-5000px;)div与文本+ white-space:nowrap。例如，第一个使用monospace，第二个使用your_font,monospace字体。然后创建setInterval (50ms延迟是正常的)，比较它们的高度。当你的字体被加载时，你需要clearInterval .

3. 最长路径-使用$(window).load