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

https://stackoverflow.com/questions/3495872

29-09-2019
|

Вопрос

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

Я заметил, что размеры некоторых шрифтов разные в зависимости от шрифта.

Как рассчитывается размер шрифта? Если его установлено 12px, в CSS, что делает 12px иметь в виду? В том, что 12px широкий? Высоко? Или это диагональное измерение пикселя?

Решение

Увидеть спецификация:

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

Другие советы

Высота является стандартной мерой

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

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

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

Ширина

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

Шрифты

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

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

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

Проекты вопросов

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

Для сети

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

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

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

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

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

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

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

20 -дюймовый монитор на 1680x1050
22 -дюймовый монитор на 1680x1050
Экран iPhone
Blackberry Screen
и т. д.

TL; DR

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

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

На спецификацию (http://www.w3.org/tr/css2/fonts.html.)

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

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

Вы должны использовать .getClientRects() Если вам нужно знать, сколько места находится на выходе из текста, чтобы отобразить на экране.

Фактическое взаимодействие между тем, что вы установили, и каким размером вы получите, несколько сложное. Спецификация CSS3 выражает его более четко, чем спецификация CSS2, цитируемые в других ответах:

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

По сути, вы можете контролировать размер квадрата «Ем». Формы шрифта определяются по отношению к этому относительно, но, безусловно, может беззаботно / внутри этой коробки (иногда существенно).

И это только для начала! Даже если вы предполагаете, что шрифт, который совпадает очень близко к этому EM-Square - вы просто собираетесь умножить длину строки по этому размеру? Если только это моноспортируется, и ваш текст не является только ASCII-, у вас есть много беспокоиться о: различные ширины характера, Kerning и Ligatures, обертывающие поведения и, конечно, другие даже более простые «длина строки» предостережения, такие как вкладки, объединение символов Unicode. Отказ

Лицензировано под: CC-BY-SA с атрибуция

Не связан с StackOverflow