Что действительно соответствует размеру шрифта?

Question

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

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

Что я ожидаю

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

1. Согласно W3C reference for font-size in CSS2.1, и как указано во всех Переполнение стека вопросов, которые я нашел по этой теме (here, here и here):

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

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

   

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

   Некоторые значения, такие как ширина метрик, являются выраженные в единицах, которые относятся к абстрактному квадрату, высота которого является предполагаемым расстоянием между строками типа того же типа. Этот квадрат называется квадратом ЭМ. (...) Общие значения: 250 (Intellifont), 1000 (тип 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 в 2 таблицы/OS), капитал высота 71.4px.

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

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

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

---

Поэтому у меня есть три вопроса:

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

Благодарим за помощь.

Answer 1

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

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

Answer 2

Читать статью: Это действительно помогает аль много, чтобы понять размеры шрифта:

http://iamvdo.me/en/blog/css-font-metrics-line-height-and-vertical-align#lets-talk-about-font-size-first