Home/ Questions/Q 7082801
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-28T07:05:59+00:00

On the same machine using the same font (Arial) I get different text rending

  • 0

On the same machine using the same font (Arial) I get different text rending from Chrome and IE9:

<html>
<head>
</head>
<body style="font-family: Arial;">
IIIIIIIII&#x2AF8;
IIIIIIIII&#x2B46;
IIIIIIIII&#x2A20;
IIIIIIIII&#x27A4;
IIIIIIIII&#x27A7;
IIIIIIIII&#x269E;
IIIIIIIII&#x25B6;
</body>
</html>

It looks like this:
enter image description here

Why does this happen? Is there a way to make Chrome correctly render the two broken arrows which render correctly in IE? (Positions 1 and 3)

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Your CSS property name has a typo, font-familiy instead of font-family, so the declaration is ignored. However, the declaration would not affect the rendering much anyway, since Arial does not contain the special characters used. This means that browsers will try to pick up glyphs from different fonts, and their methods may vary here; IE is notorious for failing to do this in many occasions: it often cannot render a character even though some font in the system contains it.

    To get better rendering, you need to analyze the support to the different characters in commonly available fonts and write suitable lists as values for the font-family property. You may wish to define different lists for different characters, wrapping them inside span (or, why not, font) elements.

    For example, the first special character U+2AF8 (&#x2AF8;) is present in a few fonts only, though in addition to those listed at
    http://www.fileformat.info/info/unicode/char/2af8/fontsupport.htm
    the Cambria Math font contains it, too. So you could use for it

    font-family: Cambria Math, Symbola, Quivira, STIX, Code2000;

    You should also set the line-height property for the enclosing block element (like p) to a reasonable value , like 1.3. Otherwise the very large inherent line height of Cambria Math may cause too large spacing between lines.

    • 0