如何執行一個jQuery腳本，如果一個元素有一個特定的字體？

我正在一個新的網站上工作，我遇到了這個問題。如何執行一個jQuery腳本，如果一個元素有一個特定的字體？

只要使用默認字體（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!); 
}

但到目前爲止，我還沒有得到的提示以表明它有效。

有沒有更好的方法來做我想做的事情？我可以檢查某個字體家族並根據是否使用它來執行腳本嗎？我究竟做錯了什麼？

感謝您的幫助。

來源

2014-11-24 ClaytonAlanKinder

我猜你FONT-FAMILY屬性正確設置好的。但瀏覽器無法加載字體的原因。所以可能jQuery不會這樣做。 – Guill 2014-11-24 19:31:30

您知道有什麼解決方法嗎？只要我在所有瀏覽器上都以一行代碼完成Navbar，我對於如何到達那裏並不挑剔。 – ClaytonAlanKinder 2014-11-24 19:35:30

我不是很有經驗，但imho PHP會這樣做。使用任何功能獲取當前瀏覽器，然後在提供頁面之前更改字體屬性。 – Guill 2014-11-24 19:41:10

你的代碼目前正在做以下幾點：

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

來源

2014-11-24 19:38:20 Stryner

非常感謝！我必須閱讀我的jQuery，總有一些很酷的選擇器，我忘了。但是，快速的問題是，在這個函數中做什麼（索引，el）呢？ – ClaytonAlanKinder 2014-11-24 19:41:34

@CaptainKick'（index，el）'是函數的參數。在['.each']（http://api.jquery.com/jquery.each/）的文檔中，指定將索引和元素傳遞給函數。在這種情況下，'el'是當前的DOM元素，'index'是它在選擇中的索引。（注意：在函數'el' =='this'內部）。 – Stryner 2015-01-06 16:43:17

如何執行一個jQuery腳本，如果一個元素有一個特定的字體？

回答

相關問題