CODEWITHSUNDEEP
internet-explorerfontsspecial-characterswebpage-rendering
Bitneko
Bitneko

Reputation: 123

Script capital character rendering in internet explorer

Script Capital H looks very different from chrome and firefox in internet explorer to the point that its almost illegible. Is there anyway to have it look the same or at least improve the legibility of the character?

Here's an example of the character. You can see the difference if you open the link in both ie and firefox/chrome. http://graphemica.com/%E2%84%8B

Character rendering is the same regardless of whether i am using unicode encoding or simply pasting the actual character in the markup.

Upvotes: 1

Views: 153

Answers (1)

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201788

The reason is that different browsers have different default fonts, and script capital H has rather different designs in different fonts. Script letters are supposed to resemble handwritten letters, and handwriting varies a lot.

If you page declares some font(s) to be used, in CSS, then browsers will anyway be forced to use other fonts if the character is not included in none of your declared font(s). Therefore, you should write a list of fonts known to contain the character in acceptable shape and declare that list for an element containing the character. E.g., you might use

<span class=special>&#x210b;</span>

with the CSS code

.special { Lucida Sans Unicode, Segoe UI Symbol, DejaVu Sans }

perhaps with a much longer list; cf. to font coverage info (not exhaustive, but useful): http://www.fileformat.info/info/unicode/char/210b/fontsupport.htm

The page you mention has font-family: "Times","Times New Roman","serif","sans-serif", but since neither of the specific fonts contains the character, fonts named serif and sans-serif are used (these names must not be in quotes so that they will be taken as CSS-defined generic names!), so a browser falls back to its rock bottom default font. This varies, and may depend on browser settings.

Remember to set line-height for all elements, to avoid problems caused by characters from different fonts on the same line being each rendered with its own default line height.

More info: Guide to using special characters in HTML.

Upvotes: 2

Related Questions