rositaqbeaulievq
New Member
Some fonts do not support CSS italic or bold (e.g. Zapfino does not support italic, as it is already pretty scripty-looking). I want to detect when a font style is not supported so I can disable styling buttons in an editor.I tried something like this:\[code\]that.checkFontData = http://stackoverflow.com/questions/14489363/function( fontList ){ var test = $("<span style='font-size:24px;absolute;visibility:hidden;height:auto;width:auto;white-space:nowrap;'>abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ12345678910</span>"); $('body').append( test ); for (var i= 0, iMax = fontList.length; i < iMax; ++i) { test.css( 'fontFamily', fontList ); var normalWidth = test.outerWidth( true ); var normalHeight = test.outerHeight( true ); test.css( 'fontStyle', 'italic' ); var italicWidth = test.outerWidth( true ); var italicHeight = test.outerHeight( true ); test.css( 'fontStyle', 'normal' ); test.css( 'fontWeight', 'bold' ); var boldWidth = test.outerWidth( true ); var boldHeight = test.outerHeight( true ); console.log( fontList + ", normal: " + normalWidth + ", bold: " + boldWidth + ", italic: " + italicWidth ); } test.remove( );};\[/code\]but it does not work... many fonts which provide italic or bold report the same widths.Next, I thought to detect this with a canvas element, but, alas, firefox does not even render italic text in the canvas, so that botches that idea.What would you suggest?