Вертикальные метрики в нескольких шрифтах

У меня возникла эта проблема, и я не знаю, как ее исправить. Я создаю веб-сайт и использую разные шрифты.

Мне нужно, чтобы каждый шрифт был оптически совершенно идентичен другому и идеально выровнен по основанию.

Допустим, я пишу HELLO (Helvetica) HELLO (Georgia) Я изменю их размер, потому что, вероятно, Helvetica 40px не совпадает с размером 40px helvetica. НО проблема в базовой линии

Когда я вижу все шрифты (с одинаковыми пикселями и высотой строки) один рядом с другим, они не выровнены по горизонтали.

Ссылка на изображение здесь!


html fonts css webfonts
person Giø    schedule 25.07.2016    source источник
comment
Вы пробовали вертикальное выравнивание: базовая линия?   -  person cameron.townsend    schedule 25.07.2016
comment
Да, но это не работает - мне пришлось использовать vw value и vw padding поверх некоторых шрифтов, чтобы их выровнять.   -  person Giø    schedule 13.09.2016

Ответы (1)


arrow_upward
0
arrow_downward

Комментарий @cameron.townsend правильный. Вы захотите использовать vertical-align:baseline; для всего текста, чтобы он выглядел так, как вы хотите.

Вот скрипт, демонстрирующий различные выравнивания: https://jsfiddle.net/g7oqupej/1/

При этом похоже, что поведение по умолчанию (vertical-align:initial;) для Chrome равно vertical-align:baseline; Не уверен насчет других браузеров, поскольку я не тестировал, но со шрифтами, которые я использовал в скрипке, все выглядит так, как вы хотите.

Я бы предложил создать скрипку, которая показывает проблему, с которой вам приходится видеть, делается ли что-то еще.

person Dryden Long    schedule 25.07.2016