Свойство 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
font-size | htmlbook.ru
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS | |
| 6.0+ | 8.0+ | 1.0+ | 3.5+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ |
Краткая информация
Версии CSS
| CSS 1 | CSS 2 | CSS 2.1 | CSS 3 |
|---|---|---|---|
Описание
Определяет размер шрифта элемента. Размер может быть установлен несколькими способами. Набор констант (xx-small, x-small, small, medium, large, x-large, xx-large) задает размер, который называется абсолютным. По правде говоря, они не совсем абсолютны, поскольку зависят от настроек браузера и операционной системы.
Другой набор констант (larger, smaller) устанавливает относительные размеры шрифта. Поскольку размер унаследован от родительского элемента, эти относительные размеры применяются к родительскому элементу, чтобы определить размер шрифта текущего элемента.
В конечном итоге, размер шрифта сильно зависит от значения свойства font-size у родителя элемента.
Сам размер шрифта определяется как высота от базовой линии до верхней границы кегельной площадки, как показано на рис. 1.
Рис. 1. Размер шрифта
Синтаксис
font-size: абсолютный размер | относительный размер | значение | проценты | inherit
Значения
Для задания абсолютного размера используются следующие значения: xx-small, x-small, small, medium, large, x-large, xx-large. Их соответствие с размером шрифта в HTML приведено в табл. 1.
| CSS | xx-small | x-small | small | medium | large | x-large | xx-large | |
|---|---|---|---|---|---|---|---|---|
| HTML | 1 | 2 | 3 | 4 | 5 | 6 | 7 |
Относительный размер шрифта задается значениями larger и smaller.
Также разрешается использовать любые допустимые единицы CSS: em (высота шрифта элемента), ex (высота символа х), пункты (pt), пикселы (px), проценты (%) и др. За 100% берется размер шрифта родительского элемента. Отрицательные значения не допускаются.
- inherit
- Наследует значение родителя.
Пример
HTML5CSS2.1IECrOpSaFx
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>font-size</title> <style> h2 { font-family: 'Times New Roman', Times, serif; /* Гарнитура текста */ font-size: 250%; /* Размер шрифта в процентах */ } p { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11pt; /* Размер шрифта в пунктах */ } </style> </head> <body> <h2>Duis te feugifacilisi</h2> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p> </body> </html>
Результат данного примера показан на рис. 1.
Рис. 2. Применение свойства font-size
Объектная модель
[window.]document.getElementById(«elementID»).style.fontSize
Браузеры
Internet Explorer до версии 7.0 включительно не поддерживает значение inherit.
htmlbook.ru
Свойство font-size | CSS справочник
CSS свойстваОпределение и применение
CSS свойство font-size задает размер шрифта элемента.
Поддержка браузерами
CSS синтаксис:
font-size:"medium | small | x-small | xx-small | smaller | large | x-large | xx-large | larger | length | initial | inherit";
JavaScript синтаксис:
object.style.fontSize = "150%"
Значения свойства
| Значение | Описание |
|---|---|
| medium | Устанавливает размер шрифта среднего размера. Это значение по умолчанию. |
| small | Устанавливает размер шрифта маленького размера. Эквивалент 13px (пикселов). |
| x-small | Задает размер шрифта очень маленького размера. Эквивалент 10px (пикселов). |
| xx-small | Задает размер шрифта сверх маленького размера. Эквивалент 9px (пикселов). |
| smaller | Устанавливает размер шрифта меньшего размера, чем у родительского элемента. |
| large | Устанавливает размер шрифта большого размера. Эквивалент 18px (пикселов). |
| x-large | Устанавливает размер шрифта очень большого размера. Эквивалент 24px (пикселов). |
| xx-large | Задает размер шрифта сверх большого размера. Эквивалент 32px (пикселов). |
| larger | Устанавливает размер шрифта большего размера, чем у родительского элемента. |
| length | Устанавливает размер шрифта фиксированного размера (в единицах измерения CSS — px, em, cm и др.). |
| % | Задает размер шрифта в процентах от размера шрифта родительского элемента. |
| initial | Устанавливает свойство в значение по умолчанию. |
| inherit | Указывает, что значение наследуется от родительского элемента. |
Версия CSS
CSS1Наследуется
Да.Анимируемое
Да.Пример использования
<!DOCTYPE html>
<html>
<head>
<title>Пример использования свойства font-size.</title>
<style>
.test {
font-size : 180%; /* устанавливаем размер шрифта 180% от размера шрифта родительского элемента */
}
.test2 {
font-size : 1.5em; /* устанавливаем размер шрифта 1.5em. */
}
.test3 {
font-size : 16px; /* устанавливаем размер шрифта 16px. */
}
</style>
</head>
<body>
<p class = "test">Параграф с размером шрифта в процентах от размера шрифта родительского элемента (180%).</p>
<p class = "test2">Параграф с размером шрифта 1.5em.</p>
<p class = "test3">Параграф с размером шрифта 16px.</p>
</body>
</html>
Пример использования свойства CSS font-size (установка размера шрифта).CSS свойстваbasicweb.ru
font-size | CSS | WebReference
Определяет размер шрифта элемента. Размер может быть установлен несколькими способами. Набор констант (xx-small, x-small, small, medium, large, x-large, xx-large) задаёт размер, который называется абсолютным. По правде говоря, они не совсем абсолютны, поскольку зависят от настроек браузера и операционной системы.
Другой набор констант (larger, smaller) устанавливает относительные размеры шрифта. Поскольку размер унаследован от родительского элемента, эти относительные размеры применяются к родительскому элементу, чтобы определить размер шрифта текущего элемента.
В конечном итоге, размер шрифта сильно зависит от значения свойства font-size у родителя элемента.
Сам размер шрифта определяется как высота от базовой линии до верхней границы кегельной площадки, как показано на рис. 1.
Рис. 1. Размер шрифта
Краткая информация
| Значение по умолчанию | medium |
|---|---|
| Наследуется | Да |
| Применяется | Ко всем элементам |
| Анимируется | Да |
Синтаксис ?
font-size: <абсолютный размер> | <относительный размер> | <размер> | <проценты>Обозначения
| Описание | Пример | |
|---|---|---|
| <тип> | Указывает тип значения. | <размер> |
| A && B | Значения должны выводиться в указанном порядке. | <размер> && <цвет> |
| A | B | Указывает, что надо выбрать только одно значение из предложенных (A или B). | normal | small-caps |
| A || B | Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. | width || count |
| [ ] | Группирует значения. | [ crop || cross ] |
| * | Повторять ноль или больше раз. | [,<время>]* |
| + | Повторять один или больше раз. | <число>+ |
| ? | Указанный тип, слово или группа не является обязательным. | inset? |
| {A, B} | Повторять не менее A, но не более B раз. | <радиус>{1,4} |
| # | Повторять один или больше раз через запятую. | <время># |
Значения
Для задания абсолютного размера используются следующие значения: xx-small, x-small, small, medium, large, x-large, xx-large. Их соответствие с размером шрифта в HTML приведено в табл. 1.
| CSS | xx-small | x-small | small | medium | large | x-large | xx-large | Нет |
|---|---|---|---|---|---|---|---|---|
| HTML | 1 | Нет | 2 | 3 | 4 | 5 | 6 | 7 |
Относительный размер шрифта задается значениями larger и smaller.
Также разрешается использовать любые допустимые единицы CSS: em (высота шрифта элемента), ex (высота символа х), пункты (pt), пикселы (px), проценты (%) и др. За 100% берётся размер шрифта родительского элемента. Отрицательные значения не допускаются.
Песочница
Винни-Пух был всегда не прочь немного подкрепиться, в особенности часов в одиннадцать утра, потому что в это время завтрак уже давно окончился, а обед ещё и не думал начинаться. И, конечно, он страшно обрадовался, увидев, что Кролик достаёт чашки и тарелки.
Пример
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>font-size</title>
<style>
h2 {
font-family: 'Times New Roman', Times, serif; /* Гарнитура текста */
font-size: 250%; /* Размер шрифта в процентах */
}
p {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11pt; /* Размер шрифта в пунктах */
}
</style>
</head>
<body>
<h2>Амазонская низменность</h2>
<p>Для гостей открываются погреба Прибалатонских
винодельческих хозяйств, известных отличными сортами
вин "Олазрислинг" и "Сюркебарат".</p>
</body>
</html>Результат данного примера показан на рис. 1.
Рис. 2. Применение свойства font-size
Объектная модель
Объект.style.fontSize
Спецификация ?
Спецификация
Каждая спецификация проходит несколько стадий одобрения.
- Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
- Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
- Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
- Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
- Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
- Draft (Черновик спецификации) — первая черновая версия стандарта.
Браузеры
В таблице браузеров применяются следующие обозначения.
- — свойство полностью поддерживается браузером со всеми допустимыми значениями;
- — свойство браузером не воспринимается и игнорируется;
- — при работе возможно появление различных ошибок, либо свойство поддерживается лишь частично, например, не все допустимые значения действуют или свойство применяется не ко всем элементам, которые указаны в спецификации.
Число указывает версию браузера, начиная с которой свойство поддерживается.
×Автор и редакторы
Автор: Влад Мержевич
Последнее изменение: 29.08.2017
Редакторы: Влад Мержевич
webref.ru
font-size — размер текста | CSS справочник
Поддержка браузерами
| 12.0+ | 5.5+ | 1.0+ | 1.0+ | 7.0+ | 1.0+ |
Описание
CSS свойство font-size позволяет увеличивать или уменьшать размер текста. Установка размера текста, в свою очередь, может изменить размеры других элементов, так как размер текста используется для вычисления значения таких единиц измерения как em и ex.
Примечание: для изменения цвета текста используется CSS свойство color, для изменения стиля — font-style, для выравнивания — text-align, а для добавления тени — text-shadow.
| Значение по умолчанию: | medium |
|---|---|
| Применяется: | ко всем элементам |
| Анимируется: | да |
| Наследуется: | да |
| Версия: | CSS1 |
| Синтаксис JavaScript: | object.style.fontSize=»larger» |
Синтаксис
font-size:medium|xx-small|x-small|small|large|x-large|xx-large|smaller|larger|inherit;
Значения свойства
| Значение | Описание |
|---|---|
| xx-small | Сверх мелкий размер шрифта. |
| x-small | Очень маленький размер шрифта. |
| small | Маленький размер шрифта. |
| medium | Средний размер шрифта. |
| large | Большой размер шрифта. |
| x-large | Очень большой размер шрифта. |
| xx-large | Огромный размер шрифта. |
| smaller | Маленький размер шрифта в сравнении с родительским элементом. |
| larger | Большой размер шрифта в сравнении с родительским элементом. |
| размер | Указания размера с помощью единиц измерения, используемых в CSS. |
| % | Определение размера шрифта в процентом соотношении от родительского элемента. |
| inherit | Указывает, что значение наследуется от родительского элемента. |
Пример
Попробуйте изменить размер текста, кликнув на нужное значение.
div {
font-size: xx-small;
}
puzzleweb.ru
Учебник CSS 3. Статья «Единицы измерения CSS, размер шрифта»
Данная статья учебника посвящена вопросам, связанным с управлением размера шрифта в CSS, в том числе существующие ключевые слова. Рассмотрено применение всех единиц измерения современного стандарта, а именно: дюймы, сантиметры, миллиметры и четверь миллиметра, пики, пункты, пиксели, процентные значения, единица измерения еm, rem, еx, ch и масштабируемые величины относительно экрана — vw, vh, vmin и vmax.
Для визуализации веб-страниц, вы можете управлять размером шрифта по своему усмотрению, к примеру, увеличивая шрифт для той информации, на которой необходимо акцентировать внимание пользователя, либо уменьшая шрифт, если информация, по Вашему мнению, не является приоритетной.
В CSS за установку размера шрифта отвечает CSS свойство font-size, которое имеет поддержку всеми основными браузерами. Свойство font-size записывается следующим образом:
Селектор {
font-size: значение с единицей измерения величины;
{
Обращаю Ваше внимание, что при использовании свойства font-size необходимо всегда указывать положительные единицы измерения величины, при этом, вы не должны указывать пробел между числом и единицей измерения:
p {
font-size: 10px; /* установить размер шрифта 10 пикселей для всех абзацев */
{
В CSS 3 существует разнообразный набор единиц измерения для различных задач, давайте рассмотрим, что нам предлагает современный стандарт.
Абсолютные величины
Физические единицы:
- Дюймы (in), 1in = 2.54cm (сантиметры) = 96px (пиксели).
- Сантиметры (cm), 1cm = 96px/2.54.
- Миллиметры (mm), 1mm = 1/10 от 1cm.
- Четверть миллиметра, (q) 1q = 1/40 от 1cm.
- Пики (pc), 1pc = 1/6 от 1 дюйма, 1pc = 12pt = 1/6 дюйма.
- Пункты (pt), 1pt = 1/72 дюйма.
Как вы можете заметить, к абсолютным величинам относятся дюймы, сантиметры, миллиметры, пики и пункты. Как правило, абсолютные величины используются только в печати (предназначены для использования совместно с устройствами вывода), так как отображение информации будет отличаться в зависимости от монитора, поэтому они имеют очень скудное применение на веб-страницах.
В некоторых случаях, если Вам необходимо составить таблицу стилей, для тех страниц сайта, которые предназначены не только для просмотра, но и для печати, вы можете использовать такую величину как пункты, в других случаях использование этих единиц нежелательно. Пример подготовки веб-страниц к печати мы рассмотрим в учебнике позднее, для этого требуется получить более обширные знания CSS.
Визуальные единицы:
Пиксели (px), 1px = 1/96 от 1in (дюйма).
body {
font-size: 16px; /* установить размер шрифта 16px для всего видимого содержимого */
}
Применение пикселей широко распространено при создании веб-страниц, так как эти единицы измерения обеспечивают совместимые параметры размера шрифта на различных типах мониторов и не зависят от настроек браузера. Пиксель соответствует одному пикселю, который указан в разрешении экрана пользователя. Конечное отображение информации происходит именно в пикселях, которые подгоняет веб-браузер пользователя.
С развитием мобильных устройств, нам стали доступны экраны, которые содержат большое количество пикселей, но при этом сами по себе намного меньше настольных мониторов, в этом случае для обеспечения комфортного чтения с экрана, браузер может применять масштабирование.
К недостаткам использования единицы измерения пиксель относится то, что они не позволяют изменять масштаб для слабовидящих пользователей.
Относительные единицы
Процентные значения.
Давайте рассмотрим из чего формируются процентные значения, применяемые в каскадных таблицах стилей. Если для элемента не задан размер шрифта средствами CSS, то браузер применит к тексту свои значения «по умолчанию». В большинстве случаев текст, находящийся вне заголовков отобразится высотой 16 пикселей (базовый размер шрифта текста).
html {
font-size: 16px;
}
Как вы можете догадаться, процентные значения высчитываются относительно значения свойства родительского элемента. Независимо от основного размера шрифта, он будет эквивалентен 100%.
Давайте рассмотрим пример. Допустим, у всех параграфов (элемент <p>) установлен базовый размер шрифта 16px и мы хотим отобразить в одном параграфе определённую информацию шрифтом в два раза больше, а в другом в два раза меньше. Для этого мы создадим для них отдельные блоки описаний (стили):
<!DOCTYPE html>
<html>
<head>
<title>Пример использования процентных значений</title>
<style>
.halfFontSize {
font-size: 50%;
}
.doubleFontSize {
font-size: 200%;
}
</style>
</head>
<body>
<p>Обычный параграф на странице</p>
<p>Параграф, к которому применен стиль с размером шрифта 50% от родительского элемента.</p>
<p>Параграф, к которому применен стиль с размером шрифта 200% от родительского элемента.</p>
</body>
</html>
Результат нашего примера:
Рис.51 Пример использования процентных значений.В данном примере базовый размер шрифта текста не изменялся, и расчет процентных значений происходил следующим образом для параграфов:
Первый параграф: 16px * 100% = 16px Второй параграф: 16px * 50% = 8px Третий параграф: 16px * 200% = 32px
При работе с процентными значениями обратите Ваше внимание на то, что все вложенные элементы наследуют значения и используют их для вычисления своих размеров шрифтов. Что это значит, разберем в примере:
<!DOCTYPE html>
<html>
<head>
<title>Пример наследования процентных значений</title>
<style>
div {
font-size: 12px; /* устанавливаем базовый размер шрифта для всех блоков <div> */
}
.doubleFontSize { /* устанавливаем размер шрифта в два раза больше чем родительский */
font-size: 200%;
}
.doubleFontSize > div { /* использовали селектор дочерних элементов, который устанавливает, что все вложенные элементы <div> внутри элемента <div> с классом doubleFontSize получат размер шрифта в два раза больше чем родительский */
font-size: 200%;
}
</style>
</head>
<body>
<div>Родительский div 12px
<div>Блок, к которому применен стиль с размером шрифта 200% от родительского элемента.
<div>Блок, который наследует значение</div>
</div>
</div>
</body>
</html>
Результат нашего примера:
Рис.52 Пример наследования процентных значений.В данном примере для вложенного блока <div> с классом doubleFontSize мы установили размер шрифта в два раза больше чем родительский. В этом случае родительским выступает блок <div>, для которого мы установили размер шрифта 12px.
Расчёт размера шрифта для вложенного блока будет выглядеть следующим образом:
12px * 200% = 24px
Если бы мы не изменили значение размера шрифта для блока <div>, то расчёт бы происходил исходя из базового шрифта:
16px(базовый размер шрифта) * 200% = 32px
Кроме того, мы, использовали селектор дочерних элементов, который устанавливает, что все вложенные элементы <div> внутри элемента <div> с классом doubleFontSize получат размер шрифта в два раза больше чем родительский.
Надо понять, что для этих вложенных элементов размер шрифта в 100% теперь равен 24px, а значение в 200% равно 48px, т.к. расчёт происходит исходя из размера шрифта родительского элемента:
размер шрифта родительского элемента * 200% = 48px
Единица измерения еm.
Em является стандартной единицей измерения, используемой в типографской системе, она соответствует размеру заглавной буквы «M» шрифтом Цицеро. Но это, что касается типографской системы, давайте рассмотрим, как она применяется на веб-страницах и чему соответствует.
Если вы внимательно отнеслись к изучению использования и наследования процентных значений, то вы быстро сможете освоить работу с такой единицей измерения как em.
В CSS значение em относится к базовому размеру шрифта текста. Сейчас Вы можете подумать, что алгоритм работы значения em функционируют аналогично с процентными значениями и будете практически правы.
Например:
базовый размер текста = 1em = 100% базовый размер текста * 2 = 2em = 200% базовый размер текста * 0.5 = 0.5em = 50%
Обращаю Ваше внимание, что при работе, как с процентными значениями, так и со значениями em, вложенные элементы наследуют значения и используют их для вычисления своего размера шрифта.
<!DOCTYPE html> <html> <head> <title>Пример использования значений em</title> </head> <body> <p style = "font-size:.8em;">font-size:0.8em</p> <p style = "font-size:80%;">font-size:80%</p> <p style = "font-size:1.5em;">font-size:1.5em</p> <p style = "font-size:150%;">font-size:150%</p> <p style = "font-size:1.8em;">font-size:1.8em</p> <p style = "font-size:180%;">font-size:180%</p> </body> </html>
Результат нашего примера:
Рис.53 Пример использования значений em.Многие создатели сайтов выбирают именно эти единицы измерения при создании своих таблиц стилей.
Единица измерения rеm.
Стандарт CSS 3 подарил нам новую относительную единицу измерения rem, что является сокращением от Root em – значение основано на размере текста корневого (root) элемента.
Основное отличие от em заключается в том, что размер текста задается от базового размера корневого элемента, а не текущего размера шрифта родительского элемента. Чтобы окончательно понять, давайте рассмотрим сравнение на примерах:
<!DOCTYPE html>
<html>
<head>
<title>Пример наследования значений em</title>
<style>
div {
font-size: 1.25em;
}
</style>
</head>
<body>
<div>Блок 1
<div>Блок 2
<div>Блок 3
<div>Блок 4
<div>Блок 5
<div>Блок 6
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
В данном примере, мы вложили блоки последовательно один в другой и установили значение размера шрифта равным 1.25em. В результате сработали правила наследования стилей и для каждого последующего вложенного блока, родительский блок становится базовым, что в дальнейшем сказывается на расчете размера шрифта, исходя из размера шрифта родительского элемента. Как вы понимаете, с каждым вложенным блоком увеличивается размер шрифта.
Если у Вас где-то размер не соответствует Вашим ожиданиям, ищите проблему в наследовании 🙂
Рис.54 Пример наследования значений em.Оставим единицу измерения em и рассмотрим этот же пример с использованием единицы rem.
<!DOCTYPE html>
<html>
<head>
<title>Пример использования значений rem</title>
<style>
div {
font-size: 1.25rem;
}
</style>
</head>
<body>
<div>Блок 1
<div>Блок 2
<div>Блок 3
<div>Блок 4
<div>Блок 5
<div>Блок 6
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
В данном примере, мы вложили блоки последовательно один в другой и установили значение размера шрифта равным 1.25rem. В результате, как Вы можете заметить, размер каждого блока одинаков, это происходит по той причине, что размер текста рассчитывается исходя из размера текста корневого (root) элемента, а не родительского элемента.
В этом и заключается замечательная особенность этой единицы измерения, которая предназначена для тех, кто не готов бросить вызов неожиданно появившихся наследований стилей.
Рис.55 Пример использования значений rem.Обе вышерассмотренные единицы измерения имеют широкое применение среди разработчиков, но при этом имеют как сильные, так и слабые стороны. С опытом вы определите для себя те критерии, когда необходимо использовать ту или иную единицу измерения в зависимости от возникших обстоятельств.
Единица измерения еx.
Единица измерения ex зависит от того шрифта, который вы применяете, так как его размер рассчитывается исходя из высоты прописной буквы «x». Данная единица измерения имеет очень редкое применение, в основном касается типографских микро настроек.
В большинстве шрифтов высота прописной «x» соответствует 0.5em. Если браузер не может определить размер прописной «x», то в этом случае будет установлено значение равное 0.5em.
Единица измерения ch.
Единица измерения ch зависит от того шрифта, который вы применяете, так как его размер рассчитывается исходя из ширины символа ‘0’ (ноль, символ Юникода U+0030). Данная единица измерения имеет очень редкое применение, например, если вы хотите создать блок моноширинным шрифтом (имеет символы одной ширины) с заданным количеством символов, которые он может вместить:
.width50 {
width: 50ch; /* ширина блока равняется 50 символов (необходим моноширинный шрифт) */
}
Если браузер не может определить размер «0», то в этом случае будет установлено значение равное 0.5em.
Масштабируемые величины относительно экрана
С развитием стандарта каскадных таблиц стилей стали доступны такие единицы измерения, которые позволяют задать размеры относительно окна пользователя (области просмотра).
Область просмотра (viewport) это то место, где браузер отображает сайт минус зарезервированное пространство браузера.
В CSS 3 существуют 4 (четыре) различных единицы измерения величины относительно экрана — две для каждой оси и две единицы измерения, определяющие минимальное и максимальное значение:
1vw (viewport width) = 1% от ширины области просмотра. При уменьшении ширины окна пропорционально уменьшается тот параметр элемента, который был задан.
Например, если ширина области просмотра 1000px, то 1vw будет соответствовать 10 (десяти) пикселям.
1vh (viewport height)= 1% от высоты области просмотра. При уменьшении высоты окна пропорционально уменьшается тот параметр элемента, который был задан.
Например, если высота области просмотра 500px, то 1vh будет соответствовать 5 (пяти) пикселям.
Рассмотрим пример:
<!DOCTYPE html>
<html>
<head>
<title>Масштабируемые единицы измерения</title>
<style>
* {
margin: 0 ; /* внешние отступы для всех сторон*/
}
.viewportHeight30 {
font-size: 5vw; /* размер шрифта*/
width: 100vw; /* ширина блока */
height: 30vh; /* высота блока */
background-color: orange; /* цвет заднего фона */
}
.viewportHeight50 {
font-size: 4vw;
width: 75vw;
height: 50vh;
background-color: yellow;
}
.viewportHeight20 {
font-size: 3vw;
width: 50vw;
height: 20vh;
background-color: red;
}
</style>
</head>
<body>
<div class = "viewportHeight30">font-size: 5vw; width:100vw; height:30vh;</div>
<div class = "viewportHeight50">font-size: 4vw; width:75vw; height:50vh;</div>
<div class = "viewportHeight20">font-size: 3vw; width:50vw; height:20vh;</div>
</body>
</html>
В данном примере мы установили для трёх блоков разные значения таких параметров как размер шрифта (для первого – 5vw (5% от ширины области просмотра), для второго — 4vw, для третьего — 3vw), ширину блоков (для первого – 100vw (100% от ширины области просмотра), для второго — 75vw, для третьего — 50vw) и высоту блоков (для первого – 30vh (30% от высоты области просмотра), для второго — 50vh, для третьего — 20vh).
Попробуйте изменить размер окна Вашего браузера, как видите, пропорции будут соблюдены для всех заданных нами параметров, что не может не радовать.
Чтобы избавится от полосы прокрутки, мы установили универсальный селектор *, который выбирает все элементы и убирает внешние отступы у всех элементов. Это мы сделали по той причине, что некоторые браузеры при работе с данными единицами измерения при 100vw добавляют полосу прокрутки, чего быть не должно (этот баг возникает при overflow : auto – свойство, которое отвечает за переполнение элемента содержимым, установленное по умолчанию).
Полную информацию о работе с внешними отступами вы получите в статье учебника «Блочная и строчная модель в CSS», а работу с переполнением элементов мы рассмотрим в статье «Размеры блочных элементов в CSS».
Результат нашего примера:
Рис.57 Масштабируемые единицы измерения.Минимальное и максимальное значение области просмотра
Заключительные единицы измерения, которые мы рассмотрим в этой статье это vmin и vmax. Обратите внимание на то, что эти значения могу принимать как значения высоты, так и ширины области просмотра:
1vmin = 1vw или 1vh. Выбирает минимальное значение между высотой и шириной области просмотра.
1vmax = 1vw или 1vh. Выбирает максимальное значение между высотой и шириной области просмотра.
Давайте рассмотрим, в чем заключается разница между vmin и vmax на следующем примере:
.viewportMin { . viewportMax { width: 40vmin; width: 40vmax; height: 40vmin; height: 40vmax; } }
<!DOCTYPE html>
<html>
<head>
<title>Vmin и vmax c масштабируемыми единицами измерения</title>
<style>
* {
margin: 0;
}
div {
display: inline-block; /* элементы <div> блочно-строчные (выстраиваем в линейку) */
color: white; /* цвет шрифта*/
}
.viewportMin {
width: 40vmin; /* ширина блока */
height: 40vmin; /* высота блока */
background-color: black; /* цвет заднего фона */
}
.viewportMax {
width: 40vmax; /* ширина блока */
height: 40vmax; /* высота блока */
background-color: blue; /* цвет заднего фона */
}
</style>
</head>
<body>
<div class = "viewportMin">viewportMin<br>w&h - 40vmin</div>
<div class = "viewportMax">viewportMax<br>w&h - 40vmax</div>
</body>
</html>
В нашем примере мы создали два блока, которые разместили в «линейку» (используя свойство display : inline-block), как и в прошлом примере убрали все внешние отступы свойством margin со значением 0.
Первый блок с классом viewportMin (черный на изображении) имеет значения для высоты и ширины 40vmin. Это означает, что выбирается минимальное значение между высотой и шириной окна просмотра и устанавливается 40%. В нашем случае разрешение окна браузера было 400 пикселей ширина и 700 пикселей высота. В этом случае 400 пикселей минимальное значение и браузер выбирает его. Ширина высчитывается как:
400px (текущее минимальное значение viewport области просмотра) * 40% = 160pxДля высоты расчёт аналогичен:
400px (текущее минимальное значение viewport) * 40% = 160px.
В итоге мы получили «квадрат Малевича».
Что касается второго блока с классом viewportMax, то всё происходит с точностью да наоборот. Браузер определяет текущее максимальное значение viewport (область просмотра), оно у нас равно 700px на изображении и высчитывает ширину и высоту элемента:
Ширина - 700px(текущее максимальное значение viewport) * 40% = 280px. Высота - 700px (текущее максимальное значение viewport) * 40% = 280px.
Обращаю Ваше внимание, что при изменении области видимости (размеров окна) браузер пересчитывает значения «на лету», что очень удобно и пригодится в будущем при адаптивном дизайне.
Рис.58 Пример использования vmin и vmax c масштабируемыми единицами измерения.Масштабируемые единицы измерения, надеюсь, имеют счастливое будущее, но в настоящее время не так активно используются по тем основным причинам, что:
- Отсутствует полная поддержка данных единиц измерения некоторыми мобильными браузерами (например, Opera Mini и UC Browser for Android – полностью не поддерживают, IE Mobile – не поддерживает vmax, iOS Safari – стабильная поддержка только с 8 версии (6 версия — не поддерживала vmax, 7 версия – некорректно работала единица измерения vh).
- Internet Explorer и Edge не имеют полную поддержку данных единиц измерения:
- IE работает только с версии 9.0 (поддерживает значение vm, вместо vmin).
- IE 10, IE 11 не поддерживают значение vmax.
- Edge 12, 13, 14 не поддерживают значение vmax.
Завершая данную большую тему, думаю стоит рассмотреть еще один способ как можно задать размер шрифта в CSS, а именно использование ключевых слов совместно со свойством font-size.
Например:
i {
font-size: small; /* устанавливает размер шрифта маленького размера для всех элементов <i> */
}
Полный перечень возможных ключевых слов с расшифровкой размещен в следующей таблице:
| Значение | Описание |
|---|---|
| medium | Устанавливает размер шрифта среднего размера. Это значение по умолчанию. |
| small | Устанавливает размер шрифта маленького размера. Эквивалент 13px (пикселов). |
| x-small | Задает размер шрифта очень маленького размера. Эквивалент 10px (пикселов). |
| xx-small | Задает размер шрифта сверх маленького размера. Эквивалент 9px (пикселов). |
| smaller | Устанавливает размер шрифта меньшего размера, чем у родительского элемента. |
| large | Устанавливает размер шрифта большого размера. Эквивалент 18px (пикселов). |
| x-large | Устанавливает размер шрифта очень большого размера. Эквивалент 24px (пикселов). |
| xx-large | Задает размер шрифта сверх большого размера. Эквивалент 32px (пикселов). |
| larger | Устанавливает размер шрифта большего размера, чем у родительского элемента. |
Рассмотрим пример использования ключевых слов на странице:
<!DOCTYPE html>
<html>
<head>
<title>Ключевые слова для управления размером шрифта</title>
<style>
.medium {font-size: medium;}
.small {font-size: small;}
.x-small {font-size: x-small;}
.xx-small {font-size: xx-small;}
.smaller {font-size: smaller;}
.large {font-size: large;}
.x-large {font-size: x-large;}
.xx-large {font-size: xx-large;}
.larger {font-size: larger;}
</style>
</head>
<body>
<div class = "medium">Блок с ключевым словом medium</div>
<div class = "small">Блок с ключевым словом small</div>
<div class = "x-small">Блок с ключевым словом x-small</div>
<div class = "xx-small">Блок с ключевым словом xx-small
<div class = "smaller">Блок с ключевым словом smaller</div>
</div>
<div class = "large">Блок с ключевым словом large</div>
<div class = "x-large">Блок с ключевым словом x-large</div>
<div class = "xx-large">Блок с ключевым словом xx-large
<div class = "larger">Блок с ключевым словом larger</div>
</div>
</body>
</html>
В нашем случае ключевое слово smaller (одноименный класс) устанавливает шрифт на один пиксель меньше, чем у родительского элемента с классом xx-small, а ключевое слово larger устанавливает шрифт на 6 пикселей больше, чем у родительского элемента (xx-large).
Результат нашего примера:
Рис.59 Использование ключевых слов для управления размером шрифта.Вопросы и задачи по теме
Перед тем как перейти к изучению следующей темы пройдите следующие практические задания:
- Практическое задание № 13
У нас имеются следующие стили, в которых элемент <body> и элементы <div>, имеют размер шрифта 150%:body, div { /* создаем групповой селектор */ font-size: 150%; /* устанавливает размер шрифта 150% */ }Сделаем следующую разметку:<body>Текст внутри тела документа <div>Текст внутри блока <div>Текст внутри вложенного блока</div> </div> </body>
Ответьте на следующие вопросы к практическому заданию:
- Сколько в пикселях составляет размер шрифта текста, вложенного внутри тела документа — <body>.
- Сколько в пикселях составляет размер шрифта текста, внутри блока <div>, вложенного в <body>.
- Сколько в пикселях составляет размер шрифта текста, вложенного внутри блока <div>, вложенного в другой блок <div>.
После того как Вы ответили на вопросы, самостоятельно составьте страницу с задачей и проинспектируйте её, чтобы убедиться, что Вы ответили правильно. Размер шрифта для элемента в инспекторе можно увидеть в полном перечне свойств для элемента (фильтр в хром, вычислено в мозила и так далее). - Практическое задание № 14
У нас имеются следующие стили, в которых элемент <body> и элементы <div>, имеют размер шрифта 1.5em:body, div { /* создаем групповой селектор */ font-size: 1.5em; /* устанавливаем размер шрифта 1.5em */ }Сделаем следующую разметку:<body>Текст внутри тела документа <div>Текст внутри блока <div>Текст внутри вложенного блока</div> </div> </body>
Ответьте на следующие вопросы к практическому заданию:
- Сколько в пикселях составляет размер шрифта текста, вложенного внутри тела документа — <body>.
- Сколько в пикселях составляет размер шрифта текста, внутри блока <div>, вложенного в <body>.
- Сколько в пикселях составляет размер шрифта текста, вложенного внутри блока <div>, вложенного в другой блок <div>.
После того как Вы ответили на вопросы, самостоятельно составьте страницу с задачей и проинспектируйте её, чтобы убедиться, что Вы ответили правильно. Размер шрифта для элемента в инспекторе можно увидеть в полном перечне свойств для элемента (фильтр в хром, вычислено в мозила и так далее). - Практическое задание № 15
У нас имеются следующие стили, в которых элемент <body> и элементы <div>, имеют размер шрифта 1.5rem:body, div { /* создаем групповой селектор */ font-size: 1.5rem; /* устанавливаем размер шрифта 1.5rem */ }Сделаем следующую разметку:<body>Текст внутри тела документа <div>Текст внутри блока <div>Текст внутри вложенного блока</div> </div> </body>
Ответьте на следующие вопросы к практическому заданию:
- Сколько в пикселях составляет размер шрифта текста, вложенного внутри тела документа — <body>.
- Сколько в пикселях составляет размер шрифта текста, внутри блока <div>, вложенного в <body>.
- Сколько в пикселях составляет размер шрифта текста, вложенного внутри блока <div>, вложенного в другой блок <div>.
После того как Вы ответили на вопросы, самостоятельно составьте страницу с задачей и проинспектируйте её, чтобы убедиться, что Вы ответили правильно. Размер шрифта для элемента в инспекторе можно увидеть в полном перечне свойств для элемента (фильтр в хром, вычислено в мозила и так далее).
© 2016-2019 Денис Большаков, замечания и предложения по работе сайта Вы можете направить по адресу [email protected]
basicweb.ru
Устанавливаем размер шрифта с помощью HTML и CSS
Серёжа СыроежкинКопирайтер
Размер шрифта на сайте можно задать как при помощи HTML, так и с помощью CSS. Рассмотрим оба варианта.
Задание размера шрифта с помощью HTML
Размер шрифта на странице можно определить при помощи тега font HTML. В статье Цвет шрифта HTML мы уже рассматривали тег font и его атрибуты. Одним из атрибутов этого тега является size, который и позволяет установить размер шрифта. Применяется он следующим образом:
Конструктор сайтов <font size="7">"Нубекс"</font>Size может принимать значения от 1 до 7 (по умолчанию равен 3, что соответствует 13,5 пунктам для шрифта Times New Roman). Другой вариант задания атрибута – “+1” или “-1”. Это означает, что размер будет изменен относительно базового на 1 пункт больше или меньше, соответственно.
Приведенный способ довольно прост в использовании и незаменим при необходимости изменения размера шрифта небольшого куска текста. В остальных случаях рекомендуется определять стиль текста с помощью CSS.
Устанавливаем размер шрифта при помощи CSS
В CSS для изменения размера шрифта применяется свойство font-size, которое применяется следующим образом:
<html>
<head>
<title>Меняем размер шрифта при помощи CSS</title>
<style>
.nubex {
font-size: 14px;
}
</style>
</head>
<body>
<div>Шрифты HTML-блока div класса nubex получают размер 14px при помощи свойства font size.</div>
</body>
</html>В приведенном примере размер шрифта устанавливается в пикселях. Но существуют и другие способы задания размера:
- large, small, medium — задают абсолютный размер (маленький, средний, большой). Также могут применяться значения экстра-маленький (x-small, xx-small), экстра-большой (x-large, xx-large).
- larger, smaller — задают относительный размер (меньше или больше относительно родительского элемента).
- 100% — задается относительный размер (в процентах относительно родительского). Например:
Это означает, что размер тега h2 будет составлять 180% от базового размера шрифта.h2 { font-size: 180%; } - Другие варианты задания относительного размера:
- 5ex — означает, что размер составит 5 высот буквы x от базового шрифта;
- 14pt — 14 пунктов;
- 22px — 22 пикселя;
- 1vw — 1% от ширины окна браузера;
- 1vh — 1% от высоты окна браузера;
Смотрите также:
nubex.ru