> On Jul 28, 2016, at 7:05 AM, Sara Haradhvala <har...@comcast.net> 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 Android.
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 fonts.com (the official provider of that font) shows that,
indeed, it does not contain a glyph for that ‘◆’ character.
Philippe
--
Philippe Wittenbergh
http://l-c-n.com/
______________________________________________________________________
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
