JQuery: Jak uzyskać przypisaną czcionkę do elementu

Question

Czy można odzyskać przypisaną czcionkę elementu w jQuery?

Można powiedzieć, że to jest CSS:

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

W powyższym przykładzie, czcionka Arial zostanie przypisany do #element. Czy istnieje sposób na uzyskanie tych informacji za pośrednictwem JS/JQuery?

Coś jak:

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

powraca właśnie blahblah,Arial;

Answer 1

Można użyć biblioteki Detector to zrobić: http://www.lalit.org/lab/javascript-css-font-detect/

jako przeglądarka zajmuje pierwsze znaleźć czcionkę z listy, należy patrzeć poprzez listę czcionek i spróbuj sprawdzić, czy masz tę czcionkę w swoim systemie.

Oto kod 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)); 
}); 

I tu jest demo na żywo, mam przygotowane: http://jsfiddle.net/netme/pr7qb/1/

Hope, takie podejście pomoże.

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

edit: musiał usunąć sklonowanego element z DOM.

Zaskoczony, teraz jeszcze raz, nadal opiera się na szerokości elementu - więc twój przebieg może się różnić.

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

Answer 3

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

Spróbuj tego.

Answer 4

Zmodyfikowana odpowiedź kmfk, aby działała dla wszystkich elementów. Elementy blokowe mają stałą lub dynamiczną szerokość nie będą działać, więc używa elementów wbudowanych:

/** 
* 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);