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

У меня есть следующая разметка:

<div class="blockSection">
<h5>Title of the section</h5>
...
</div>

теперь h5 для .blockSection имеет фиксированную высоту и фоновое изображение 40 пикселей. Для выравнивания текста по вертикали я всегда устанавливаю высоту строки такой же, как и высоту, так как текст не будет разбиваться на 2 или более строк. Но проблема в том, что я использую шрифт с шрифтом, и я не хочу выравнивать по вертикали в Firefox, Safari на Mac. В Windows IE выглядит хорошо.

Кто-нибудь знает, как сделать это правильно, не применяя разную высоту строки для браузеров?


html css font-face
person blackhandr    schedule 21.07.2010    source источник

Ответы (3)


arrow_upward
3
arrow_downward

Возможно, вам просто не повезло... за исключением взломов для разных комбинаций браузеров и ОС.

«Не существует идеальной высоты строки, которая бы одинаково хорошо подходила для всех веб-шрифтов. Для каждого шрифта требуется разная высота строки по умолчанию, в зависимости от его дизайнерских качеств — будь то сжатый или широкий, имеет ли он плотное или свободное расстояние между буквами, его надстрочные элементы или спусковые элементы длинные или короткие по сравнению с x-высотой и т. д.». - Веб-шрифты.info

Если вы лицензировали шрифт у Webfonts, у них есть конструктор комплектов, который позволяет вам возиться с параметрами высоты строки. «Ограничивающая рамка» работала для одного шрифта, который у меня был. Подробнее здесь: http://webfonts.info//webfonts-know-how/part-3-line-height-options-kitbuilder

Еще один вариант, который лучше, чем условные таблицы стилей, поскольку шрифт может отображаться по-разному в разных браузерах и ОС, вы можете попробовать этот плагин jQuery, который позволяет вам обнаруживать комбинации браузеров и ОС, а затем применять к нему класс. Не идеально, но вариант.

http://www.icavia.com/2010/09/solving-font-face-alignment-issues/

ОБНОВЛЕНИЕ: можно попробовать использовать Font Squirrel Webfont Generator. Если у вас есть права на использование рассматриваемого шрифта, используйте этот генератор в экспертном режиме и убедитесь, что установлен флажок «Исправить метрики по вертикали».

person Trevor    schedule 25.10.2012

arrow_upward
1
arrow_downward

Одним из решений для вертикального центрирования (в браузерах, отличных от IE) является использование display: table-cell и vertical-align: middle на вашем h5 .

person RoToRa    schedule 21.07.2010
comment
правда, он отлично работает с веб-шрифтами по умолчанию, но с моим шрифтом нет :) - person blackhandr; 21.07.2010
comment
Хм, я только что попробовал использовать веб-шрифт Google, и все в порядке: jsfiddle.net/ux2eE/2 . Я предполагаю, что что-то не так с вашим шрифтом в этом случае. Можете ли вы дать какие-либо подробности об этом? Может, выложить в сеть? - person RoToRa; 22.07.2010
comment
На это должно влиять что-то еще. Мне кажется, что в Firefox и Chrome он идеально расположен по центру: yfrog.com/jacenteredp - person RoToRa; 19.08.2010
comment
правильно :) но, как я уже сказал, в первую очередь проблема заключается в рендеринге OS X, в Windows он тоже отлично работает для меня! - person blackhandr; 19.08.2010
comment
Ах, я тоже не знал, что это Mac Firefox. Кажется, это проблема, специфичная для Mac. Я не могу помочь вам там. Последнее предложение вместо реального центрирования просто дает элементу верхний и нижний отступы. - person RoToRa; 19.08.2010

arrow_upward
0
arrow_downward

Похоже, условные комментарии помогут. Создайте таблицу стилей только для IE в пределах одной высоты строки и основную таблицу стилей с высотой строки для других браузеров.

Я знаю, что вы не хотите устанавливать разную высоту строки для разных браузеров, но если IE делает то, что вам нужно, а другие браузеры — нет, это лучшее решение.

person Pat    schedule 21.07.2010