Previous Message
Next Message

rendering of icon in Windows browsers

Sent by Philippe Wittenbergh on 28 July 2016 00:12

> On Jul 28, 2016, at 7:05 AM, Sara Haradhvala [EMAIL-REMOVED]> wrote:
> I set up this unicode in CSS
> .menu li::after {
> 	content: “◆”;
> 	font-family: athelas, serif;
> 	font-weight:bold;
> 	font-size: 16px;
> }
> My problem is that the diamond is much bigger in IE and somewhat bigger in FF on Windows. 

One guess [*], as I don’t have access to that font (athelas): it does **not** contain a glyph for
the character you want to display, and neither does the default serif font, then system fallback
occurs – that is: Firefox and IE (Edge also ?) fall back to the default system font that contains
that glyph. That happens to be bigger than the default one on OS X. And who knows what happens on

There is not much you can do about it… except specifying a (fallback) font that is available cross
platform (or via @font-face) that contains that glyph. For example:

font-family: 'athelas', 'arial unicode MS', sans-serif. // Roboto, the default on Android, has  very
similar metrics

[*] a quick test on (the official provider of that font) shows that, indeed, it does not
contain a glyph for that ‘◆’ character.

Philippe Wittenbergh

css-discuss [EMAIL-REMOVED]]
List wiki/FAQ --
List policies --
Supported by --
Previous Message
Next Message

Message thread:

Possibly related: