Какое значение имеет размер шрифта?

Я пытаюсь найти то, чему соответствует значение, заданное в свойстве CSS font-size.

Чтобы дать контекст, я хочу получить в CSS размер в em частей шрифта (выше прописной высоты и под базовой линией), который я знаю по его метрикам OS/2. Единица измерения em относится к заданному font-size, а показатели OS/2 - к квадрату em.

Чего я ожидаю

Мои ожидания основаны на следующих ссылках. Я не нашел ничего более ясного или точного.

  1. В соответствии с ссылкой на W3C для font-size в CSS2.1 и цитатами из всех вопросов Qaru, которые я нашел по этой теме (здесь, здесь и здесь):

    Размер шрифта соответствует квадрату em, который используется в типографии. Обратите внимание, что некоторые глифы могут кровоточить за пределами своих квадратов.

  2. Следуя нескольким знаниям, которые я имею в типографии, em square - это целый квадрат метрик шрифта, в котором определены восходящие, нисходящие, пробелы (и т.д.) Строки. В метриках OS/2 em square - это размер самого шрифта (часто 1000 или 2048 UPM).

    Letter metrics
    (источник: microsoft.com)

    Единственное объяснение, которое я нашел в W3C, - это старая ссылка 1997 года на CSS1, и оно соответствует современному цифровому определению em square, которое я использую:

    Некоторые значения, такие как метрики ширины, выражаются в единицах, относящихся к абстрактному квадрату, высота которого представляет собой предполагаемое расстояние между строками типа с одинаковым размером шрифта. Этот квадрат называется квадратом EM. (...) Общие значения: 250 (Intellifont), 1000 (Type 1) и 2048 (TrueType).

Поэтому, если я правильно понимаю эти ссылки, значение, указанное в font-size, должно использоваться для генерации всего em square шрифта, и мы должны быть в состоянии вычислить размер части шрифта из размера шрифта и метрик.

Например, с...

.my-letter {
    font-family: 'Helvetica Neue';
    font-size: 100px;
    text-transform: uppercase;
}

... у нас должен быть em square из 100px, и потому что Helvetica Neue имеет высоту капитала 714 / 1000 (sCapHeight в таблице OS/2), высоту капитала 71.4px.

Expected Letter

Что на самом деле происходит.

Сгенерированный em square больше, чем font-size (протестирован в последних версиях Chrome, Firefox и Safari для Mac). Сначала я подумал, что браузер имеет другое определение em square и делает часть буквы равной font-size, но я не нашел никаких метрик OS/2 (с или без восходящего, нисходящего, пробелов...), что соответствует этому.

Rendered Letter

Вы также можете увидеть этот CodePen. Обратите внимание, что я использую line-height: 1;, чтобы выделить ожидаемый размер, но моя проблема в font-size ("отрисованные чернила"), а не в line-height ("поле столкновения"). Это то, что я должен уточнить, потому что меня уже несколько раз неправильно понимали. line-height не проблема.


Итак, у меня есть три вопроса:

  • Правильно ли я понял ссылки на W3C, или я предполагаю, что эти ссылки не указаны?
  • Если нет, почему сгенерированный шрифт имеет квадрат em больше, чем font-size?
  • Наиболее важные: Как я могу узнать размер визуализированного em-квадрата (относительно font-size)?

Спасибо за помощь.

Ответ 1

Ваше понимание ссылок W3C верно, но ваше понимание красной коробки не является.

Красная рамка не отображает em-квадрат. Его высота представляет собой сумму восхождения и спуска из метрик.