Line-height works differently on Mac and Windows

I have text with a non-web font, I used @font-face for this.

It works fine in all browsers on Windows, but is aligned on top in all browsers on a Mac.

enter image description here

The blue box in this image is the line height.

I found this similar question , but it does not provide a workable solution.

+7
css css3 font-face
source share
2 answers

If resolved using a different font, the problem is with the font, not CSS.

Font squirrel has an option under "expert", where you can check "Auto-tuning vertical indicators", this may work for you.

https://www.fontsquirrel.com/tools/webfont-generator

+2
source share

try the css attribute "vertical-align: middle", this may solve the problem.

-3
source share

All Articles