line-height вертикальное выравнивание font-face - PullRequest
Новая
       6

line-height вертикальное выравнивание font-face

1 голос
/ 21 июля 2010

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

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

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

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

Ответы [ 3 ]

2 голосов
/ 25 октября 2012

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

"Не существует идеальной высоты строки, которая одинаково хорошо работает для всех веб-шрифтов. Каждый шрифт требует разной высоты строки по умолчанию, в зависимости от его конструктивных качеств - будь то сжатый или широкий, имеет ли он плотный или свободный буквенный интервал, будь то его подъемы или спуски длинные или короткие по сравнению с высотой x и т. д. " - Webfonts.info

Если вы лицензировали шрифт у веб-шрифтов, у них есть конструктор комплектов, который позволяет вам работать с параметрами высоты строки. «Bounding Box» работал на тот шрифт, который у меня был там. Больше информации здесь: 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 . Если у вас есть права на использование соответствующего шрифта, используйте этот генератор в экспертном режиме и убедитесь, что установлен флажок «Исправить вертикальные метрики».

1 голос
/ 21 июля 2010

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

0 голосов
/ 21 июля 2010

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

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

...