Почему вертикальное выравнивание текста работает по разному на десктопе и мобильных устройствах?

Question

[Александр]

Пробовал и с помощью flexbox и c помощью vertical-align, не помогает. Шрифт: Futura


Пример: https://jsfiddle.net/LordGuard/7u5orb2q/

Comments

[Ankhena]

span убрать вовсе, svg абсолютом (либо фоном) в угол, кнопке line-height: 1

Answer 1

[Павел Чесноков]

Вставьте в вопрос кусок CSS кода отвечающий за стиль кнопок.

#2
В вашем случае то, что отмечено как MOBILE является правильным вариантом, так как вертикальный центр буквы измеряется не по заглавным буквам, а по строчным. Небольшой отступ всё исправит margin-top: 0.2em;. А в DESKTOP версии просто разрешение экрана слишком мало чтобы увидеть, что текст тоже немного выше центра кнопки.

Если отступ вас не устраивает, а искать альтернативный шрифт со всеми форматами для всех браузеров вам неохота - можно искусственно уменьшить высоту букв, сравняв по высоте прописные и строчные font-variant-caps: all-small-caps;, а они уже будут хоть и маленькие но по середине.

Вот тут интересная статья на эту тему:
https://positive-js.github.io/blog/css-font-metric...

Метрики вашего шрифта для самостоятельного расчёта отступов:

Comments

[Александр]

https://jsfiddle.net/LordGuard/7u5orb2q/

[Александр]

Проблема в том, что отступа в 1.9px недостаточно, а при отступе в 2px на десктопе текст уже смещается ещё ниже. То есть нет такого отступа при котором выравнивание работало бы одинаково и там и там.

[Павел Чесноков]

Не используйте абсолютные величины (px), возьмите за основу высоту букв (em):
margin-top: 0.2em;

[Ankhena]

Павел Чесноков,

не по заглавным буквам, а по прописным

Это одно и тоже. Исправьте, пожалуйста.

Answer 2

[Арсений Матыцин]

Выше тебе показали метрики. Ты можешь на базе их создать канву для иконки, чтобы, вписать ее, скажем, в x-height, да экспортировать в виде кода, задать ей свойства inline уже в html-коде, чтобы она встроилась, как текст.

Придется пошаманить с настройкой ее как инлайновой (да или inline-block) единицы, но оно того стоит. По этому принципу можно и регулировать свои иконочные шрифты под основное начертание в проекте. Но это уже другая тема.

Comments

[Арсений Матыцин]

А тю, только на дату глянул. Вовремя я, ага)

Answer 3

[akyl-kb]

Добавить в button line-height: 1 таким образом текст будет занимать 100% высоту текста.