Take the 2-minute tour ×
Webmasters Stack Exchange is a question and answer site for pro webmasters. It's 100% free, no registration required.

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.

share|improve this question
    
It looks the same to me in Opera and Chrome, but just prints a square in IE9 (all of them on Windows). –  stealthyninja Aug 19 '11 at 23:44
    
Which versions of opera and chrome are you running, Ill edit in my versions. –  Saif Bechan Aug 20 '11 at 4:45
    
Opera 11.10, Chrome 11.0.696.68. –  stealthyninja Aug 20 '11 at 16:30
1  
"see how the char changes" BTW: it's the same character everywhere—it's just another glyph. –  feeela Aug 21 '11 at 0:39
    
@ 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 Aug 21 '11 at 2:10

2 Answers 2

Since your preferred glyph is a graphic, I would suggest an alternative you didn't mention. It is the one recommended back when Wingding fonts were disallowed from the HTML standard. If you want to use an image, use an actual image. SVG would be idea if all your supported browsers can handle it. Otherwise, use a sufficiently large PNG to cover the largest font you plan to use. (I suggest allowing for at least 150% increase in your largest font for those who magnify their screen due to vision difficulties.)

share|improve this answer
up vote 0 down vote accepted

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.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.