Меню

Единица для измерения размера шрифта это



Единица для измерения размера шрифта это

Меню сайта

03. Единицы измерения размеров шрифтов. Типометрические системы

Подробности Категория: Работа со шрифтами Опубликовано 27.09.2011 15:20 Автор: Шитов В.Н. Просмотров: 5026

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

Впервые типографскую систему измерения предложил француз Пьер Фурнье в 1737 году. До этого никакой общепринятой системы измерения шрифтов не было, и каждый издатель определял размеры шрифта «на глазок». Размер шрифта для книги определялся эмпирическим путем. Француз Фирмен Дидо в 1785 году предложил взять за основу французский дюйм, имевший размер примерно 2,706 см. В то время метрическая система во Франции еще не использовалась. Если бы Дидо потерпел еще несколько лет, то он, конечно же, использовал бы метрическую систему, которая появилась во Франции после Великой Французской революции. Если бы не типографская система измерений, то про французский дюйм люди бы давно забыли. В качестве единиц для типографской системы измерения предлагались следующие:

1 пункт Дидо или типографский пункт равен 1/72 французского дюйма или 1/2660 м = 0,375939849624 мм или примерно 0,376 мм;

1 цицеро равен 12 дидо или 4,5112781954887218 мм примерно 4,5 мм;

1 квадрат равен 4 цицеро или 48 дидо или 18,0451127819548872 мм или примерно 18 мм.

Дюйм состоит из 6 цицеро. Термин «цицеро» произошел от имени Цицерона, речи которого печатались именно такого размера. Такой размер считался наиболее оптимальным, так как позволял уверенно различать буквы, то есть читать этот текст и, вместе с тем, разместить на странице документа наибольший объем текста. Впервые речи Цицерона были напечатаны учениками Иоганна Гутенберга Конрадом Свейнгеймом и Арнольдом Паннартцем, впервые применившими в 1467 году для печатания книги шрифт антикву или хотя бы издалека напоминавшего антикву.

Англичане, а за ними и американцы, конвертировали эту типографскую систему измерений под английский дюйм. В 1878 году англичанин Нельсон Хоукс предложил свою типографскую систему измерений на основе английского дюйма. Учитывая, что ПК был разработан именно в США, то неудивительно, что они использовали родную англо-американскую систему измерений шрифтов. Английский дюйм равен примерно 2,54 см. От этого получаются производные:

1 пункт равен 1/72 английского дюйма или примерно0,352778 мм;

1 пика равна 12 пунктам или примерно4,233333 мм;

1 квадрат равен 4 пикам или 48 пунктам или 16,944 мм.

1 пункт англо-американской системы равен 0,9348 дидо. 1 дидо равен 1,0697 пункта. В одном английском дюйме 6 пик. Пики могут использоваться для линейных измерений внутри строки или для измерения ширины полосы набора.

Кроме основных перечисленных единиц измерения существуют дополнительные единицы измерения (Таблица 1):

Таблица 1. Дополнительные единицы измерения шрифтов

Величина в пунктах

Система Дидо, мм

Англо-американская шрифтовая система, мм

Бриллиант или цицеро

Диамант или полупетит

Терция или треть квадрата

Текст или Двойной корпус

Двойная малая пика

Двойное цицеро или квадрата

Размером «Текст» была набрана первая печатная книга — библия Иоганна Гутенберга. Правда, Иоганн Гутенберг об этом размере еще не знал. Единицы измерения размеров шрифтов появились только через столетия после Гутенберга. Многие названия размеров шрифтов взяты из размеров самых знаменитых книг, в том числе и Библии Гутенберга. До появления общепринятых единиц измерения шрифта размеры брались «на глазок». Издатель эмпирическим путем сам определял оптимальный размер шрифта, удобный для чтения. Для каждого шрифта существует свой собственный оптимальный размер для основного текста. Кроме этого, следует учитывать, что шрифт может использоваться как для основного текста, так и для заголовочного. Поэтому у заголовков могут быть также оптимальные размеры. То, что один размер шрифта кажется оптимальным одному человеку, вовсе не означает, что оптимальным он будет для другого человека. У другого человека может быть другие представления об оптимальности размера этого же шрифта.

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

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

В веб-дизайне используются другие способы определения размеров шрифта (Таблица 2). Там по умолчанию используются относительные единицы размеров шрифта (Шитов В. Н., Шитова Е. В., Уланов О. А. Новейший самоучитель работы в Интернете. М.: Дом Славянской книги, 2010).

Таблица 2. Относительные единицы размеров шрифта в HTML

Источник

Единицы измерения: px, em, rem и другие

В этом очерке я постараюсь не только рассказать о различных единицах измерения, но и построить общую картину – что и когда выбирать.

Пиксели: px

Пиксель px – это самая базовая, абсолютная и окончательная единица измерения.

Количество пикселей задаётся в настройках разрешения экрана, один px – это как раз один такой пиксель на экране. Все значения браузер в итоге пересчитает в пиксели.

Пиксели могут быть дробными, например размер можно задать в 16.5px . Это совершенно нормально, браузер сам использует дробные пиксели для внутренних вычислений. К примеру, есть элемент шириной в 100px , его нужно разделить на три части – волей-неволей появляются 33.333. px . При окончательном отображении дробные пиксели, конечно же, округляются и становятся целыми.

Для мобильных устройств, у которых много пикселей на экране, но сам экран маленький, чтобы обеспечить читаемость, браузер автоматически применяет масштабирование.

  • Главное достоинство пикселя – чёткость и понятность
  • Другие единицы измерения – в некотором смысле «мощнее», они являются относительными и позволяют устанавливать соотношения между различными размерами

Существуют также «производные» от пикселя единицы измерения: mm , cm , pt и pc , но они давно отправились на свалку истории.

Вот, если интересно, их значения:

  • 1mm (мм) = 3.8px
  • 1cm (см) = 38px
  • 1pt (типографский пункт) = 4/3 px
  • 1pc (типографская пика) = 16px

Так как браузер пересчитывает эти значения в пиксели, то смысла в их употреблении нет.

В реальной жизни сантиметр – это эталон длины, одна сотая метра. А пиксель может быть разным, в зависимости от экрана.

Но в формулах выше под пикселем понимается «сферический пиксель в вакууме», точка на «стандартизованном экране», характеристики которого описаны в спецификации.

Поэтому ни о каком соответствии cm реальному сантиметру здесь нет и речи. Это полностью синтетическая и производная единица измерения, которая не нужна.

Относительно шрифта: em

1em – текущий размер шрифта.

Можно брать любые пропорции от текущего шрифта: 2em , 0.5em и т.п.

Размеры в em – относительные, они определяются по текущему контексту.

Например, давайте сравним px с em на таком примере:

24 пикселей – и в Африке 24 пикселей, поэтому размер шрифта в

А вот аналогичный пример с em вместо px :

Так как значение в em высчитывается относительно текущего шрифта, то вложенная строка в 1.5 раза больше, чем первая.

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

Что такое «размер шрифта»? Это вовсе не «размер самой большой буквы в нём», как можно было бы подумать.

Размер шрифта – это некоторая «условная единица», которая встроена в шрифт.

Она обычно чуть больше, чем расстояние от верха самой большой буквы до низа самой маленькой. То есть, предполагается, что в эту высоту помещается любая буква или их сочетание. Но при этом «хвосты» букв, таких как р , g могут заходить за это значение, то есть вылезать снизу. Поэтому обычно высоту строки делают чуть больше, чем размер шрифта.

В спецификации указаны также единицы ex и ch, которые означают размер символа «x» и размер символа «0» .

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

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

Проценты %

Проценты % , как и em – относительные единицы.

Когда мы говорим «процент», то возникает вопрос – «Процент от чего?»

Как правило, процент будет от значения свойства родителя с тем же названием, но не всегда.

Это очень важная особенность процентов, про которую, увы, часто забывают.

Отличный источник информации по этой теме – стандарт, Visual formatting model details.

Читайте также:  Частота вынужденных колебаний единица измерения

Вот пример с % , он выглядит в точности так же, как с em :

В примере выше процент берётся от размера шрифта родителя.

А вот примеры-исключения, в которых % берётся не так:

margin-left При установке свойства margin-left в % , процент берётся от ширины родительского блока, а вовсе не от его margin-left . line-height При установке свойства line-height в % , процент берётся от текущего размера шрифта, а вовсе не от line-height родителя. Детали по line-height и размеру шрифта вы также можете найти в статье Свойства font-size и line-height. width/height Для width/height обычно процент от ширины/высоты родителя, но при position:fixed , процент берётся от ширины/высоты окна (а не родителя и не документа). Кроме того, иногда % требует соблюдения дополнительных условий, за примером – обратитесь к главе Особенности свойства height в %.

Единица rem: смесь px и em

Итак, мы рассмотрели:

  • px – абсолютные, чёткие, понятные, не зависящие ни от чего.
  • em – относительно размера шрифта.
  • % – относительно такого же свойства родителя (а может и не родителя, а может и не такого же – см. примеры выше).

Может быть, пора уже остановиться, может этого достаточно?

Э-э, нет! Не все вещи делаются удобно.

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

Вообще-то это можно сделать без JavaScript, в браузере обычно есть горячие клавиши для масштабирования вроде Ctrl + + , но они работают слишком тупо – берут и увеличивают всю страницу, вместе с изображениями и другими элементами, которые масштабировать как раз не надо. А если надо увеличить только шрифт, потому что посетитель хочет комфортнее читать?

Какую единицу использовать для задания шрифтов? Наверно не px , ведь значения в px абсолютны, если менять, то во всех стилевых правилах. Вполне возможна ситуация, когда мы в одном правиле размер поменяли, а другое забыли.

Следующие кандидаты – em и % .

Разницы между ними здесь нет, так как при задании font-size в процентах, эти проценты берутся от font-size родителя, то есть ведут себя так же, как и em .

Вроде бы, использовать можно, однако есть проблема.

Попробуем использовать этот подход для
.

Источник

КОМПЬЮТЕРНЫЕ КУРСЫ «ПОИСК»

УЧЕБНЫЕ МАТЕРИАЛЫ ПО ПРОГРАММИРОВАНИЮ, КРЕКИНГУ, HTML, CSS, ОФИСНЫМ ПРИЛОЖЕНИЯМ

Оформление текст и другие базовые возможности

Размер шрифта в CSS задается с помощью свойства font-size, например:

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

В табл. 1 приведены единицы, которые можно использовать для указания размера шрифта.

Идентификатор Единицы измерения
pt пункты
pc пики
px пикселы
em относительная единица измерения, равная значению свойства font-size заданного шрифта
ex относительная единица измерения, равная высоте строчной буквы «x» заданного шрифта
% проценты

Рассмотрим применение каждого из них более подробно.

Следует избегать использования пунктов и пик для оформления текста, предназначенного для отображения на экране. Эти единицы идеально подходят для задания размера шрифта для печати; измерение в пунктах пришло из полиграфии. Пункт составляет 1/72 часть дюйма, а пика – шестую часть дюйма. После печати текстовые документы, шрифт в которых задан в данных единицах, будут в точности соответствовать намерениям автора – в конечном счете шестая часть дюйма остается шестой частью дюйма как на листе формата А4, так и на ватмане. Однако компьютеры не в состоянии отобразить физические размеры с такой точностью, и они пытаются угадать – причем не слишком успешно – размер пункта или пики, из-за чего под различными платформами один и тот же документ может отображаться по-разному.

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

Многие дизайнеры любят использовать пикселы в качестве единиц измерения для задания размера шрифта, поскольку это позволяет добиться одинакового отображения в различных броузерах и под разными платформами. Однако при этом игнорируются настройки броузера пользователя; более того, при просмотре такой страницы в Internet Explorer пользователь не сможет изменить размер шрифта. Это представляет серьезные ограничения для пользователей со слабым зрением, для которых возможность прочтения зависит от наличия функции увеличения шрифта.

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

Em – относительная единица измерения размеров шрифта. Ее название пришло из области типографии, где оно соответствует размеру заглавной буквы М, которая, как правило, является самым широким символом шрифта. В CSS 1em соответствует размеру шрифта, используемому в системе пользователя по умолчанию, или размеру шрифта родительского элемента, если он отличается от используемого по умолчанию.

Если вы используете em (или другие относительные единицы) для задания размера всех шрифтов, пользователи смогут изменять размер символов текста в соответствии с настройками размера символов, установленными в их броузере. Для примера создадим описание стиля, задающее размер шрифта внутри элемента p равным 1em:

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

Значения в em можно задавать десятичными числами. К примеру, чтобы задать размер шрифта на 10 процентов меньше используемого по умолчанию (или размера шрифта родительского элемента), можно использовать следующее правило:

Чтобы текст стал на 10 процентов крупнее, чем при использовании значения по умолчанию или унаследованного значения, можно использовать следующее правило:

Еx – относительная единица измерения размеров, соответствующая высоте строчной буквы «х» шрифта по умолчанию. Теоретически, если присвоить свойству font-size абзаца значение 1ex, его заглавные буквы будут той же высоты, какую имела бы строчная буква x, если бы размер шрифта не был задан (при этом размер строчных букв рассчитывался бы относительно заглавных).

Как и в случае с em и ex, при задании размеров в процентах размеры будут соотноситься с настройками пользовательского броузера, и пользователь сможет самостоятельно изменять размер шрифта. Значение 100% размера шрифта для элемента p соответствует размеру шрифта, заданному настройками по умолчанию (так же, как и при задании значения 1em). При уменьшении процентного значения размер текста уменьшается:

При увеличении процентного значения размер текста увеличивается:

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

Ключевые слова с абсолютными значениями

В распоряжении веб-разработчика есть семь абсолютных ключевых слов CSS:

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

Измерения с помощью ключевых слов называются абсолютными, поскольку при этом отсутствует наследование от родительского элемента. Тем не менее в отличие от применения абсолютных значений, например в пикселах или пунктах, использование абсолютных ключевых слов позволяет посетителю сайта изменять размер шрифта вручную, а также не переопределяет пользовательские настройки броузера. Основной проблемой при применении абсолютных ключевых слов становится несоответствие отображения текста, оформленного с их помощью, в разных броузерах – текст с размером xx-small может быть отчетливо виден в одном броузере и совершенно нечитаем в другом.

Ключевые слова с относительными значениями

При задании размера шрифта с помощью относительных ключевых слов – larger и smaller – он определяется по отношению к размеру, установленному для родительского элемента, подобно тому, как это происходит при использовании em и %. Таким образом, если размер элемента p задан с помощью абсолютного ключевого слова small, и вы хотите, чтобы выделенный фрагмент текста отображался более крупным шрифтом, можно использовать следующую таблицу стилей:

p <
font-size: small;
>
em <
font-size: larger;
>

Данная разметка будет отображена, поскольку текст между тегами и отображается более крупным шрифтом, чем текст родительского элемента p:

Пример:

В данном примере размер шрифта устанавливается в классе copy. Текст, заключенный в тег

Результат:

CHAPTER II
The Pool of Tears

After Word has been installed on a network server, workstation users can select one of three options.

THE FOLLOWING TABLES DETAIL HOW WORD FILES AND DIRECTORIES ARE DISTRIBUTED IN A NETWORK ENVIRONMENT — ON A SERVER, AT A SINGLE-USER WORKSTATION, AND AT A SHARED-VERSION WORKSTATION.

Источник

Единица для измерения размера шрифта это

Меню сайта

03. Единицы измерения размеров шрифтов. Типометрические системы

Подробности Категория: Работа со шрифтами Опубликовано 27.09.2011 15:20 Автор: Шитов В.Н. Просмотров: 5030

Читайте также:  Приборы для измерения метеорологических элементов

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

Впервые типографскую систему измерения предложил француз Пьер Фурнье в 1737 году. До этого никакой общепринятой системы измерения шрифтов не было, и каждый издатель определял размеры шрифта «на глазок». Размер шрифта для книги определялся эмпирическим путем. Француз Фирмен Дидо в 1785 году предложил взять за основу французский дюйм, имевший размер примерно 2,706 см. В то время метрическая система во Франции еще не использовалась. Если бы Дидо потерпел еще несколько лет, то он, конечно же, использовал бы метрическую систему, которая появилась во Франции после Великой Французской революции. Если бы не типографская система измерений, то про французский дюйм люди бы давно забыли. В качестве единиц для типографской системы измерения предлагались следующие:

1 пункт Дидо или типографский пункт равен 1/72 французского дюйма или 1/2660 м = 0,375939849624 мм или примерно 0,376 мм;

1 цицеро равен 12 дидо или 4,5112781954887218 мм примерно 4,5 мм;

1 квадрат равен 4 цицеро или 48 дидо или 18,0451127819548872 мм или примерно 18 мм.

Дюйм состоит из 6 цицеро. Термин «цицеро» произошел от имени Цицерона, речи которого печатались именно такого размера. Такой размер считался наиболее оптимальным, так как позволял уверенно различать буквы, то есть читать этот текст и, вместе с тем, разместить на странице документа наибольший объем текста. Впервые речи Цицерона были напечатаны учениками Иоганна Гутенберга Конрадом Свейнгеймом и Арнольдом Паннартцем, впервые применившими в 1467 году для печатания книги шрифт антикву или хотя бы издалека напоминавшего антикву.

Англичане, а за ними и американцы, конвертировали эту типографскую систему измерений под английский дюйм. В 1878 году англичанин Нельсон Хоукс предложил свою типографскую систему измерений на основе английского дюйма. Учитывая, что ПК был разработан именно в США, то неудивительно, что они использовали родную англо-американскую систему измерений шрифтов. Английский дюйм равен примерно 2,54 см. От этого получаются производные:

1 пункт равен 1/72 английского дюйма или примерно0,352778 мм;

1 пика равна 12 пунктам или примерно4,233333 мм;

1 квадрат равен 4 пикам или 48 пунктам или 16,944 мм.

1 пункт англо-американской системы равен 0,9348 дидо. 1 дидо равен 1,0697 пункта. В одном английском дюйме 6 пик. Пики могут использоваться для линейных измерений внутри строки или для измерения ширины полосы набора.

Кроме основных перечисленных единиц измерения существуют дополнительные единицы измерения (Таблица 1):

Таблица 1. Дополнительные единицы измерения шрифтов

Величина в пунктах

Система Дидо, мм

Англо-американская шрифтовая система, мм

Бриллиант или цицеро

Диамант или полупетит

Терция или треть квадрата

Текст или Двойной корпус

Двойная малая пика

Двойное цицеро или квадрата

Размером «Текст» была набрана первая печатная книга — библия Иоганна Гутенберга. Правда, Иоганн Гутенберг об этом размере еще не знал. Единицы измерения размеров шрифтов появились только через столетия после Гутенберга. Многие названия размеров шрифтов взяты из размеров самых знаменитых книг, в том числе и Библии Гутенберга. До появления общепринятых единиц измерения шрифта размеры брались «на глазок». Издатель эмпирическим путем сам определял оптимальный размер шрифта, удобный для чтения. Для каждого шрифта существует свой собственный оптимальный размер для основного текста. Кроме этого, следует учитывать, что шрифт может использоваться как для основного текста, так и для заголовочного. Поэтому у заголовков могут быть также оптимальные размеры. То, что один размер шрифта кажется оптимальным одному человеку, вовсе не означает, что оптимальным он будет для другого человека. У другого человека может быть другие представления об оптимальности размера этого же шрифта.

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

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

В веб-дизайне используются другие способы определения размеров шрифта (Таблица 2). Там по умолчанию используются относительные единицы размеров шрифта (Шитов В. Н., Шитова Е. В., Уланов О. А. Новейший самоучитель работы в Интернете. М.: Дом Славянской книги, 2010).

Таблица 2. Относительные единицы размеров шрифта в HTML

Источник

КОМПЬЮТЕРНЫЕ КУРСЫ «ПОИСК»

УЧЕБНЫЕ МАТЕРИАЛЫ ПО ПРОГРАММИРОВАНИЮ, КРЕКИНГУ, HTML, CSS, ОФИСНЫМ ПРИЛОЖЕНИЯМ

Оформление текст и другие базовые возможности

Размер шрифта в CSS задается с помощью свойства font-size, например:

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

В табл. 1 приведены единицы, которые можно использовать для указания размера шрифта.

Идентификатор Единицы измерения
pt пункты
pc пики
px пикселы
em относительная единица измерения, равная значению свойства font-size заданного шрифта
ex относительная единица измерения, равная высоте строчной буквы «x» заданного шрифта
% проценты

Рассмотрим применение каждого из них более подробно.

Следует избегать использования пунктов и пик для оформления текста, предназначенного для отображения на экране. Эти единицы идеально подходят для задания размера шрифта для печати; измерение в пунктах пришло из полиграфии. Пункт составляет 1/72 часть дюйма, а пика – шестую часть дюйма. После печати текстовые документы, шрифт в которых задан в данных единицах, будут в точности соответствовать намерениям автора – в конечном счете шестая часть дюйма остается шестой частью дюйма как на листе формата А4, так и на ватмане. Однако компьютеры не в состоянии отобразить физические размеры с такой точностью, и они пытаются угадать – причем не слишком успешно – размер пункта или пики, из-за чего под различными платформами один и тот же документ может отображаться по-разному.

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

Многие дизайнеры любят использовать пикселы в качестве единиц измерения для задания размера шрифта, поскольку это позволяет добиться одинакового отображения в различных броузерах и под разными платформами. Однако при этом игнорируются настройки броузера пользователя; более того, при просмотре такой страницы в Internet Explorer пользователь не сможет изменить размер шрифта. Это представляет серьезные ограничения для пользователей со слабым зрением, для которых возможность прочтения зависит от наличия функции увеличения шрифта.

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

Em – относительная единица измерения размеров шрифта. Ее название пришло из области типографии, где оно соответствует размеру заглавной буквы М, которая, как правило, является самым широким символом шрифта. В CSS 1em соответствует размеру шрифта, используемому в системе пользователя по умолчанию, или размеру шрифта родительского элемента, если он отличается от используемого по умолчанию.

Если вы используете em (или другие относительные единицы) для задания размера всех шрифтов, пользователи смогут изменять размер символов текста в соответствии с настройками размера символов, установленными в их броузере. Для примера создадим описание стиля, задающее размер шрифта внутри элемента p равным 1em:

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

Значения в em можно задавать десятичными числами. К примеру, чтобы задать размер шрифта на 10 процентов меньше используемого по умолчанию (или размера шрифта родительского элемента), можно использовать следующее правило:

Чтобы текст стал на 10 процентов крупнее, чем при использовании значения по умолчанию или унаследованного значения, можно использовать следующее правило:

Читайте также:  Измерение электропроводности среды сухтп

Еx – относительная единица измерения размеров, соответствующая высоте строчной буквы «х» шрифта по умолчанию. Теоретически, если присвоить свойству font-size абзаца значение 1ex, его заглавные буквы будут той же высоты, какую имела бы строчная буква x, если бы размер шрифта не был задан (при этом размер строчных букв рассчитывался бы относительно заглавных).

Как и в случае с em и ex, при задании размеров в процентах размеры будут соотноситься с настройками пользовательского броузера, и пользователь сможет самостоятельно изменять размер шрифта. Значение 100% размера шрифта для элемента p соответствует размеру шрифта, заданному настройками по умолчанию (так же, как и при задании значения 1em). При уменьшении процентного значения размер текста уменьшается:

При увеличении процентного значения размер текста увеличивается:

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

Ключевые слова с абсолютными значениями

В распоряжении веб-разработчика есть семь абсолютных ключевых слов CSS:

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

Измерения с помощью ключевых слов называются абсолютными, поскольку при этом отсутствует наследование от родительского элемента. Тем не менее в отличие от применения абсолютных значений, например в пикселах или пунктах, использование абсолютных ключевых слов позволяет посетителю сайта изменять размер шрифта вручную, а также не переопределяет пользовательские настройки броузера. Основной проблемой при применении абсолютных ключевых слов становится несоответствие отображения текста, оформленного с их помощью, в разных броузерах – текст с размером xx-small может быть отчетливо виден в одном броузере и совершенно нечитаем в другом.

Ключевые слова с относительными значениями

При задании размера шрифта с помощью относительных ключевых слов – larger и smaller – он определяется по отношению к размеру, установленному для родительского элемента, подобно тому, как это происходит при использовании em и %. Таким образом, если размер элемента p задан с помощью абсолютного ключевого слова small, и вы хотите, чтобы выделенный фрагмент текста отображался более крупным шрифтом, можно использовать следующую таблицу стилей:

p <
font-size: small;
>
em <
font-size: larger;
>

Данная разметка будет отображена, поскольку текст между тегами и отображается более крупным шрифтом, чем текст родительского элемента p:

Пример:

В данном примере размер шрифта устанавливается в классе copy. Текст, заключенный в тег

Результат:

CHAPTER II
The Pool of Tears

After Word has been installed on a network server, workstation users can select one of three options.

THE FOLLOWING TABLES DETAIL HOW WORD FILES AND DIRECTORIES ARE DISTRIBUTED IN A NETWORK ENVIRONMENT — ON A SERVER, AT A SINGLE-USER WORKSTATION, AND AT A SHARED-VERSION WORKSTATION.

Источник

Единицы измерения: px, em, rem и другие

В этом очерке я постараюсь не только рассказать о различных единицах измерения, но и построить общую картину – что и когда выбирать.

Пиксели: px

Пиксель px – это самая базовая, абсолютная и окончательная единица измерения.

Количество пикселей задаётся в настройках разрешения экрана, один px – это как раз один такой пиксель на экране. Все значения браузер в итоге пересчитает в пиксели.

Пиксели могут быть дробными, например размер можно задать в 16.5px . Это совершенно нормально, браузер сам использует дробные пиксели для внутренних вычислений. К примеру, есть элемент шириной в 100px , его нужно разделить на три части – волей-неволей появляются 33.333. px . При окончательном отображении дробные пиксели, конечно же, округляются и становятся целыми.

Для мобильных устройств, у которых много пикселей на экране, но сам экран маленький, чтобы обеспечить читаемость, браузер автоматически применяет масштабирование.

  • Главное достоинство пикселя – чёткость и понятность
  • Другие единицы измерения – в некотором смысле «мощнее», они являются относительными и позволяют устанавливать соотношения между различными размерами

Существуют также «производные» от пикселя единицы измерения: mm , cm , pt и pc , но они давно отправились на свалку истории.

Вот, если интересно, их значения:

  • 1mm (мм) = 3.8px
  • 1cm (см) = 38px
  • 1pt (типографский пункт) = 4/3 px
  • 1pc (типографская пика) = 16px

Так как браузер пересчитывает эти значения в пиксели, то смысла в их употреблении нет.

В реальной жизни сантиметр – это эталон длины, одна сотая метра. А пиксель может быть разным, в зависимости от экрана.

Но в формулах выше под пикселем понимается «сферический пиксель в вакууме», точка на «стандартизованном экране», характеристики которого описаны в спецификации.

Поэтому ни о каком соответствии cm реальному сантиметру здесь нет и речи. Это полностью синтетическая и производная единица измерения, которая не нужна.

Относительно шрифта: em

1em – текущий размер шрифта.

Можно брать любые пропорции от текущего шрифта: 2em , 0.5em и т.п.

Размеры в em – относительные, они определяются по текущему контексту.

Например, давайте сравним px с em на таком примере:

24 пикселей – и в Африке 24 пикселей, поэтому размер шрифта в

А вот аналогичный пример с em вместо px :

Так как значение в em высчитывается относительно текущего шрифта, то вложенная строка в 1.5 раза больше, чем первая.

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

Что такое «размер шрифта»? Это вовсе не «размер самой большой буквы в нём», как можно было бы подумать.

Размер шрифта – это некоторая «условная единица», которая встроена в шрифт.

Она обычно чуть больше, чем расстояние от верха самой большой буквы до низа самой маленькой. То есть, предполагается, что в эту высоту помещается любая буква или их сочетание. Но при этом «хвосты» букв, таких как р , g могут заходить за это значение, то есть вылезать снизу. Поэтому обычно высоту строки делают чуть больше, чем размер шрифта.

В спецификации указаны также единицы ex и ch, которые означают размер символа «x» и размер символа «0» .

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

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

Проценты %

Проценты % , как и em – относительные единицы.

Когда мы говорим «процент», то возникает вопрос – «Процент от чего?»

Как правило, процент будет от значения свойства родителя с тем же названием, но не всегда.

Это очень важная особенность процентов, про которую, увы, часто забывают.

Отличный источник информации по этой теме – стандарт, Visual formatting model details.

Вот пример с % , он выглядит в точности так же, как с em :

В примере выше процент берётся от размера шрифта родителя.

А вот примеры-исключения, в которых % берётся не так:

margin-left При установке свойства margin-left в % , процент берётся от ширины родительского блока, а вовсе не от его margin-left . line-height При установке свойства line-height в % , процент берётся от текущего размера шрифта, а вовсе не от line-height родителя. Детали по line-height и размеру шрифта вы также можете найти в статье Свойства font-size и line-height. width/height Для width/height обычно процент от ширины/высоты родителя, но при position:fixed , процент берётся от ширины/высоты окна (а не родителя и не документа). Кроме того, иногда % требует соблюдения дополнительных условий, за примером – обратитесь к главе Особенности свойства height в %.

Единица rem: смесь px и em

Итак, мы рассмотрели:

  • px – абсолютные, чёткие, понятные, не зависящие ни от чего.
  • em – относительно размера шрифта.
  • % – относительно такого же свойства родителя (а может и не родителя, а может и не такого же – см. примеры выше).

Может быть, пора уже остановиться, может этого достаточно?

Э-э, нет! Не все вещи делаются удобно.

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

Вообще-то это можно сделать без JavaScript, в браузере обычно есть горячие клавиши для масштабирования вроде Ctrl + + , но они работают слишком тупо – берут и увеличивают всю страницу, вместе с изображениями и другими элементами, которые масштабировать как раз не надо. А если надо увеличить только шрифт, потому что посетитель хочет комфортнее читать?

Какую единицу использовать для задания шрифтов? Наверно не px , ведь значения в px абсолютны, если менять, то во всех стилевых правилах. Вполне возможна ситуация, когда мы в одном правиле размер поменяли, а другое забыли.

Следующие кандидаты – em и % .

Разницы между ними здесь нет, так как при задании font-size в процентах, эти проценты берутся от font-size родителя, то есть ведут себя так же, как и em .

Вроде бы, использовать можно, однако есть проблема.

Попробуем использовать этот подход для
.

Источник