Как сместить базовую линию по высоте линии?

Question

Это очень распространенная проблема с font-face, например

font: 20px/20px 'ITC Avant Garde Gothic Std'; font-style: 'book'; letter-spacing: 1px; text-transform: uppercase;

Проблема заключается в том, что я ожидаю, что текст будет располагаться вертикально по центру.Однако это не так.Есть ли способ сместить базовую линию на высоту строки?Без фактического изменения line-height.

Answer 1

Феномен зависит от шрифта.Именно дизайнер шрифтов должен решить, как шрифт использует его высоту.Например, в Arial, когда заданы сплошные, основные латинские буквы в верхнем регистре располагаются вертикально по центру, тогда как в Verdana они выглядят немного ниже (т. Е. Немного больше места выше, чем ниже).

Вы можете точно настроить этоиспользуя относительное позиционирование, но тогда вам потребуется дополнительная разметка, например

<div><span>text</span></div>

с CSS для настройки span, скажем,

position: relative;
top: 2px;

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

Я не учел возможный эффект font-style: 'book', так как понятия не имею, что это может означать.Ни один ресурс CSS, о котором я знаю, не упоминает ничего подобного (значения font-style являются ключевыми словами без кавычек и не включают book).