Проблема здесь не в высоте строки, а в вертикальном размещении глифов, в частности в расположении базовой линии текста. Это то, что решил дизайнер шрифтов; дизайнер рисует глифы и помещает их в квадрат 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>
person
Jukka K. Korpela
schedule
23.01.2015
