HTML special character (glyph) looking not the same in different browsers

Question

I am using an html crown in my website, character code is ♛, but this looks different in the browsers.

Firefox 6.0 -> different
Chrome 13.0 -> different
IE 9.0, Safari 5.1, Opera 11.50 -> same

I have tried to explicit add a font-family to the span, but this does not help.

Anyone have an idea how I can get this the same in the browsers.

Check this post in differnt browsers and see how the char (glyph) changes. ♛

It looks the same to me in Opera and Chrome, but just prints a square in IE9 (all of them on Windows).
Which versions of opera and chrome are you running, Ill edit in my versions.
"see how the char changes" BTW: it's the same character everywhere—it's just another glyph.
@ feeela thank you for pointing out the difference between a glyph and a char. Do you also know how to keep the same in different browsers.

Saif Bechan · Accepted Answer · 2011-08-21 02:25:00Z

After knowing that the correct name is a glyph I have searched for a solution, but it cannot be done. There are only 3 things you can do.

1) Use the @font-face in css with a special font that has the character. The character will display the same in all browsers.

2) Choose your audience: Just restrict access to the website for certain browsers, tell them to change browser.

3) Just leave it like it is, some glyphs change only slightly.

1 Answer