Previous Message
Next Message

rendering of icon in Windows browsers

Sent by Sara Haradhvala on 28 July 2016 04:04


I think you’re right.  The problem is that I need to use a glyph from photoshop that isn’t
assigned a unicode value.  Is there any way to use this as text? Or does it have to be turned into
an svg image?


> On Jul 27, 2016, at 7:15 PM, Philippe Wittenbergh [EMAIL-REMOVED]> wrote:
> 
> 
>> 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
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 [EMAIL-REMOVED]]
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/
Previous Message
Next Message

Message thread:

Possibly related: