字体面问题与jQuery高度 – 第二次迭代之前的值不正确

Here is a jsFiddle with my code

如您所见,文本区域的高度完美地返回.但这是因为文本区域不是字体 – 面部模式.

在我的网站上,文本是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>

当前的脚本 – 完整的工作完美,当文本不是前面的时候

$(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...

});

解决方法

是.

>最简单的解决方法 – 设置文本的行高(您想要获得高度的位置),以像素为单位.如果字体中的字母宽度相似 – 它将起作用.>创建2隐藏(不通过显示：无,使用位置：绝对顶部：-5000px;)divs文本white-space：Nowrap.例如1st with monospace,2nd with your_font,monospace font-family.然后创建setInterval(50ms延迟是正常的),并比较它们的高度.当高度变得不同时 – 您的字体已加载,您需要clearInterval.>最长的方式 – 使用$(window).load