CODEWITHSUNDEEP
htmlcssgoogle-chromeinternet-explorer
wegelagerer
wegelagerer

Reputation: 3710

Character rendering is different (IE/Chrome)

I'm trying to figure out why does the arrow symbol render differently on Chrome and Internet Explorer but without any success. Surprisingly IE displays it correctly while Chrome has problems with rendering. Ignore the difference in size, it is due to zooming.

Chrome

Chrome

IE

IE

Regarding CSS, there is only Eric Meyer's CSS reset and CSS rules for the font size, family, color and smoothing so there isn't anything else that could mess this up.

Upvotes: 1

Views: 142

Answers (1)

Mr Lister
Mr Lister

Reputation: 46559

When the font in use doesn't contain a character you want to display, the browser uses a fallback font which does. Now in this case, it turns out that IE and Chrome use different fonts to fall back to.

Solution: use a font of which you are certain that it does contain the character, so there won't be any falling back. Check with a character selector such as CharMap.

However, if you want to make absolutely, positively sure that all browsers will display the very same thing everywhere, you should also consider using a webfont, for those machines that don't have your font installed. Or alternatively, use an image.

Upvotes: 2

Related Questions