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

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

Пример: https://jsfiddle.net/LordGuard/7u5orb2q/
  • Вопрос задан
  • 281 просмотр
Решения вопроса 2
cesnokov
@cesnokov
<head>&nbsp;</head>
Вставьте в вопрос кусок CSS кода отвечающий за стиль кнопок.

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

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

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

Метрики вашего шрифта для самостоятельного расчёта отступов:
5dc4309159864977435820.png
Ответ написан
ArsenyMatytsyn
@ArsenyMatytsyn Куратор тега CSS
Руководитель frontend направления, предприниматель
Выше тебе показали метрики. Ты можешь на базе их создать канву для иконки, чтобы, вписать ее, скажем, в x-height, да экспортировать в виде кода, задать ей свойства inline уже в html-коде, чтобы она встроилась, как текст.

Придется пошаманить с настройкой ее как инлайновой (да или inline-block) единицы, но оно того стоит. По этому принципу можно и регулировать свои иконочные шрифты под основное начертание в проекте. Но это уже другая тема.
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
@akyl-kb
Добавить в button line-height: 1 таким образом текст будет занимать 100% высоту текста.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы