Как рассчитывается размер шрифта?

Согласно спецификации ( http://www.w3.org/TR/CSS2/fonts.html )

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

Объяснение размера квадрата em: http://www.emdpi.com/emsquare.html

Высота - стандартная мера

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

_{(источник: banzaimonkey.net )}

Шрифты в порядке появления: Times New Roman, Courier New, Calibri, Consolas.

Ширина

Ширина глифов варьируется в зависимости от шрифта, как вы можете видеть на изображении выше. Также существует важное различие между пропорциональными и шрифтами фиксированной ширины . Для шрифтов фиксированной ширины пространство, которое каждый символ занимает в строке, точно такое же (хотя сами символы могут быть не совсем того же размера, что и друг друга. Для пропорциональных шрифтов пространство, которое использует каждый символ, больше соответствует его форма относительно других символов, поэтому i , j и l меняются узкими, а w , m и или обычно шире.

Шрифты

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

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

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

Проблемы с размером

Есть некоторые предостережения в отношении размеров шрифта, когда вы имеете дело с вещами в Интернете.

Для Интернета

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

A List Apart (ранее они напали на акулу) есть несколько хороших статей о стандартизации размеров шрифтов и помощи вам получить некоторый уровень сходства между браузерами:

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

Хотя вы можете проявить должную осмотрительность, вам просто нужно признать, что веб-среда включает в себя определенный уровень изменчивости, который вы не можете контролировать.

Печать против пикселей

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

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

Пиксели также относятся к размеру дисплея, поэтому 12 пикселей будет другим физическим размером на этих дисплеях:

• 20-дюймовый монитор с разрешением 1680x1050
• 22-дюймовый монитор с разрешением 1680x1050
• Экран iPhone
• Экран Blackberry
• и др.

TL; DR

Итак, в общем, это сложно. font-size относится к высоте, необходимой для отображения гаммы символов, но в безумном и беспорядочном Интернете всегда есть исключения.