如果元素有某种字体，如何执行jQuery脚本？

Question

我正在开发一个新网站，我遇到了这个问题。

只要使用默认字体（BebasNeueRegular），网站上的导航栏就可以正常使用，它在Firefox和Chrome中。我最近在IE中检查了网站，发现它没有使用BebasNeueRegular，因此它使用了下一个字体（Helvetica，我相信），这会让整个事情失控。

http://imgur.com/a/vTvNe

第一张照片是它应该如何看的，第二张是没有使用BebasNeueRegular时会发生什么。第一个例子中的list元素是62x48，而在第二个图片中它是78.65 x 48.这导致最后两个链接被撞到第二行，这看起来很糟糕。

我希望做什么是使用jQuery缩小字体大小，如果使用除BebasNeueRegular之外的任何字体。我现在有这个：

if($('nav.main > ul > li > a > span').css('font-family') !== 'BebasNeueRegular'){
   alert(Success!);
}

但到目前为止，我还没有获得“成功！”提示表明它有效。

有没有更好的方法来做我想做的事情？我可以检查某个字体系列并根据是否使用它来执行脚本吗？我做错了什么？

感谢您的帮助。

Answer 1

您的代码目前正在执行以下操作：

//Retrieves all Elements that match the selector
$('nav.main > ul > li > a > span')

//Returns the 'font-family' style for the first element in the set
.css('font-family')

您想要检查每个元素而不是第一个元素。您可以使用.each

完成此操作

$('nav.main > ul > li > a > span').each(function(index, el) {
    //If not BebasNeueRegular...
    if ($(el).css('font-family') !== 'BebasNeueRegular') {
        //Lower the font size
        $(el).css('font-size', '10px');
    }
});

这里有一个小提琴示例：http://jsfiddle.net/m94u80bm/1/

使用.filter的类似示例位于：http://jsfiddle.net/m94u80bm/2/