У меня есть сложная функция js с уравнением, в котором мне действительно нужно понимать, сколько места в пикселях занимают размеры шрифта.
Я заметил, что размеры некоторых шрифтов различаются в зависимости от шрифта.
Как рассчитывается размер шрифта? Если в CSS установлено значение 12px, что означает 12px? Это 12px шириной? Высокий? Или это измерение в пикселях по диагонали?
См. спецификацию:
Размер шрифта соответствует квадрату em - концепции, используемой в типографике.
Обратите внимание, что некоторые глифы могут выходить за пределы своих квадратов.
Высота шрифта измеряется или задается высотой строки, которая представляет собой полную высоту, необходимую для отображения гаммы символов, включая те, которые опускаются ниже линии, например j, и выпуклые элементы (например, акценты на заглавных буквах), например Ê .
(источник: banzaimonkey.net)
Шрифты в порядке появления: Times New Roman, Courier New, Calibri, Consolas.
Ширина глифов варьируется в зависимости от шрифта, как вы можете видеть на изображении выше. Также существует важное различие между пропорциональными и fixed-width шрифтами. Для шрифтов фиксированной ширины пространство, которое каждый символ занимает в строке, точно такое же (хотя сами символы могут быть не совсем того же размера, что и друг друга. Для пропорциональных шрифтов пространство, которое использует каждый символ, больше соответствует его форма относительно других символов, поэтому i, j и l могут быть узкими, а w, м и o обычно шире.
Сами шрифты визуализируют глифы по-разному (очевидно, поскольку шрифты выглядят по-разному), и это означает, что конкретный символ не обязательно будет отображать одинаковую высоту во всех шрифтах. Это также означает, что не существует стандартного способа определить высоту определенного символа при любом заданном размере, кроме визуализации шрифта.
Вероятно, для большинства это не очевидно, но если вы изучите условия лицензирования шрифтов, то заметите, что они лицензируются как программное обеспечение шрифтов. По сути, каждый шрифт содержит набор алгоритмов, которые определяют, как шрифт должен отображаться в данном контексте (различные размеры, полужирный, курсив и т. Д.).
Следовательно, лучший способ выяснить, как шрифт будет отображаться в данном контексте, - это отобразить его и посмотреть.
Есть некоторые предостережения относительно размеров шрифта, когда вы имеете дело с вещами в Интернете.
Любой хороший веб-дизайнер знает, что нет равных. При рендеринге страницы используется бесчисленное множество переменных, которые могут привести к различиям между пользователями, например, браузер, шрифты по умолчанию, масштабирование, сглаживание, подсказки, масштабирование браузера, масштабирование операционной системы и т. Д.
В A List Apart (до того, как они прыгнули через акулу) есть несколько хороших статей о стандартизации размеров шрифтов и помощи вам получить некоторый уровень сходства между браузерами:
Хотя вы можете проявить должную осмотрительность, вам просто нужно признать, что веб-среда включает в себя определенный уровень изменчивости, который вы не можете контролировать.
Поскольку пиксели обычно не являются естественным масштабом для шрифтов (для печати используются разные измерения), алгоритмы хинтовки могут отображать шрифты с отклонением на один или два пикселя, особенно при небольших размерах, чтобы сохранить форму символов.
Фактически, алгоритм хинтовки часто полностью отличается при малых размерах, и в профессиональной работе вы, вероятно, будете использовать совершенно другой шрифт для размеров меньше 12pt.
Пиксели также относятся к размеру дисплея, поэтому 12 пикселей будут другим физическим размером на этих дисплеях:
В общем, это сложно. font-size относится к высоте, необходимой для отображения гаммы символов, но в безумном и беспорядочном Интернете всегда есть исключения.
Это дополнительный ответ. Я нашел диаграмму с этого сайта очень полезной для понимания общей картины.
Вы должны использовать .getClientRects(), если вам нужно знать, сколько места занимает / занимает строка текста для отображения на экране.
Фактическое взаимодействие между тем, что вы устанавливаете, и тем, какой размер вы получите, довольно сложно. Спецификация CSS3 формулирует это более четко, чем спецификация CSS2, указанная в других ответах:
Это свойство указывает желаемую высоту глифов шрифта. Для масштабируемых шрифтов размер шрифта - это коэффициент масштабирования, применяемый к модулю EM шрифта.
В принципе, вы можете контролировать размер «em-квадрата». Формы шрифта определены относительно этого, но, безусловно, могут отклоняться за пределы / внутри этого поля (иногда значительно).
И это только для начала! Даже если вы предположите, что шрифт очень похож на этот em-квадрат - вы просто собираетесь умножить длину строки на этот размер? Если он не моноширинный и ваш текст не является только ASCII, вам есть о чем беспокоиться: различная ширина символов, кернинг и лигатуры, поведение упаковки и, конечно же, другие еще более простые предостережения относительно длины строки, такие как табуляции, Unicode, объединяющие символы и управляющие коды .
Согласно спецификации (http://www.w3.org/TR/CSS2/fonts.html)
Размер шрифта соответствует квадрату em - концепции, используемой в типографике. Обратите внимание, что некоторые глифы могут истекать кровью за пределами своих квадратов.
font-size, % и em функционально идентичны, за исключением расположения десятичной дроби. Разница между % и em возникает из-за проблемы реализации в браузерах, которые используют масштабирование шрифтов (в большинстве современных браузеров этого больше не делают), а не масштабирование растра. См. guistuff.com/css/css_units.html.
- person cbednarski; 19.08.2010
