Why does font-icon render outside of its content area? and how to fix it?

Question

I have a .woff font file consisting of font-icons. These icons are rendered differently in Mac and in Windows. I suspect the reason to be different Win Ascent/Descent and HHead Ascent/Descent values in font metrics.

This icon-font file is generated from svg files using webfonts-generator package

Here is the snapshot of same icon rendered in both mac and windows

Mac:

Windows:

could anyone tell me how to fix this?

We could be help you if you show us your html and css code. :) — jaydeep patel, Dec 05 '19 at 04:48

score -1 · Answer 1 · answered Dec 05 '19 at 07:32

-1

may be your line-height is less than font-size

answered Dec 05 '19 at 07:32

Shirish Maharjan

502
3
17

Why does font-icon render outside of its content area? and how to fix it?

1 Answers1