Единицы измерения и их обозначения в web-дизайне
Значение многих атрибутов описания характеристик объектов на Web-страницах выражается в цифрах. Цифры сопровождаются названием единиц измерения. Не всегда обязательно эти названия приводить, поскольку броузер распознает некоторые единицы по умолчанию, но для точного определения значений атрибутов элементов документа нужно знать как сами единицы, так и способы их записи.
Единицы измерения, применяемые в описании многих свойств элементов документов, можно разделить на два типа: абсолютные единицы и относительные единицы. Значения одних и тех же атрибутов могут выражаться как в абсолютных, так и в относительных единицах. Например, для описания высоты шрифта могут использоваться абсолютные единицы – миллиметр (mm) или пика (pc), или же относительные единицы, например пиксели (px), величина которых зависит от разрешающей способности экрана. Или проценты, в которых можно выражать величины, составляющие часть или многократное повторение других величин (например, 75% ширины экрана).
Нужен профессиональный копирайтер? Качественные тексты только на бирже копирайтинга textbroker.ru.
Абсолютные единицы измерения:
- in (дюйм, inch), 1in = 25,4mm;
- mm (миллиметр);
- cm (сантиметр);
- pt (точка, point), 72pt = 1in;
- pc (пика), 1pc=12pt.
Рассмотрим пример применения этих единиц в CSS:
.in, .mm, .pt { font-family: Arial}
.in { font-size: 0.2in }
.mm { font-size: 8mm }
.pt { font-size: 16pt }
<span class="in">Размер шрифта в дюймах</span>
<span class="mm">Размер шрифта в миллиметрах</span>
<span class="pt">Размер шрифта в пунктах</span>
А вот и живой пример:
Размер шрифта в дюймах
Размер шрифта в миллиметрах
Размер шрифта в пунктах
Относительные единицы измерения:
- em (высота шрифта данного элемента);
- ex (высота буквы «Х» в данном шрифте);
- px (пиксель, pixel) – логическая точка экрана;
- % (процент) – эта единица служит для определения значений, зависимых от условий среды, например, ширины окна броузера.
При разработке сайта нам наиболее привычно использовать px, em и %. Кстати, как правильно перевести px в em, можно узнать из статьи на моем блоге.
Название принятой единицы измерения приводится непосредственно за ее цифровым выражением (между цифрами и буквами нет никаких пробелов), например: 6mm, 10px. Следует также обратить внимание, что в цифровой записи десятичных дробей целая часть отделяется от дробной символом «.» (точка), например. 1.5cm (то есть 1,5 см).
Dmoz
Спасибо, полезно) где-то читал, в принципе, но про em – не знал, в чем они выражаются.
ВячеславЦитировать
Не знала im, mm и pc. Еще можно добавить, что вместо 0.666 можно указать .666. То бишь нолик необязателен.
СофьяЦитировать
Про in и pc раньше не знал, но теперь буду знать и по возможности применять.
GuraSKЦитировать
Единица em – это ширина буквы М. Причем здесь высота шрифта? Не вводите читателей в заблуждение.
AlexeyЦитировать
да, вы правы. em вычисляется относительно размера шрифта элемента и буквы M в нем.
Блог для вебмастеровЦитировать
Хм, прошу прощения – оказался неправ. Когда я этим вопросом интересовался, во всех источниках значилась именно ширина буквы М. С вашей подачи погуглил и дополнил/исправил свои познания. Спасибо.
Только теперь в голове каша, потому что я сильно сомневаюсь, что во всех шрифтах ширина буквы М соответствует высоте кегля.
AlexeyЦитировать