Menu
I have a text with non web font, I have used @font-face for this.
It's working fine in all browsers on Windows, but top aligned in all browsers on Mac.
Blue box in this image is line-height.
I found this similar question, but it doesn't provide a workable solution.
704
Well, Windows and Mac each have their own specification for the ascent and descent values. On a Mac, a font looks for the ascent and descent in something called the HHead table, whereas on Windows, a font looks for these values in the Win table.
While there is no perfect line height, a good rule of thumb is to set it at approximately 150% of the font size. While there is no perfect line height, a good rule of thumb is to set it at approximately 150% of the font size.
For the optimal readability and accessibility, you should go with140 – 180% line height (this is the space around a line of text). This means if your font size is 16pt, your line height should be at least 16 x 1.4 = 22.4pt (140%), or 16 x1. 8= 28.8pt (180%) maximum value.
The line-height CSS property sets the height of a line box. It's commonly used to set the distance between lines of text. On block-level elements, it specifies the minimum height of line boxes within the element. On non-replaced inline elements, it specifies the height that is used to calculate line box height.
If it is resolved by using a different font the issue is with the font, not with the CSS.
Font squirrel has an option under 'expert' where you can check 'Auto-Adjust Vertical Metrics' this might work for you.
https://www.fontsquirrel.com/tools/webfont-generator
127
You can convert fonts, using https://transfonter.org/ with the "Fix vertical metrics" option enabled, solved my problem.
25
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
