Как исправить шрифт в CSS если он как будто выше базовой линии?

Question

[Alex]

Есть div стилизованный под кнопку где текст вертикально центрирован при помощи свойств flex и используя кастомный шрифт на ПК в браузерах хром, он выглядит нормально по центру, но на андроид устройстве он смещен вверх, т.е. уже не по центру, а выше центра. Если взять какой нибудь стандартный например Open Sans или sans-serif все хорошо и на пк и на андроид. Если смотреть на div в devtools видно что часть верхушки текста находится как бы в зеленой зоне (зоне padding), хотя в хроме на пк он в синей т.е. в зоне div.
Как это можно исправить? Может как то можно регулировать положение символов шрифта?
И само интересное почему браузеры на пк центрируют нормально, а на андроид он смещен чуть вверх.

Comments

[Алексей Ярков]

Это потрясающе. В вопросе про ВИЗУАЛЬНОЕ отображение текста ни кода, ни скриншота. Моё почтение ))

[Александр Васильев]

« или sans-serif » ??
« находится как бы в зеленой зоне (зоне padding)» - явно не хватает места.
« используя кастомный шрифт на ПК в браузерах хром, он выглядит нормально по центру» - не верю.

[Ankhena]

Алексей Ярков, кажется, нам нужен новый тег "угадай ка".

[Ankhena]

Alex вариантов вообще много. От просто кривого шрифта, его формата (или того как и чем его переформатировали) минимальных размеров в браузере, line-height до просто кривой верстки. Например задана высота и флекс вместо отступов (и мин высоты при необходимости).

Я бы начала с вопроса, на какой черт делать кнопки дивами. Ровнее, скорее всего не станет, но хоть на код будет приятнее смотреть.

Answer 1

[Alex]

нашел свойство font-face - ascent-override
установил ascent-override: 90%; и стало отображаться нормально везде., но пишут вроде сафари это свойство не читает. Почему то браузеры на пк это делают видимо сами, т.е. автоматически вычисляют высоту над базовой линией, а хром в андроиде почему то не умеет так и если ставишь коррекцию при помощи ascent-override результат в хроме пк и хроме андроид становится одинаковым (в пк версии ничего не меняется, раньше коррекция при помощи padding или line-height давала разный результат выравнивая на андроиде, на пк текст смещался ниже центра). А с сафари остается надеется что там вычисляется всё и без ascent-override нормально, проверить не получится нет устройства эпл.

@font-face {
    font-family: 'FontName';
    src: url("font.eot");
    src: url("font.eot?#iefix")format("embedded-opentype"),
    url("font.woff2")format("woff2"),
    url("font.woff")format("woff"),
    url("font.ttf")format("truetype");
    ascent-override: 90%;
}

Comments

[Ankhena]

Какие ещё eot и ttf? Вы какие браузеры собираетесь поддерживать? Уберите все эти форматы кроме woff2. Глядишь и без костылей всё выровняется.

[Alex]

Ankhena, к сожалению нет, вообще изначально и был только woff2. Это просто код скопирован когда я проводил тесты думал проблема в каком то формате может быть. В итоге решил всё только ascent-override, других способов пока не было найдено.

[Ankhena]

Alex, да, бывают и кривые шрифты, им костылики.
И рекомендую найти iOS и проверить как выглядит там.