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

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

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

Что у нас было раньше со стандартным настольным шрифтом (= рендеринг нам подходит):

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

Вот 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;
}

css webfonts font-face
person Thibaut    schedule 17.10.2012    source источник
comment
Еще одна картинка для объяснения... cl.ly/image/0h0K3I3O2t2V   -  person Thibaut    schedule 17.10.2012
comment
Пожалуйста, опубликуйте код, желательно для минимального случая, демонстрирующего проблему. Также, пожалуйста, объясните, почему вы думаете, что это проблема высоты строки.   -  person Jukka K. Korpela    schedule 17.10.2012
comment
В качестве подсказки см. это изображение: en.wikipedia. org/w/ Во-первых: у каждого шрифта есть дополнительное пространство сверху и снизу, у кого-то больше, у кого-то меньше, и все шрифты разные. Единственное решение - настроить элемент с помощью полей/отступов, пока он не подойдет. Лучше всего использовать line-heights, чтобы реализовать базовую сетку, как это используется в печатных СМИ — посмотрите на газету: каждый текст находится в строке :D   -  person Rockbot    schedule 17.10.2012
comment
Спасибо за ваш ответ @Rockbot, я знаю, что проблема может решиться с отступами / полями, но я не хотел приходить к этой технике немного грязной, я думаю ... Есть ли способ решить проблему с высотой? Я знаю, что генератор шрифтов с веб-сайта Font Squirell может решить эту проблему, я однажды сделал это с другим шрифтом, но он не позволил мне загрузить этот новый шрифт (FF DIN) ... В любом случае, интересно, если он не придет из-за того, что я использую преобразование текста: верхний регистр. Пространство внизу исходит из того, что оно предусматривает размещение символов ниже базовой линии... Возможно?   -  person Thibaut    schedule 17.10.2012
comment
Попробуйте удалить text-transform и посмотрите, что произойдет :) Я не знаю, есть ли возможность редактировать высоту шрифта, извините!   -  person Rockbot    schedule 17.10.2012
comment
@Rockbot, посмотри на картинку, похоже, она неправильно выровнена по базовой линии, как должно быть (как на картинке из википедии, которую ты прислал) cl.ly/image/0R3O113o1N32   -  person Thibaut    schedule 17.10.2012
comment
еще две ссылки по теме: fontsquirrel .com/forum/discussion/8/ и webfonts.info/webfonts-know-how/part-2-problem-line-height - здесь особенно пункт 3. Опять же - я думаю, проблема со шрифтом!   -  person Rockbot    schedule 17.10.2012
comment
Если вы найдете решение - сообщите нам, пожалуйста!   -  person Rockbot    schedule 17.10.2012
comment
Да @Rockbot буду искать пока решил проблему с отступами, наш клиент не мог дождаться ;)   -  person Thibaut    schedule 17.10.2012

Ответы (7)


arrow_upward
5
arrow_downward

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

person Adam Privette    schedule 31.05.2013
comment
Следует отметить, что любое изменение файлов шрифтов противоречит условиям обслуживания почти всех поставщиков веб-шрифтов премиум-класса. - person aksu; 31.08.2016

arrow_upward
5
arrow_downward

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

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

font-family:"DINPro-Bold",serif;
person Bryan Corey    schedule 10.09.2013

arrow_upward
1
arrow_downward

Это сработало для меня:

Создайте веб-шрифт на странице Font Squirrel. После загрузки шрифтов выберите «Эксперт», прокрутите вниз и установите флажок «Соответствие высоты X». Это изменяет размер высоты в соответствии с x-высотой.

person ElBrm    schedule 27.10.2020

arrow_upward
0
arrow_downward

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

person Sulibrat    schedule 17.01.2014

arrow_upward
-1
arrow_downward

Попробуйте добавить «позиция: относительная; верхняя: 5 пикселей;» к тегу "h1"

person Joker    schedule 18.07.2013

arrow_upward
-1
arrow_downward

Попробуйте положение: относительное; paddint-top: 5px; отступ снизу: 0px;

person Casualty    schedule 09.01.2014

arrow_upward
-2
arrow_downward

Высота строки согласно википедии

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

Этого можно добиться так...

.class{высота строки: 1em; }

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

person cih    schedule 17.10.2012
comment
Извините, если я не понимаю вашего вопроса, потому что я не вижу разницы между двумя изображениями. - person cih; 17.10.2012
comment
Может быть, с этой картинкой будет понятнее? cl.ly/image/1G2w2I3h281o - person Thibaut; 17.10.2012
comment
как насчет !impotrant, у вас могут быть другие конфликтующие стили. Не стесняйтесь публиковать скрипку, и я посмотрю. - person cih; 17.10.2012