При установке размера шрифта в CSS, какова реальная высота букв?

Существует аналогичный вопрос здесь, ответ по существу, говорит:

Высота - в частности, от вершины восходящих элементов (например, "h" или "l" (el)) до нижней части спусковых устройств (например, "g" или "y")

Это также был мой опыт. Т.е. в 14px Arial высота буквы K (базовая высота) составляет около 10px.

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

(Другие вопросы здесь и здесь задают примерно одно и то же, но, к сожалению, ни один ответ не дает удовлетворительного объяснения..)

Есть ли какая-либо документация о том, почему размер шрифта, по-видимому, равен размеру "от восходящих к спускающимся"?

Ответ 1

Некоторая предыстория вопроса

Назад, когда буквы были созданы на металле, em указывал размер каждого блока, на который была выгравирована буква, и этот размер был определен капиталом M, потому что он обычно занимает больше всего места.

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

Стандарты

В шрифте OpenType размер em должен быть установлен в 1000 единиц. И в TrueType шрифтах размер em обычно равен 1024 или 2048.

Самый точный способ определения стиля шрифта - использовать EM таким образом, когда вы определяете размер шрифта для использования, размер не относится к высоте пикселя шрифта, а к шрифтам x высота, которая определяется на расстояние между базовой линией и средней линией шрифта.

Для записи 1 PT составляет около 0,35136 мм. И PX - это 1 "точка" на экране, которая определяется точками на квадратный дюйм или разрешением экрана и, таким образом, отличается от экрана к экрану и является наихудшим способом определения размера шрифта.

Преобразование единиц измерения

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

1 point (Truchet)                    |  0.188 mm
1 point (Didot)                      |  0.376 mm or 1/72 of a French royal inch
1 point (ATA)                        |  0.3514598 mm or 0.013837 inch
1 point (TeX)                        |  0.3514598035 mm or 1/72.27 inch
1 point (Postscript)                 |  0.3527777778 mm or 1/72 inch
1 point (l’Imprimerie nationale, IN) |  0.4 mm
1 pica (ATA)                         |  4.2175176 mm = 12 points (ATA)
1 pica (TeX)                         |  4.217517642 mm = 12 points (TeX)
1 pica (Postscript)                  |  4.233333333 mm = 12 points (Postscript)
1 cicero                             |  4.531 mm = 12 points (Didot)

Решения

µm  :  10.0    20.0    21.2    40.0    42.3    80.0    84.7    100.0    250.0    254.0
dpi :  2540    1270    1200    635     600     317     300     254      102      100

Стандарты стоят столько.

Фактический размер одного символа шрифта и другого шрифта всегда зависит от:

Как разработчик разработал шрифты шрифтов при создании шрифта,
и как браузер отображает эти символы. Нет двух браузеров, которые будут точно такими же.
разрешение и ppi экрана, просматривающего шрифт.

Пример

В качестве примера того, насколько распространены разработчики шрифтов манипулировать геометрией. Когда Apple создала шрифт Zapfino script, они оценили его относительно самых больших капиталов шрифта, как и ожидалось, но потом решили что буквы в нижнем регистре выглядели слишком маленькими, поэтому через несколько лет они пересмотрели его, так что любой размер точки был примерно в 4 раза больше, чем другие шрифты.

Если у вас нет головной боли, прочитайте еще...

Там есть хорошая информация о Википедии о современной типографии и происхождении; и другие соответствующие темы.

И некоторые из первых рук

Если вы хотите получить более глубокое понимание, вы можете скачать бесплатный инструмент разработки шрифтов FontForge, который сравним с несвободным FontLab Studio (любой из этих двух является популярным выбором среди разработчиков шрифтов в моем опыте). У обоих также есть активные сообщества, поэтому вы можете найти много поддержки, когда узнаете, как их использовать.

Ответ 2

Ответ на набор верстки отлично, но помните, что css во многих случаях расходится с традиционной типографией.

В css размер шрифта определяет высоту "em-box". Ячейка em - это ограничивающая рамка, которая может содержать все буквы шрифта, включая восходящие и descenders. Неформально вы можете придумать размер шрифта как "j" -высокий, поскольку в нижнем регистре j есть как заставщик, так и descender, и поэтому (в большинстве шрифтов) использует полную высоту em-box.

Это означает, что большинство букв (например, капитала M) будут иметь пространство выше и ниже в em-box. Относительное количество пробелов выше и ниже заглавной буквы будет варьироваться в зависимости от шрифтов, поскольку некоторые шрифты имеют относительно большие или меньшие восходящие и десендерные. Это часть того, что стилистически выделяет шрифты друг для друга.

Вы спрашиваете, почему размер шрифта включает восходящие и десендерные, т.е. почему он соответствует высоте em-box, хотя высота большинства букв будет меньше этого. Ну, так как в большинстве текстов есть буквы с восходящими и десендерными, высота em-box указывает, сколько вертикального пространства требуется для текста (как минимум), что весьма полезно!

Предостережение. Некоторые глифы могут даже выходить за пределы em-box в некоторых шрифтах. Например, буква "Å" часто проходит над em-box. Это стилистический выбор дизайнера шрифта.

Ответ 3

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

http://static.splashnology.com/articles/Choosing-the-Best-Units/font-units-large.png

Ответ 4

Я экспериментировал, чтобы точно определить, какой размер шрифта соответствует метрикам шрифта (как показано на диаграмме в ответе davidcondrey).

При тестировании в Safari, Chrome и Firefox на macOS установка размера шрифта равной 100 пикселей, кажется, устанавливает видимый размер разницы между линией восходящего и нисходящего линий равной 100 пикселей.

К сожалению, применительно к разным форматам шрифтов имеется несколько значений для восходящего и нисходящего символов, поэтому для устранения неоднозначности в случае OpenType мы говорим о " Typo Ascender " и " Typo Descender " из таблицы OS/2.

OpenType CSS диаграмма высоты шрифта

Интерактивная иллюстрация доступна в инспекторе глифов opentype.js https://opentype.js.org/glyph-inspector.html.

При позиционировании символа (опять же в терминах метрик OpenType) браузеры, кажется, рассматривают y = 0 как Ascender (что не совпадает с "линией восходящего" на диаграмме davidcondrey, но вместо этого это ascender в таблице hhea). в OpenType). Однако, если line-height CSS не установлена в normal положение, позиция смещается на некоторое количество, но я думаю, что правила здесь могут быть немного более сложными.

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