При настройке размера шрифта CSS в пикселях значение ссылается на ширину или высоту буквы?

Значит ли значение пикселя размера шрифта для высоты шрифта или ширины шрифта?

CSS

.sixteen {
  font-size: 16px;
}

HTML:

<span class='sixteen'>a</span>

Будет ли "a" иметь высоту 16 пикселей или ширину 16 пикселей, или это как максимальная ширина/высота на обоих так, чтобы весь символ помещался в поле размером 16 пикселей?

Вся документация, которую я видел для этого, неоднозначна по этому вопросу.

Ответ 1

Высота - особенно от вершины восходящих линий (например, "h" или "l" (el)) до нижней части ограничителей (например, "g" или "y" ). См. Интересную статью о анатомии типа в http://en.wikipedia.org/wiki/Typeface_anatomy.

Ответ 2

Свойство font-size указывает размер шрифта, независимо от того, какой блок используется. Размер шрифта можно охарактеризовать как высоту шрифта, но даже это просто свободное и прагматичное описание; символы могут распространяться выше и ниже уровней, определяемых размером шрифта. Размер является более или менее абстрактным свойством, и не следует ожидать, что он будет соответствовать высоте (еще меньше ширины) любого символа.

В частности, было бы неправильно создавать шрифт, где буква "a" занимает всю высоту шрифта. Высота "a" обычно составляет примерно половину размера шрифта, но это, безусловно, зависит от шрифта (попробуйте проверить "a" в Times New Roman и в Verdana, используя тот же размер шрифта).

Ответ 3

Согласно этой статье Винсента Де Оливейры, font-size на самом деле не имеет ничего общего с фактической высотой символов. Это даже не высота встроенного элемента, который содержит текст.

Конечно, большее значение свойства font-size приводит к большему тексту. Но значение пикселя напрямую не переводится в фактический размер текста.

Однако значение пикселя font-size устанавливает размер 1em, который будет использоваться для установки полей, отступов и т.д.