Я пытаюсь найти то, чему соответствует значение, заданное в свойстве CSS font-size
.
Чтобы дать контекст, я хочу получить в CSS размер в em
частей шрифта (выше прописной высоты и под базовой линией), который я знаю по его метрикам OS/2. Единица измерения em
относится к заданному font-size
, а показатели OS/2 - к квадрату em.
Чего я ожидаю
Мои ожидания основаны на следующих ссылках. Я не нашел ничего более ясного или точного.
В соответствии с ссылкой на W3C для
font-size
в CSS2.1 и цитатами из всех вопросов Qaru, которые я нашел по этой теме (здесь, здесь и здесь):Размер шрифта соответствует квадрату em, который используется в типографии. Обратите внимание, что некоторые глифы могут кровоточить за пределами своих квадратов.
Следуя нескольким знаниям, которые я имею в типографии,
em square
- это целый квадрат метрик шрифта, в котором определены восходящие, нисходящие, пробелы (и т.д.) Строки. В метриках OS/2em square
- это размер самого шрифта (часто 1000 или 2048 UPM).
(источник: 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
.
Что на самом деле происходит.
Сгенерированный em square
больше, чем font-size
(протестирован в последних версиях Chrome, Firefox и Safari для Mac). Сначала я подумал, что браузер имеет другое определение em square
и делает часть буквы равной font-size
, но я не нашел никаких метрик OS/2 (с или без восходящего, нисходящего, пробелов...), что соответствует этому.
Вы также можете увидеть этот CodePen. Обратите внимание, что я использую line-height: 1;
, чтобы выделить ожидаемый размер, но моя проблема в font-size
("отрисованные чернила"), а не в line-height
("поле столкновения"). Это то, что я должен уточнить, потому что меня уже несколько раз неправильно понимали. line-height
не проблема.
Итак, у меня есть три вопроса:
- Правильно ли я понял ссылки на W3C, или я предполагаю, что эти ссылки не указаны?
- Если нет, почему сгенерированный шрифт имеет квадрат em больше, чем
font-size
? - Наиболее важные: Как я могу узнать размер визуализированного em-квадрата (относительно
font-size
)?
Спасибо за помощь.