[jQuery] How to check for specified fonts
Back in the day, using HTML 4.01, I could check for the presence of a
specified font (different from the default monospace font) by placing
a DIV containing a couple of SPANs, absolutely positioned off-screen
using this kind of arrangement (I'm spreading the tags because I don't
know how this forum treats HTML tags):
HTML:
< div id="tester" >
< span id="test" >< font id="testfont" face="monospace" >Some well-
chosen sample text< /font >< /span >
< span id="ctrl" >Some well-chosen sample text< /span >
< /div >
CSS:
#tester { position:absolute; top:-5000px; }
#test, #ctrl { font-size: 30px; }
#ctrl { font-family: monospace; }
and then using a script method like this:
JavaScript:
function IsItThere( fontname )
{
document.getElementById( "testfont" ).face = fontname + ",
monospace";
var test = document.getElementById( "test" );
var ctrl = document.getElementById( "ctrl" );
return ( test.offsetWidth != ctrl.offsetWidth );
}
Of course, that doesn't work using XHTML because the < font > tag
isn't valid. I thought jQuery could come to the rescue, with a minor
revision like this:
HTML:
< div id="tester" >
< span id="test" style="font-family:monospace;" >Some well-chosen
sample text< /span >
< span id="ctrl" >Some well-chosen sample text< /span >
< /div >
Same CSS as before.
JavaScript:
function IsItThere( fontname )
{
$("#test").css("font-family", fontname + ", monospace" );
return ( $("#test").width() != $("#ctrl").width() );
}
But it doesn't work. The #test and #ctrl stubbornly report the same
width all the time, regardless of the font-family setting.
Does anyone have an alternative suggestion?
Thanks in advance.