JQuery: How to get assigned font to element
In the above example, Arial font will be assigned to #element. Is there a way to get that information via JS/JQuery? Something like:
@donderpiet thats interesting workaround, but doesn’t solve my problem. For example when I want to check to which font browser fallbacks when there is not suitable font.
4 Answers 4
(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().appendTo('body'); if ( element.width() == clone.width() ) detectedFont = font; clone.remove(); >); return detectedFont; > >)(jQuery); edit: had to remove the cloned item from the dom.
Whipped this up just now, again, it still relies on element width — so your mileage may vary.
$(‘#element’).detectFont(); //outputs Arial
As the browser takes the first found font from the list, you should look through the list of fonts and try to check if you have this font in your system.
$(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)); >); Hope, this approach will help you.
netme, yeah that’s almost that, but most case i would like use this is when there will be none font from font-family assigned, but some default after fallback, like when i use font-family:Arial for some Japanese or Chinese.
@pawlakppp — even if the font is actually inherited from a parent element, it should still work fine.
@netme, but in fallback case font won’t be inherited from parent element, but there will be assigned font (from OS fonts) that is able to display Japanese/Chinese characters, and I need to know which one. Now i see it is probably impossible. Thanks though
Modified kmfk’s answer so that it works for all elements. Block elements have fixed or dynamic width won’t work so this uses inline elements:
/** * 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 = $('wwwwwwwwwwwwwwwlllllllliiiiii').css().appendTo('body'); var dummy = $('wwwwwwwwwwwwwwwlllllllliiiiii').css().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);