P
P
Peppa Pig2016-08-01 12:19:21
css
Peppa Pig, 2016-08-01 12:19:21

Line-height in different OS works differently depending on the font?

In general, the situation is about the same as in this question .
I use line-height to vertically center the content in the block, as a result, everything looks great in all browsers under ubuntu, in which everything was typeset.
But in Windows, the layout went wrong (in all browsers, yes), if you correct the line-height under Windows, then everything looks ok in any browser, but then everything is crooked under ubuntu and mac (also in any browser).
Wang on fonts.
What determines the calculation of line-height in different systems with the same font? And how to overcome it?
Fonts are included via @font-face and are in .otf format.
The code:

<div class="bar">
  <img src="img/ico/ico-phone.png" alt="Телефон">
  <a href="tel:555-555">555-555</a>
  <a href="tel:8-555-555-5555">8-555-555-5555</a>
  <a class="mkcall" data-featherlight="#callback" href="#call">Заказать обратный звонок</a>
  <input type="search" placeholder="Поиск">
</div>

.bar {
    line-height: 70px;
    height: 70px;
    width: 65.76788%;
    margin-right: 2.69637%;
    text-align: justify;
    font-size: 22px;
}

It would be logical - height: 70px, line-height: 70px - the content of the .bar block is centered vertically and this works in Windows. In order for the content to "press" to the center of the vertical in ubunte, you need to make the line-height 54px, otherwise it is at the bottom of the block.
FedraSansCondProBook font just in case.

Answer the question

In order to leave comments, you need to log in

2 answer(s)
A
Andrey Khokhlov, 2016-08-01
@andrhohlov

There was a similar question recently Why is there a difference in chrome on windows and mac?
It's not about the line-height property, it's about the font.
My customer is now thinking about how to replace the font.
I even did some research.
This font is here: www.myfonts.com/fonts/g-type/houschka-rounded-alt/...
Chrome on OS X:
Chrome on Windows
They say https://www.fontsquirrel.com/tools/webfont-generator can fix it. Nothing worked out with .otf, but .ttf didn’t, and it’s not clear whether it’s worth buying if it’s still a curve.

G
GreatRash, 2016-08-01
@GreatRash

Or maybe this line-height can center it better with flex ?

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question