How to use Unicode symbols on webpages?

Question

I'm using some Unicode symbols on a webpage I'm making. For purposes of this example, let's say it's this guy: '☺'.

As I understand it, under the correct implementation of CSS, you can set any font you want, and if it runs into a character that is not present in that font, it will start falling back through the font-family backup choices until it finds one that works.

In light of that, I have my font-family set up like this in css:

font-family: Tahoma, Helvetica, "Arial Unicode MS", sans-serif

My rationale is that Tahoma comes bundled with Windows. However, I found out online that only some versions of Windows' bundled Tahoma had Unicode support. Helvetica is a font that is similar to Tahoma for Macs. "Arial Unicode MS" comes bundled with Office 2000 and up and definitely support Unicode. San-serif is the fallback in all cases that should also hopefully support Unicode.

For the most part, this works well. However, as it is wont to do, Internet Explorer seems to be ruining my well-laid plan. I can't figure out what the pattern is, as I'm seeing it on one computer running Vista with IE8, and another on Windows XP with IE7, but it works fine on my development machine with Win7 with IE8/IE7 Tester/IE6 Tester. I have found the claim on some obscure webpages that on old versions of IE, it will only look for the first font that it has, and then use that for everything, even if that font is missing a given symbol, but this doesn't explain why it's happening on Vista/IE8. Thus, my lovely Unicode symbols turn up as boxes to some, but not all IE users.

What's the recommended way to be handling Unicode symbols on the web? Are they just not usable for projects where wide browser compatibility is needed? Should I be looking to include code specifically to handle old IE? Are there any other gotcha situations or platforms I should be worrying about?

Edit: Updated with new information on systems this is failing on.

Answer 1

You can use IE overrides in your CSS file to create different behavior for older versions of internet explorer. The over-rides are # and _ before each statement depending on the version of internet explorer.

Put an _ before each statement in your css for internet explorer 6.0 and earlier Put a # before each statement in your css for internet explorer only

Example:

 //Normal
    font-family: Tahoma, Helvetica, "Arial Unicode MS", sans-serif;    
    //  IE 6.0 Earlier
    _font-family: Tahoma, Helvetica, sans-serif;
    // IE Only
    #font-family: Tahoma, Helvetica, "Arial Unicode MS", sans-serif;

Answer 2

only some versions of Windows' bundled Tahoma had Unicode support

It's not really “Unicode support”. Tahoma supports Unicode in as much as it has Unicode code point lookup tables. That doesn't mean you get a glyph for every character defined by Unicode... actually almost no font has glyphs for every character.

No version of Tahoma includes a glyph for U+263A White Smiling Face, so your code is a test of font fallback capabilities, something IE (especially IE6) is bad at, compared to other browsers. A more common Windows-bundled font that does include U+26A3 is plain Arial (not “Arial Unicode”), since version 3.00 (included in WinXP).