Webfont с плохим пространством и как его исправить [дублировать]

В Chrome я обнаружил, что если вы используете декларацию font-face. Вы можете решить проблему с высотой строки с помощью вызова стиля = «» в HTML или просто объявить высоту строки ПОСЛЕ определения шрифта в вашем CSS.

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

Проблема здесь заключается не в высоте строки, а в вертикальном размещении глифов, в частности в местоположении базовой линии текста. Это то, что решил дизайнер шрифтов; дизайнер рисует глифы и помещает их в квадрат em, концептуальное устройство, которое имеет высоту, равную (или определенную) высоту шрифта. В частности, дизайнер решает, сколько места находится ниже базовой линии, с одной стороны, и выше высоты заглавных букв, с другой. Обычно эти пространства равны или почти равны, но они не обязательно должны быть. Если они существенно отличаются, предполагаемое использование шрифта, вероятно, является особенным и не включает использование, как показано на изображении. Это предполагает, что выбор шрифта должен быть пересмотрен, но предположим, что он исправлен.

Существует несколько способов решения проблемы. Если над буквами слишком много места, уменьшение line-height делает его меньше, но оно также влияет на пространство выше. Верхнее дополнение помогает в определенном смысле, но увеличивает общую высоту, занимаемую элементом. Вы также можете играть с vertical-align, но это влияет на высоту строк.

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

В следующей демонстрации используется шрифт Google, Candal, который имеет аналогичную проблема, но в другом направлении: базовая линия слишком низкая. Модификации этого подхода для удовлетворения исходной проблемы должны быть очевидными, но точное количество перемещения необходимо определить эмпирически (или из информации, извлеченной из файла шрифта с помощью инспектора шрифтов). Естественно, здесь нужно использовать блок em, даже если вы задаете размер шрифта в пикселях или точках (так что код не нужно менять, если размер шрифта изменится однажды).

<link href='http://fonts.googleapis.com/css?family=Candal' rel='stylesheet'>
<style>
div { font-family: Candal }
div { background: lightgreen; font-size: 200%}
</style>
<p>What we have got initially:
<div>BRAKE HOSE AND AIR CHAMBER</div>
<p>Reducing line height (even “setting solid”) does not really help:
<div style="line-height: 1">BRAKE HOSE AND AIR CHAMBER</div>
<p>But displacing the text upwards by 0.1em does:
<div><span style="position: relative; bottom: 0.1em">
BRAKE HOSE AND AIR CHAMBER</span></div>

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

Вы попробовали fontsquirrel? Есть несколько вариантов с разными результатами.

http://everythingfonts.com/font-face

http: //www.font2web .com /

http://www.fontsquirrel.com/tools/webfont-generator

https: // www.web-font-generator.com/

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

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

p {

    vertical-align: text-bottom;
    line-height: 1.5;

}