JQuery：要素に割り当てられたフォントを取得する方法

Question

jQueryで要素の割り当てられたフォントを取得することは可能ですか？

のは、CSSがあるとしましょう：上記の例で

#element 
{ 
font-family: blahblah,Arial; 
} 

、Arialのフォントが#elementに割り当てられます。 JS/JQuery経由でその情報を取得する方法はありますか？

のような何か：

$('#element').css('font-family'); 

リターンだけblahblah,Arial;

Answer 1

あなたがそれを行うようにDetectorライブラリを使用することができます。http://www.lalit.org/lab/javascript-css-font-detect/

ブラウザはリストから最初に見つかったフォントを取ると、あなたが見えるはずですフォントのリストを確認し、システムにこのフォントがあるかどうかを確認してください。ここで

はJS/jQueryのコードです：

$(function() { 
    var detectFont = function(fonts) { 
     var detective = new Detector(), i; 
     for (i = 0; i < fonts.length; ++i) { 
      if (detective.detect(fonts[i]) !== true) { 
       continue 
      } 
      return fonts[i]; 
     }  
    } 
    var fonts = $('#abcde').css('font-family'); 
    fonts = fonts.split(','); 
    console.log(detectFont(fonts)); 
}); 

そしてここでは、ライブデモで、私が用意しました： http://jsfiddle.net/netme/pr7qb/1/

希望を、このアプローチがお手伝いします。

Answer 2

(function($) { 
    $.fn.detectFont = function() { 
     var fonts = $(this).css('font-family').split(","); 
     if (fonts.length == 1) 
      return fonts[0]; 

     var element = $(this); 
     var detectedFont = null; 
     fonts.forEach(function(font) { 
      var clone = element.clone().css({'visibility': 'hidden', 'font-family': font}).appendTo('body'); 
      if (element.width() == clone.width()) 
       detectedFont = font; 
      clone.remove(); 
     }); 

     return detectedFont; 
    } 
})(jQuery); 

編集：DOMからクローニングされた項目を削除する必要がありました。

これを今すぐホイップしましたが、やはり要素の幅に依存しています。そのため、マイレージが異なる場合があります。

$('#element').detectFont(); //outputs Arial

Answer 3

$('#element').css("font-family", "Arial"); 

これを試してみてください。

Answer 4

すべての要素で動作するようにkmfkの答えが変更されました。ブロック要素が固定または動的な幅を持つため、インライン要素が使用されます。

/** 
* Detects the font of an element from the font-family css attribute by comparing the font widths on the element 
* @link http://stackoverflow.com/questions/15664759/jquery-how-to-get-assigned-font-to-element 
*/ 
(function($) { 
    $.fn.detectFont = function() { 
     var fontfamily = $(this).css('font-family'); 
     var fonts = fontfamily.split(','); 
     if (fonts.length == 1) 
      return fonts[0]; 

     var element = $(this); 
     var detectedFont = null; 
     fonts.forEach(function(font) { 
      var clone = $('<span>wwwwwwwwwwwwwwwlllllllliiiiii</span>').css({'font-family': fontfamily, 'font-size':'70px', 'display':'inline', 'visibility':'hidden'}).appendTo('body'); 
      var dummy = $('<span>wwwwwwwwwwwwwwwlllllllliiiiii</span>').css({'font-family': font, 'font-size':'70px', 'display':'inline', 'visibility':'hidden'}).appendTo('body'); 
      //console.log(clone, dummy, fonts, font, clone.width(), dummy.width()); 
      if (clone.width() == dummy.width()) 
       detectedFont = font; 
      clone.remove(); 
      dummy.remove(); 
     }); 

     return detectedFont; 
    } 
})(jQuery);