Определение истинной высоты букв в CSS Font-Size

При установке размера шрифта в CSS важно понимать, что представляет собой его истинная высота. Вопреки тому, что вы думаете, размер шрифта не соответствует напрямую высоте букв в пикселях. Вместо этого оно относится к понятию, называемому «em».

Историческое происхождение «Em»

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

Стандарты и преобразование единиц измерения

В современной технологии шрифтов «em» остается воображаемой границей в программном обеспечении. Обычно оно составляет 1000 единиц для шрифтов OpenType и 1024 или 2048 единиц для шрифтов TrueType. Чтобы точно определить размер шрифта, используйте единицу измерения «em», поскольку она представляет собой расстояние между базовой линией и средней линией шрифта, а не высоту в пикселях.

Преобразование между различными типографскими единицами и разрешениями экрана может быть сложным. Однако важно отметить, что 1 точка (Трюше) равна примерно 0,35 мм, а 1 пиксель (PX) — это одна «точка» на экране, размер которой зависит от разрешения экрана.

Несоответствия в фактических данных Размер

Несмотря на существование стандартов, реальная высота глифов в том или ином шрифте может существенно различаться в зависимости от:

• Как разработчик шрифта спроектировал глифы
• Отрисовка символов в браузере
• Разрешение и плотность пикселей экрана

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

Практическое значение

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