Проблема с высотой строки Webfont (@font-face)

Я часто встраиваю webfont (@font-face) в сайты, которые я разрабатываю, и до сегодняшнего дня я никогда не сталкивался с серьезной проблемой.

На самом деле, я чувствую, что существует большая проблема с линейной высотой, я не очень хорошо разбираюсь в английском, поэтому я попытаюсь проиллюстрировать ее с картинками. Я уже обращаюсь в службу поддержки с fontshop.com(где был куплен шрифт), но они, похоже, не понимают/не решают проблему.

То, что у нас было раньше со стандартным шрифтом рабочего стола (= рендеринг хорош для нас):

http://cl.ly/image/2p0T1q1b1g35

Что у нас было с шрифтом (без изменений в таблице стилей CSS):

http://cl.ly/image/360M1d1X0w0K

Вот CSS:

#content h1 {
    background:#000000;
    color:#FFFFFF;
    font-family:"DINPro-Bold","Helvetica Neue",Arial,Helvetica,Geneva,sans-serif;
    font-size:35px;
    line-height:30px;
    padding:10px;
    text-transform:uppercase;
}

Любые идеи? Большое вам спасибо.

ОТВЕТЫ

Ответ 1

Обычно веб-сайты шрифтов будут иметь способы настройки пакета webfont при его загрузке. Я покупаю все мои шрифты с myfonts.com, и в расширенных настройках есть опции для регулировки высоты строки. Попробуйте загрузить шрифт, используя собственные настройки высоты строки, если эта опция доступна. Если нет, попробуйте загрузить шрифт в генератор шрифтов fontsquirrel онлайн и загрузить новую версию.

Ответ 2

Это не тот же шрифт. Форма O и кривизна руки на R отдают ее, что означает, что используются резервные шрифты, вероятно, из-за неправильной загрузки шрифта @font-face. Различные шрифты будут иметь разный интервал по умолчанию, как уже было сказано, что также заставило бы вас поверить в проблему с высотой строки.

Попробуйте сделать свои резервные шрифты совершенно очевидными, например:

font-family:"DINPro-Bold",serif;

Ответ 3

Если у вас есть проблемы с высотой строки вашего веб-сайта (особенно если шрифт предположительно будет большим в вашем проекте), попробуйте это: закройте шрифт в div или другом блочном элементе и установите "переполнение" на "скрытый". Div будет иметь точную высоту шрифта, поэтому любое дополнительное пространство будет отключено.

Ответ 4

Высота строки в соответствии с wikipedia

В типографии ведущие (рифмы с заголовком) относятся к количеству добавлен вертикальный интервал между строками типа.

Это может быть достигнуто как это...

.class { line-height: 1em; }

Но если вы имеете в виду высоту букв, это не то, что можно отрегулировать. Это часть шрифта, который вы выбрали для использования.

Ответ 5

Попробуйте добавить "position: relative; top: 5px;" к тегу "h1"

Ответ 6

Попытка позиции: относительная; paddint-top: 5px; padding-bottom: 0px;