Forum Moderators: not2easy
Can we determine (server-side or client-side) whether or not a visitor has a particular font installed?
For example, you have a site for people who would understand phonetic (dictionary) renderings of words, perhaps linguists or advanced language learners. You want to be able to show the trascriptions, or tell them that the site uses PhoneticWidgetPhont and they can get it "click here".
To date I just put a general notice near the top that the page uses a particular font (e.g., unicode for kanji, or a particular one for phonetics, etc.) but I'd like to be able to toggle that notice.
HTH
Conjecturally speaking, of course.
Your server can convert the text into a GIF or JPEG and display that for them. I'm actually in the process of learning Sumerian cuneiform and doing as much transliteration on the computer as I can, so understand exactly what you mean about the fonts :P
That's why I suggested the second font choice be a generic with a substantially different character width and kerning. For instance:
#test{font:2em Verdana, monospace;visibility:hidden;}
<span id="test">WMffOoLl</span>
The width disparity between a display in Verdana and monospace of such a character set should be sufficient to make a determination, theoretically. Obviously, some typefaces might be easier to devise a test for than others. (Note: The W3C does not, actually use the term font correctly; it is, for instance, a typeface family. A font is a specific size of a specific typeface. Additionally, I use the term "kerning" in its popular usage rather than in its strictest interpretation. )
In many cases, a lot can be done with unicode fonts as well.
unicode fonts
That still requires the user to have one installed ;)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Untitled</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<style type="text/css">
#test1{font:2em Verdana,monospace;}
#test2{font:2em monospace;}
</style>
<script type="text/javascript">
function tstWd(){
var wid1=document.getElementById("test1").offsetWidth;
var wid2=document.getElementById("test2").offsetWidth;
var wid_tst=(wid1!=wid2);
alert(wid_tst);
}
</script>
</head>
<body>
<div>
<span id="test1" onclick="tstWd();">abcdefghijklmnopqrstuv</span><br />
<span id="test2" onclick="tstWd();">abcdefghijklmnopqrstuv</span>
</div>
</body>
</html>
1) What if the font I want to "test for" has similar attributes to the monospace font? ...especially character widths...
2) Since
monospaceWhile the second scenario isn't as likely, it is good to be aware of both. As always, if you can't predict the circumstances 99%, don't assume anything. Be prepared for the most unlikely scenario.
I did not mean to imply that this is a bullet-proof solution, however, I am unaware of a better one. Should someone offer such, I would happily jump on board.
To reduce the possibility of a false positive to infinitesimility (or is it infinitesimilitude? Hmm, your human languages are so difficult for a simple tribble. "Dammit, Jim. I'm a tribble, not a doctor!"), one could simply compound the tests, comparing the target font to, say, monospace, sans-serif, and serif, in turn. Any failure of the test should provide adequate proof that the target font is absent.
So, this is one of those cases where we either rely on a (dodgy) technological solution, or on the user doing what we want them to. Or to quotecab Calloway, "I hate to lose you, But you've got me inbetween the devil and the deep blue sea"
Design so that the message gets across in a lively and interesting way with a variety of fonts, and list them in the font-family. And, in case the user has only got boring fonts installed, design so that the message gets across anyway.
;)
