Размер шрифта в CSS
На прошлых уроках мы научились правильно подключать шрифты, задавать их цвет и семейство. Казалось бы, что еще нужно для счастья начинающего веб-мастера?
Однако, не одним цветом все решается. Как вы думаете, какой технический момент больше всего влияет на удобство восприятия текстового контента сайта?
Думаю, скорее всего вы скажете — «Размер шрифта!», и будете правы. Чем более удобного кегля шрифт вы подобрали, тем приятнее читать текст на вашем сайте. Возражаете? А как вам такой размер текста? Неудобно??
И какой бы экспертный и интересный ни был контент, если у вас слишком мелкие шрифты на сайте, ваши поведенческие факторы упадут, или проще говоря, ваш сайт перестанет пользоваться спросом у простого населения, не имеющего под рукой лупу.
Итак, как вы наверное догадались, в данном CSS уроке мы учимся управлять размером шрифта. Готовы? Тогда начинаем!
Возвращаемся к истокам или сила 16 пикселей
Прежде всего стоит сказать, что вам необязательно управлять размером шрифта во всех элементах веб-страницы, потому как они по умолчанию отображаются в размере 16 пикселей. Данный размер кегля является, на мой взгляд, оптимальным значением.
Заголовки по умолчанию выводятся уже большим размером. Однако, часто для более эффективного управления вниманием пользователя необходимо изменять размеры шрифтов тех или иных элементов веб-страницы. Этим мы и займемся в данном уроке, а также более детально познакомимся с разными измерениями размера шрифта.
Свойство, отвечающее за размер шрифта
Размер текста мы изменяем при помощи простого свойства font-size. Например, для отображения всех шрифтов в размере 16 пикселей мы создаем следующее правило CSS:
body {font-size: 16px;}Обратите внимание, что после свойства мы указываем размер шрифта в числовом варианте и сразу же после него, без пробела прописываем систему измерения, в частности, пиксели. Однако, правило выше зачастую будет бесполезным, так как уже отмечалось, весь текст веб-страницы по умолчанию выводится в размере 16 пикселей.Пиксели
Под абсолютным я имею в виду такие значения, которые не изменяются в зависимости от контекста. Например, давайте зададим тегу body размер шрифта в 18 пикселей.
body {font-size: 18px;}Размер текста на нашей веб-странице теперь увеличился на 2 пикселя (18-16). Следующим шагом я предлагаю задать параграфам размер шрифта в 14 px.Теперь, все параграфы на нашей веб-странице отображаются размером в 14 пикселей, и не важно какие значения имеют другие элементы веб-страницы. То есть, в этом случае элемент p имеет абсолютное значение.p {font-size: 14px;}
Если вернуться к терминологии, то можно сказать что пиксели — это определенные точки на экране, с помощью которых передается зрительная информация. Когда мы говорим — «Размер шрифта равен 16 пикселям» — мы имеем в виду что на отрисовку шрифта уходит 16 точек (пикселей).
Однако, вы можете спросить, как тогда быть с Retina дисплеями, ведь они имеют более 200 пикселей на дюйм, в то время как обычные мониторы в два раза меньше. Я же отвечу, что вам не о чем беспокоиться, ведь браузеры для Retina мониторов увеличивают шрифт в 2 раза.
Например, если мы через таблицу стилей задаем размер текста в 20 пикселей, браузер увеличит данное значение до 40 пикселей, в случае с Retina дисплеями. Хочу отметить, что задание размеров текста в пикселях является наиболее распространенным и универсальным методом. Я также предпочитаю данный метод всем остальным.
Но, как бы там ни было, будет не лишним познакомить вам с заданием кегля шрифта при помощи ключевых слов, процентов и единиц измерения. Эти значения также имеют свои плюсы.
Ключевые слова
Помимо вышеназванного метода, у нас есть возможность управлять размером шрифта при помощи следующих ключевых слов — medium (16px), small (13px), x-small (10px), large (18px), x-large (24px). За базовое значение берется medium.
Хочу подчеркнуть, что базовые значения всех единиц измерения равняются 16 пикселям, хотя обозначаются по-разному. Если вы хотите задать тексту больший размер, можно указать значение large (18px) или x-large (24px). Если хотите меньше, указываете small (13px) или x-small (10px). Вот как это выглядит на практике:
p {font-size: large;}
ol {font-size: small;}Всем абзацам мы придали размер текста в 18px, а всем нумерованным спискам — 13px. Вам никто не запрещает использовать ключевые слова при оформлении сайта, однако, в таком случае у вас нет большой гибкости.Процентные значения
Процентные значения я отношу к относительным системам задания размера шрифта, и сейчас вы поймете почему. Дело в том что у нас базовый кегль шрифта равен 16px, которое по-другому можно обозначить как 100%. В случае если нам необходимо увеличить размер всего текста веб-страницы на 10%, мы создаем следующее CSS правило:
body {font-size: 110%;}
p {font-size: 70%;}В общем, все просто и думаю у вас не возникло никаких трудностей с пониманием работы данного метода. Однако, есть одна особенность, которую я бы хотел осветить, и которую очень часто люди упускают из виду. Дело в том что за базовое значение берется не всегда 16px, а берется размер текста родительского элемента. Например, давайте зададим всем нумерованным спискам размер текста в 80%, а затем создадим один список вложенный в другой.Теперь, наш нумерованный список первого уровня будет на 20 процентов меньше 16 пикселей, а это примерно 13 пикселей. А вложенный в него список, будет меньше на 20 процентов не 16 пикселей, а будет меньше размера родительского элемента, то есть 13 пикселей. Значит, текст списка второго уровня будет примерно 10 пикселей.ol {font-size: 80%;}
Размер шрифта вложенного списка относительно родителяЭтот момент часто не учитывают начинающие веб-мастера и получают на выходе не совсем то, что ожидали. Вот такая вот история.
Единица измерения em
Данный метод очень похож на предыдущий, с той лишь разницей что вместо 100% у нас выступает значение в 1em. Для увеличения всего текста на 20 процентов мы создаем следующее CSS правило:
body {font-size: 1.2em;}Как и в предыдущем примере, у нас 1em равен 16 пикселям, и можно сказать что он также равен 100%. Для уменьшения размера текста всех нумерованных списков на 15 процентов мы создаем следующее CSS правило:
ol {font-size: .85em;}Думаю, в данной системе обозначений нет ничего сложного и вам все понятно. Не удивлюсь, если вы в мыслях сравниваете меня с пестрым попугаем, который повторяет одно и то же. Однако, прошу не быть столь строгим к вашему товарищу, ведь я лишь пытаюсь наиболее понятно объяснить все детали, чтобы у вас не возникло никаких сложностей при верстке сайта.
ol ol {font-size: 100%;}При помощи записи выше, мы задали вложенному списку 100 процентное, то есть такое же значение размера шрифта как и у родителя. Однако, такой метод решения проблемы не является панацеей, ведь у нас могут быть элементы большей вложенности, и я говорю не только о теге .Тем не менее спешу вас обрадовать что в CSS 3 появился новый метод задания размера шрифта, который обозначается как rem (root em). Данное значение будет брать за базовый размер величину корневого элемента, то есть тега html, которое равняется 16 пикселям. Таким образом, мы можем создать следующее CSS правило:
ol {font-size: .85rem;}В этом случае, вложенный список второго уровня будет на 15 процентов меньше корневого значения (16px). Единственным недостатком в использовании единицы обозначения rem является то, что его не понимает браузер Internet Explorer 8 и более ранних версий, а во всем остальном он просто идеален.Ну что ж, в заключение хочу сказать о моем предпочтении использовать обозначение размера шрифта в пикселях, ведь оно является абсолютной величиной, и дает большую гибкость.
При необходимости использовать относительные величины, можно присмотреться к процентам и em. Ну а если вам безразличны браузеры IE 8 и более ранние версии, лучше тогда использовать значение rem. А на этом у меня все.
Надеюсь, данный урок по CSS был для вас полезен. Если это так, сделайте репост данной статьи в социальных сетях, чтобы больше людей получили от нее пользу.
На этом я с вами не прощаюсь. Спасибо за внимание и до встречи в следующих публикациях!
site4business.net
CSS: Стиль и размер шрифта
Стиль шрифта
Свойство font-style позволяет выделить текст курсивным, наклонным начертанием или наоборот придать тексту стандартный вид. Данное свойство имеет всего три значения:
- normal — стандартный текст, имеющий обычное начертание, то есть не курсивное и не наклонное
- italic — курсивное начертание
- oblique — наклонное начертание
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Название документа</title>
<style>
p.exnormal { font-style: normal; }
p.exitalic { font-style: italic; }
p.exoblique { font-style: oblique; }
</style>
</head>
<body>
<p>Абзац со значением normal.</p>
<p>Абзац со значением italic.</p>
<p>Абзац со значением oblique.</p>
</body>
</html>Попробовать »Курсивные шрифты традиционно были стилизованными версиями шрифта, основанными на каллиграфии, в то время как наклонное начертание создавалось простым добавлением небольшого наклона символам. Большинство шрифтов не содержат набор курсивных символов, поэтому браузер зачастую использует алгоритм наклона для символов текста. Это означает, что во многих случаях вы не увидите разницы между значениями italic и oblique.
Размер шрифта
Изменение размера шрифта в элементе — хороший способ визуально выделить его и придать ему значимости, или наоборот показать, что данная информация не должна привлекать к себе повышенное внимание.
Для изменения размера шрифта используется свойство font-size. Существует несколько способов указать размер шрифта, рассмотрим наиболее распространенные из них:
Пиксели
Значения в пикселях используются часто, поскольку такой подход предоставляет очень точный контроль над размером. Числовое значение заканчивает буквенными символами px, которые должны следовать сразу после числа (между числом и px не должно быть пробела).
body { font-size: 14px; }Проценты
По умолчанию размер шрифта в браузерах равен 16px. Таким образом, значение 100% соответствует 16px, а 200% — 32px. Если вы определите правило, задающее всему тексту внутри элемента <body> значение 75% от размера по умолчанию (это будет соответствовать 12px), а затем определите еще одно правило, которое задает значение 75% для его дочернего элемента, то размер шрифта в этом элементе будет равен 9px (то есть 75% от 12px).
body { font-size: 100%; }EM
Единица измерения em позволяет изменить размер шрифта относительно размера шрифта в родительском элементе. Посколько по умолчанию размер шрифта в браузерах составляет 16px, то можно использовать правила, аналогичные тем, которые используются для значений в процентах.
body { font-size: 14px; }
h3 { font-size: 1.2em; }В примере мы задали элементу <body> размер шрифта 14px, а для всех элементов <h3> — 1.2em. Это означает, что размер шрифта заголовков второго уровня будет масштабирован с коэффициентом 1,2. В нашем случае размер всех заголовков <h3> будет составлять 1,2 размера шрифта элемента <body>, что означает в 1,2 раза больше, чем 14px, и примерно равняется 17px. (На самом деле размер будет равняться 16,8, но большинство браузеров округлит его до 17.)
Примечание: по сути проценты и em, это два разных способа для достижения одной и той же цели. Они оба дают возможность задать размер относительно размера шрифта родительского элемента.
Ключевые слова
CSS предлагает семь ключевых слов, которые позволяют назначить размер шрифта относительно размера по умолчанию (16px): xx-small, x-small, small, medium, large, x-large и xx-large.
p { font-size: small; }Среднее значение medium — размер шрифта по умолчанию в браузерах. Остальные значения уменьшают или увеличивают размер шрифта с различными коэффециентами. Самый маленький размер шрифта xx-small равен примерно 9 пикселям, каждый последующий размер примерно на 20% больше предыдущего:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Название документа</title>
<style>
p.class1 { font-size: 120%; }
p.class2 { font-size: 18px; }
p.class3 { font-size: x-small; }
</style>
</head>
<body>
<p>Изменение размера с помощью процентов.</p>
<p>Изменение размера с помощью пикселей.</p>
<p>Изменение размера с помощью ключевого слова x-small.</p>
</body>
</html>Попробовать »С этой темой смотрят:
puzzleweb.ru
Размер шрифта в CSS
После моей статьи на прошлой неделе, где я кратко рассказываю о задании размеров в CSS в пикселях, я решила рассмотреть различные способы задания размера шрифта в CSS.
Знакомство с единицами измерения
Есть несколько различных способов, которыми вы можете объявить размер шрифта в CSS. Вообще говоря, все единицы измерения попадают в одну из двух категорий — абсолютные и относительные.
Абсолютные единицы фиксированы и (в основном) относятся к какому-то физическому измерению. Когда они объявлены, их размер не может быть изменен путем изменения размера шрифта какого-либо другого элемента.
Относительные единицы не имеют объективного измерения. Вместо этого, их фактический размер определяется размером родительского элемента. Это означает, что их размер может быть изменен путем изменения размеров родительского элемента.
Вот краткое описание некоторых единиц измерения:
| Единица измерения | Тип | Описание |
|---|---|---|
| px | Абсолютная | 1 пиксель |
| pt | Абсолютная | 1 point равен 1/72 дюйма |
| pc | Абсолютная | 1 pica равна 12 points |
| % | Относительная | Определяется относительно размера шрифта родительского элемента |
| em | Относительная | Определяется относительно размера шрифта родительского элемента |
| rem | Относительная | (root em) Определяется относительно размера шрифта элемента html |
| keyword | Относительная | xx-small, x-small, small, medium, large, x-large, xx-large |
| vw | Относительная | 1/100 ширины области просмотра |
| vh | Относительная | 1/100 высоты области просмотра |
| vmin | Относительная | 1/100 меньшего из измерений области просмотра (высоты или ширины) |
| vmax | Относительная | 1/100 большего из измерений области просмотра (высоты или ширины) |
Вы можете посмотреть полный список единиц измерения здесь , но я остановлюсь на наиболее актуальных — px, pt, %, em, rem и vw.
В чем разница?
Разница между этими единицами измерения может быть сложна для понимания, поэтому лучше всего продемонстрировать ее на примерах.
Пример 1 — настройки по умолчанию
В чистом HTML документе, без каких-либо настроек размера шрифта, используются настройки по умолчанию. В большинстве браузеров, размер шрифта по умолчанию у элементов html и body равен 100%. Это эквивалентно следующему:
100% = 1em = 1rem = 16px = 12pt
Это означает, что если вы зададите одному элементу <p> размер шрифта равный 100%, а другому — 16px, они будут выглядеть на экране одинаково. Это показано на рисунке ниже:
Пример 2 — абсолютные и относительные единицы измерения
Разница между абсолютными и относительными единицами измерения может быть продемонстрирована с помощью изменения размера шрифта элемента html. Если мы установим html { font-size: 200% }, это повлияет только на те элементы <p>, для которых размер шрифта задан в относительных единицах.
В этом состоит ключевое преимущество использования относительных единиц измерения. Имея такую простую возможност масштабирования, вы можете создать по-настоящему адаптивный сайт, просто изменяя размер шрифта элемента html. Макс Ластер приводит отличный пример .
Пример 3 — rem vs em (и %)
Размер шрифта в em (и в %) рассчитывается относительно размера шрифта родительского элемента. Например:
html {
font-size: 100% /* =16px */
}
body {
font-size: 2em; /* =32px */
}
p {
font-size: 1em; /* =32px */
/* font-size: 0.5em; =16px */
}
Поскольку размер шрифта элемента p наследуется от body, а body от html, размер шрифта p оказывается в два раза больше, чем мы могли ожидать.
При использовании единицы измерения em, вы должны принимать во внимание размер шрифта всех родительских элементов. Как вы можете видеть, это может довольно быстро стать сложным.
Решением этой проблемы является rem. Единица измерения rem рассчитывается только на основе размера шрифта элемента html, а не родительского элемента. Например:
html {
font-size: 100% /* =16px */
}
body {
font-size: 2rem; /* =32px */
}
p {
font-size: 1rem; /* =16px */
}
Использование rem позволяет вам использовать такие же возможности масштабирования, как с em и %, но без проблем с вложенностью.
Пример 4 — единицы измерения на основе ширины области просмотра
Единица измерения vw, новая единица измерения CSS3 , рассчитывается на основе ширины области просмотра. Это позволяет задавать размер шрифта более отзывчиво.
И хотя кажется, что это отличная единица измерения для адаптивного дизайна, я лично не являюсь ее поклонником. Она не дает мне достаточно контроля для задания размера шрифта, который почти всегда получается либо слишком большим, либо слишком маленьким.
Мой способ
До того, как я провела это исследование, я задавала размер шрифта только в пикселях. В настоящее время большинство браузеров позволяют пользователям увеличить размер шрифта, поэтому проблемы с доступностью нет.
Тем не менее, я нахожу этот метод довольно ограниченным в плане способности к масштабированию. Хотя мои размеры шрифтов выглядят хорошо на средних и малых экранах, их можно оптимизировать для более крупных. Даже если пользователи имеют возможность увеличить размер шрифта, это не то, что они должны делать.
Мой способ заключается в использовании rem (и пикселей в качестве запасного решения).
html {
font-size: 62.5%; /* sets the base font to 10px for easier math */
}
body {
font-size: 16px;
font-size: 1.6rem;
/* sets the default sizing to make sure nothing is actually 10px */
}
h2 {
font-size: 32px;
font-size: 3.2rem;
}
Это позволяет мне масштабировать размер шрифта, просто написав:
@media screen and (min-width: 1280px) {
html {
font-size: 100%;
}
}
Этот метод использует пиксели в качестве запасной единицы измерения, поскольку rem не поддерживается IE8 и ниже. Проблема такого решения заключается в том, что масштабирование с помощью изменения размера шрифта родительского элемента не затрагивает запасной размер. Тем не менее, я не считаю, что это огромная проблема, потому что возможность масштабирования для больших устройств является скорее дополнительной функцией.
Если у вас есть какие-либо идеи о том, как я могу улучшить этот способ, дайте мне знать. Я хочу также написать SCSS миксин для того, чтобы не приходилось каждый раз писать размер шрифта и в пикселях, и в rem.
getinstance.info
Свойство font-size | CSS
Свойство font-size позволяет указывать размер текста CSS. Оно влияет не только на шрифт, к которому применяется, но и используется для вычисления единиц измерения em, rem и ex.
font-size может принимать в качестве значений ключевые слова, единицы измерения или процентное соотношение. Важно отметить, что в рамках применения сокращенного свойства font, font-size является обязательным значением. Если его не указать, то вся строка кода будет игнорироваться.
Значения длины (px, em, rem, ex и т. д.), используемые в свойстве font-size, не могут быть отрицательными.
.element {
font-size: small;
}
}Свойство, которое устанавливает в CSS размер текста, принимает следующие ключевые слова:
- xx-small;
- x-small;
- small;
- medium;
- large;
- x-large;
- xx-large.
Эти обозначения определяют относительные размеры текста CSS, вычисляемые браузером. Но вы также можете использовать два ключевых значения, которые вычисляются относительно размера шрифта, указанного в родительском элементе.
Среди других абсолютных значений можно выделить mm (миллиметры), cm (сантиметры), in (дюймы), pt (пункты) и pc (пики). Один pt равен 1/72 дюйма, или одна пика равна 12 пунктам. Обычно эти единицы используются в печатных документах.
.element {
font-size: larger;
}Например, если свойство font-size у родительского элемента имеет значение small, то у дочернего элемента с относительным значением larger размер текста HTML CSS будет больше.
.element {
font-size: 110%;
}Процентные значения, как font-size со значением 110%, также являются относительными, и зависят от размера шрифта, указанного в родительском элементе. Предлагаем вам взглянуть на демо.
.element {
font-size: 2em;
}Единица измерения em является относительной, и вычисляется в зависимости от CSS размера текста в родительском элементе. Это означает, что дочерние элементы всегда зависят от родительских. Например:
<div> <h3>Заголовок</h3> <p>Какой-нибудь текст</p> </div>
.container {
font-size: 16px;
}
p {
font-size: 1em;
}
h3 {
font-size: 2em;
}В приведенном выше примере у абзаца будет установлено значение font-size 16px, так как 1 x 16 = 16px, а в качестве размера текста HTML CSS заголовка будет использоваться 32px, так как 2 x 16 = 32px. Есть некоторое преимущество в том, чтобы указывать размер, ориентируясь на родительский элемент. Так мы можем оборачивать элементы в контейнеры и быть уверенными в том, что все дочерние элементы всегда будут относительны друг другу:
Посмотреть демо
Что касается единиц измерения rem, то здесь font-size всегда зависит от значения корневого элемента (или элемента html).
html {
font-size: 16px;
}
p {
font-size: 1.5rem;
}В приведенном выше примере rem равен 16px (так как это значение наследуется у html-элемента) и, следовательно, размер текста CSS для всех элементов paragraph будет составлять 24px (1.5 x 16 = 24). В отличие от em-единиц параграф будет игнорировать стилизацию всех родительских элементов, кроме корневого.
Эта единица измерения поддерживается следующими браузерами:
| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
| Работает | Работает | Работает | Работает | 10+ | Работает | Работает |
.element {
font-size: 20ex;
}1ex равен высоте строчной буквы x в используемом шрифте. В примере, приведенном ниже, html-элемент установлен на 20px, а все остальные размеры определяются высотой x определенного шрифта.
Посмотреть демо
Поэкспериментируйте с приведенным выше демо, заменяя семейства шрифтов в html-элементе и таким образом изменяя размер текста CSS.
.element-one {
font-size: 100vh;
}
.element-two {
font-size: 100vw;
}
.Viewport-единицы, такие как vw и vh, позволяют устанавливать размер шрифта относительно длины или ширины окна просмотра:
- 1vw = 1% от ширины окна просмотра;
- 1vh = 1% от высоты окна просмотра.
То есть, если мы посмотрим на следующий пример:
.element {
font-size: 100vh;
}
}то увидим, что размер текста CSS всегда должен находиться на отметке в 100% ширины окна просмотра (50vh будет означать 50%, 15vh — 15% и так далее). В приведенном ниже демо попробуйте изменить высоту, и посмотрите, как растягивается шрифт:
Посмотреть демо
vw-единицы отличаются тем, что позволяют указывать высоту символов, руководствуясь шириной окна просмотра. В приведенном ниже демо вам нужно будет изменить ширину окна браузера, чтобы увидеть изменения:
Посмотреть демо
Эти единицы измерения поддерживаются следующими браузерами:
| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
| 31+ | 7+ | 31+ | 27+ | 9+ | 4.4+ | 7.1+ |
В нашем распоряжении имеются еще две единицы измерения, основанные на размере окна просмотра. Первая позволяет вычислять значения vh и vw, и устанавливать свойству font-size минимальное значение, а vmax позволяет определить и установить, наоборот, максимальное значение.
Единица измерения ch чем-то похожа на ex, и позволяет устанавливать размер текста CSS относительно нулевой ширины глифа:
Посмотреть демо
Эта единица измерения поддерживается следующими браузерами:
| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
| 27+ | Работает | 10+ | Работает | 9+ | Работает | Работает |
Данная публикация представляет собой перевод статьи «Font-size» , подготовленной дружной командой проекта Интернет-технологии.ру
www.internet-technologies.ru
Размер шрифта CSS. Единицы измерения px, em, проценты — учебник CSS
Для обозначения размера шрифта в CSS необходимо указать соответствующее свойство и его значение. Размер шрифта определяется свойством font-size, для которого может быть установлен один из нескольких вариантов значений. Можно задать размер шрифта в пикселях, процентах, с помощью ключевых слов и т. д. Все это мы рассмотрим далее в этой подглаве, а сейчас взгляните на примеры задания размера шрифта:
/* в процентах: */
h2 {
font-size: 100%;
}
/* в единицах измерения em: */
h3 {
font-size: 1em;
}
/* в пикселях: */
h4 {
font-size: 18px;
}
/* с помощью ключевого слова: */
p {
font-size: small;
}
Размер шрифта в пикселях
Наиболее простой и понятный способ задать размер шрифта – использовать единицу измерения px. Вы сами указываете высоту шрифта. Допустим, вам необходим шрифт размером 24 пикселя. Для этого запишите стиль CSS:
font-size: 24px;
Размер шрифта в процентах
Вы наверняка уже сталкивались с ситуацией, когда размер шрифта в CSS не задан, вследствие чего браузеру приходится определять размер шрифта «по своему усмотрению». Если точнее, берется предустановленное значение по умолчанию. Именно от него зависят установленные в процентах значения. Например, базовый размер основного текста p, как правило, равняется 16 пикселям. Значение 100% эквивалентно базовому размеру шрифта, который предустановлен в браузере. Поэтому:
p {
font-size: 100%;
}
/* ...то же самое, что и значение в браузере по умолчанию: */
p {
font-size: 16px;
}
Если же в этом случае задать размер шрифта 50%, то он будет равен половине базового размера. Значение 200%, наоборот, увеличит шрифт в два раза.
Важно: процентные значения размера шрифта наследуются. Например, если для родительского тега задан размер шрифта 150%, то все вложенные в него теги также унаследуют это значение.
Единица измерения em
По принципу работы единица измерения em похожа на проценты. Значение 1em эквивалентно 100% и соответствует базовому размеру шрифта по умолчанию. Соответственно, 0.6em = 60%, 3em = 300% и так далее. Пример записи:
font-size: 0.9em; /* перед точкой можно опустить ноль: */ font-size: .9em;
Значения размеров шрифтов, указанные в em, наследуются (как и проценты). Это создает некоторые трудности при работе с CSS. Например, если для родительского элемента div задан размер шрифта 2em, то для вложенного в него такого же элемента div шрифт будет увеличен еще в два раза. Наглядный пример можно увидеть на скриншоте:
Скриншот: наследование значений размеров шрифтовВ качестве альтернативы можно воспользоваться новой единицей измерения, введенной в CSS3 – rem, которая всегда отталкивается от базового размера шрифта. Если в нашем примере изменить значение div с 2em на 2rem, то размер шрифта вложенного элемента div станет таким же, так у родительского. Недостатком единицы измерения rem является то, что она не поддерживается некоторыми браузерами, а именно Internet Explorer версии 8 (и ранее), а также Opera Mini 8.
Ключевые слова
Задать размер текста CSS можно и с помощью специальных ключевых слов, которые также зависят от базового размера шрифта в браузере. Если ориентироваться на стандартный размер шрифта для основного текста (16 пикселей) и не брать во внимание случаи, когда базовый размер был изменен, то таблица ниже показывает соответствие между ключевым словом и размером шрифта в пикселях:
| Ключевое слово | Размер в пикселях |
|---|---|
| xx-small | 9px |
| x-small | 10px |
| small | 13px |
| medium | 16px |
| large | 19px |
| x-large | 24px |
| xx-large | 32px |
Как видим, значение medium соответствует базовому размеру шрифта 16px. Использование ключевых слов ограничивает возможности и лишает гибкости, поэтому профессиональные разработчики не применяют их.
Завершение
В этой подглаве вы узнали, как задать размер шрифта в CSS. Также мы рассмотрели те единицы измерения, которые наиболее часто используются для установки размера шрифта в таблицах стилей. Для этих целей могут сгодиться и другие единицы измерения CSS, такие как дюймыin, сантиметрыcm, миллиметрыmm. Но они не слишком хорошо подходят для определения размера текста на веб-страницах, отображаемых на мониторе.
Читайте далее: как установить жирный шрифт и курсив в CSS.
idg.net.ua
Определение размеров шрифтов в CSS
В этой статье мы рассмотрим различные способы, с помощью которых вы можете установить размер шрифта HTML.
Единицы измерения можно разделить на две категории: абсолютные и относительные.
Абсолютные единицы являются фиксированными и относятся к каким-либо физическим единицам измерения. После того, как они были заданы, размер не меняется.
Относительные единицы не имеют фактического значения. Их размер определяется относительно родительского элемента. Это означает, что размер шрифта можно изменить в HTML путем изменения размеров связанного элемента.
Вот краткий обзор некоторых единиц измерения:
Я подробнее рассмотрю те единицы измерения, которые являются наиболее значимыми — px, pt, %, em, rem и vw.
Разницу между этими единицами измерения трудно понять теоретически, так что лучше продемонстрировать ее на конкретных примерах увеличения размера шрифта HTML.
В HTML-документе, где вы еще не устанавливали никаких размеров шрифтов, существуют настройки по умолчанию. В большинстве браузеров размер шрифта по умолчанию для разделов html и body — 100%. Что соответствует следующему:
100% = 1em = 1rem = 16px = 12pt
Это означает, что, если вы установите размер шрифта для одного блока <р> в 100%, а для другого — 16px, на экране они будут выводиться с одним и тем же размером шрифта:
Разницу между абсолютными и относительными единицами измерения проще понять на примере, когда мы хотим размер шрифта в HTML задать для конкретного элемента. Если мы зададим html { font-size: 200% }, это повлияет только на блоки <р> с размером шрифта, заданным в относительных единицах:
В этом заключается преимущество использования относительных единиц измерения. Таким способом можно создавать адаптивный сайт, просто с помощью изменения размера шрифта элемента html:
Единицы измерения em (и %) работают путем вычисления текущего размера шрифта в зависимости от размера шрифта родительского элемента.
Например:
html {
font-size: 100% /* =16px */
}
body {
font-size: 2em; /* =32px */
}
p {
font-size: 1em; /* =32px */
/* font-size: 0.5em; =16px */
}Поскольку р является дочерним элементом body, который в свою очередь является дочерним html — параграфы, font-size которых задан с помощью em и процентов, будут иметь два разных размера шрифта HTML:
При использовании Em вы должны принимать во внимание размер шрифта всех родительских элементов. В противном случае это может привести к полной неразберихе.
Решением данной проблемы является rem. Он рассчитывается только на основе размера шрифта элемента html, а не родительского элемента.
Например:
html {
font-size: 100% /* =16px */
}
body {
font-size: 2rem; /* =32px */
}
p {
font-size: 1rem; /* =16px */
}Использование rem позволяет сохранить масштабируемость em без влияния иерархии элементов.
vw — это новая единица измерения CSS3, которая использует для изменения размера шрифта в HTML ширину окна просмотра. Это позволяет задавать размеры шрифтов в плавающих адаптивных макетах.
Это отличная единица измерения для адаптивного дизайна, но я не являюсь ее поклонником. Она не дает мне достаточного контроля над размером шрифта, который всегда оказывается слишком большим или слишком маленьким.
До этого исследования я использовала для установки размеров шрифта пиксели. Потому что в настоящее время большинство браузеров позволяют пользователю увеличить масштаб, если текст кажется ему слишком маленьким.
Тем не менее, я считаю этот метод ограниченным с точки зрения возможностей масштабирования. При его использовании размеры шрифта выглядят нормально на средних и малых экранах, но не на больших диагоналях. Даже если у пользователей и есть возможность увеличивать масштаб, мы ведь не хотим заставлять их делать это каждый раз.
Поэтому мое решение заключается в использовании в html коде размера шрифта rem (и пикселей в качестве запасного варианта):
html {
font-size: 62.5%; /* для простоты вычислений в качестве базового размера шрифта задается 10 пикселей */
}
body {
font-size: 16px;
font-size: 1.6rem;
/* устанавливаем размеры шрифтов по умолчанию, чтобы быть уверенными, что размера в 10 пикселей у нас нигде не будет */
}
h2 {
font-size: 32px;
font-size: 3.2rem;
}Это позволяет мне изменять размеры шрифтов с помощью следующего кода:
@media screen and (min-width: 1280px) {
html {
font-size: 100%;
}
}Этот метод использует пиксели в качестве запасного варианта, поскольку rem не поддерживается в IE8 и ниже. Из-за этого, когда я изменяю размер шрифта HTML для обеспечения масштабируемости, это не затрагивает резервный вариант. Но это не проблема, потому что возможность масштабирования для сверх больших экранов, является необязательной.
Данная публикация представляет собой перевод статьи «CSS Font Sizing» , подготовленной дружной командой проекта Интернет-технологии.ру
www.internet-technologies.ru
em vs. px vs. pt vs. percent / Habr
Одним из наиболее запутанных аспектов CSS является применение font-size атрибута для масштабирования текста. Используя CSS, вы можете изменить размер текста в браузере с помощью четырех разных единиц измерения. Какая из этих четырех единиц лучше всего подходит для веб? Это вопрос, который породил разнообразные дискуссии и критику. Поиск окончательного ответа затруднен, поскольку вопрос сам по себе сложный.Знакомьтесь — единицы
1. «Ems» (em): «em» — это масштабируемая единица, которая используется в веб-документах. «em» равна текущему font-size, например, если font-size в документе 12pt, 1em равен 12pt. «em» масштабируема по своей природе, так 2em будет равен 24pt, 0.5em будет равна 6pt и т.д. Использование «em» становятся все более популярным в веб-документах из-за масштабируемости и возможности с пользой применять в мобильных устройствах.
2. Pixels (px): «px» имеют фиксированный размер единиц, которые используются на экранах (например, для чтения на экране компьютера). Один пиксель равен одной точки на экране компьютера (самый малый элемент разрешения вашего экрана). Многие веб-дизайнеры используют px в веб-документах в целях получения пиксель-идеального(pixel-perfect) представления своего сайта, отображаемого в браузере. Одна из проблем, с использованием px заключается в том, что эти единицы не позволяют изменять масштаб для слабовидящих читателей или мобильных устройств.
3. Points (pt): «pt», традиционно используются в печатных СМИ (все, что должно быть напечатано на бумаге, и т.д.). Один «pt» равен 1 / 72 дюйма. «pt», так же, как и «px», имеют фиксированный размер единицы и не могут масштабироваться.
4. Percents (%): Единицы измерения в % похожи на «em», за исключением нескольких принципиальных различий. Во-первых, текущий font-size равен 100% (т.е. 12pt = 100%). При использовании «%», ваш текст становится полностью масштабируемым для мобильных устройств и удобства пользователя (accessibility).
Итак, в чем же разница?
Легко будет понять разницу между единицами font-size, когда вы увидите их в действии. Как правило, 1em = 12pt = 16px = 100%. При использовании этих размеров шрифта, давайте посмотрим, что происходит, когда вы увеличиваете базовый размер шрифта (с использованием CSS селектора body) от 100% до 120%.
Изменение Font-size от 100% до 120%.
Как вы можете видеть, «em» и «%» увеличили размер шрифта, в то время как «px» и «pt» этого не сделали. Установка абсолютного размера для вашего текста может быть простым делом, но гораздо лучше для ваших посетителей использовать масштабируемый текст, который может быть отображен на любом устройстве или любой машине. По этой причине, единицы «em» и «%» предпочтительнее в использовании для текста веб-документа.
«em» vs «%»
Мы выяснили что единицы «px» и «pt», не лучшим образом подходят для веб-документов, что заставляет нас использовать «em» и «%». В теории, единицы «em» и «%» являются идентичными, но на практике они имеют незначительные различия, которые важно учитывать.
В приведенном выше примере мы использовали в качестве базовой единицы font-size проценты (в тэге body). Если вы измените вашу базовую единицу font-size c «%» на «em» (то есть body {font-size: 1em;}), вы, должны бы не заметить разницы. Давайте посмотрим, что происходит, когда «1em» является нашей базовой единицей, и когда клиент меняет «Размер шрифта» в настройках своего браузера (такая возможность предусмотрена в во многих браузерах, например, Internet Explorer).
Размер шрифта, когда клиент изменяет размер текста в браузере.
Когда в браузере клиента размер текста установлен в «средней», то незаметно никакой разницы между «em» и «%». Однако, если параметр изменять, разница становится очень большой. При установке «Smallest» «em» гораздо меньше, чем «%», а при установке «Largest» наоборот «em» отображается гораздо большим, чем «%». И хотя многие утверждают, что единицы в «em» масштабируются так, как задумано, на практике текст в «em» масштабируется слишком резко, и при этом наименьший текст становится неразборчивым на некоторых машинах.
Вердикт
В теории, единицы «em» — это новый и предстоящий стандарт размера шрифта в Интернете, но на практике, единицы в «%» позволяют отображать текст для пользователей более последовательно и удобно. При смене параметров клиента, текст в «%» изменялся в разумных пропорциях, что позволяет дизайнерам сохранить читабельность, доступность, и дизайн.
Победитель: процент (%).
habr.com