Line-height в разных ОС работает по разному в зависимости от шрифта?

Question

[Свинка Пеппа]

В общем ситуация примерно такая же как вот в этом вопросе.
Я с помощью line-height вертикально центрирую контент в блоке, в итоге все замечательно выглядит во всех браузерах под ubuntu, в которой все версталось.
Но в винде верстка поехала (во всех браузерах, да), если поправить под виндой line-height, то все выглядит ок в любом браузере, но тогда все криво под ubuntu и maс (тоже в любом браузере).
Вангую на шрифты.
От чего зависит расчет line-height в разных системах при одинаковом шрифте? И как это побороть?
Шрифты подключаются через @font-face и имеют формат .otf.

Код:

<div class="bar">
  <img src="img/ico/ico-phone.png" alt="Телефон">
  <a href="tel:555-555">555-555</a>
  <a href="tel:[phone]">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;
}

Как бы логично - height: 70px, line-height: 70px - контент блока .bar отцентрировался по вертикали и это работает в винде. Чтобы контент "прижать" к центру вертикали в ubunte нужно line-height делать 54px иначе он находится внизу блока.
Шрифт FedraSansCondProBook на всякий случай.

Comments

[Свинка Пеппа]

MaxKorz: Добавил код

Answer 1

[Андрей Хохлов]

Был недавно такой же вопрос Почему разница в chrome на windows и mac?
Дело не в свойстве line-height, а в шрифте.

У меня сейчас заказчик думает, чем шрифт заменить.
Я даже исследование проводил.
Вот этот шрифт: www.myfonts.com/fonts/g-type/houschka-rounded-alt/...
Chrome на OS X:

Chrome на Windows


Говорят https://www.fontsquirrel.com/tools/webfont-generator может это исправить. С .otf у меня ничего не вышло, а .ttf нет и непонятно стоит ли покупать если он все равно кривой.

Comments

[Свинка Пеппа]

Спасибо за ответ и наводку, попробую достать .ttf

[Алексей]

у меня поддержка русского вдруг исчезла после конвертации там

Answer 2

[GreatRash]

А может ну его этот line-height, может центрировать при помощи flex лучше?

Comments

[Свинка Пеппа]

Я всеми руками за flex, но нужен IE

[GreatRash]

qbudha: В ИЕ флекс работает. А вам какой нужен?

[Свинка Пеппа]

GreatRash: Насколько я понимаю вот это caniuse.com/#search=flex
Flex более или менее работает с IE11, а нужен 10

[GreatRash]

qbudha: В ИЕ10 тоже всё работает. А с учётом того, что вам нужно оттуда только вертикальное центрирование, можно смело юзать. И даже можно более старые браузеры поддержать если очень хочется.

[Свинка Пеппа]

GreatRash: Да, возможно...
Тогда правильный вопрос будет звучать так, а можно ли вообще обойтись без line-height?%)
Который будет все равно разным в разных ОС.

[alepron]

Не помогает flex, ситуация аналогичная, решения пока не нашел.