font-size — CSS — Дока
Кратко
Скопировано
Используй это свойство, чтобы задать размер текста.
Примеры
Скопировано
Размер шрифта в абзаце будет равен 14 пикселям:
p { font-size: 14px;}
p {
font-size: 14px;
}
Как пишется
Скопировано
Вот какие значения можно задать:
em— относительная единица, которая определяется по родительскому элементу.1em— это стандартный размер текста, который установлен в браузере. Обычно он равен16px. Соответственно,2emбудут равны32px, а0—. 5em 8px. Если задаёшьfontвнутри другого элемента, то- size emбудет рассчитан относительно этого элемента.rem— работает похожим образом, чтоem, но в этом случае размер шрифта зависит не от родительского элемента, а от корневогоhtmlэлемента.
Другими словами, так можно не зависеть от размера родительского элемента.%— значение в процентах, например 80%. Работает похожим образом, что и единицаem. За 100% берётся размер текста в родительском элементе. Значение может быть только положительным.px— можно задать значение в пикселях, когда важно, чтобы шрифт всегда был одного конкретного размера, вне зависимости от браузера и настроек устройства. Это не всегда лучший вариант, потому что, например, пользователи, которые плохо видят и используют крупные шрифты, не смогут увеличить текст в своём браузере.xx,- small x,- small small,medium,large,x,- large xx— абсолютные значения, которые зависят от настроек браузера и операционной системы. Обычно не используют.- large larger,smaller— больший или меньший размер шрифта относительно родительского элемента. Обычно не используют.
Другими словами, так можно не зависеть от размера родительского элемента.
Обычно не используют.Ещё примеры
Скопировано
Значение в em высчитывается относительно текущего шрифта. Поэтому дочерняя строка в 1.5 раза больше, чем родительская.
<div> Размер этого текста в 1.5 раза больше, чем стандартный размер вашего браузера, <span> а этот текст в 1.5 раза больше, чем в родительском контейнере. </span></div>
<div>
Размер этого текста в 1.5 раза больше, чем стандартный размер вашего браузера,
<span>
а этот текст в 1.5 раза больше, чем в родительском контейнере.
</span>
</div>
.parent { font-size: 1.5em;}.child { font-size: 1.5em;}
.parent {
font-size: 1.5em;
}
.child {
font-size: 1.5em;
}
Открыть демо в новой вкладкеem, когда родительский элемент задан в процентах.Очень часто можно встретить ситуацию, когда размер шрифта у html равен 62. Это магическое число появилось не просто так. Всё дело в том, что стандартный размер шрифта в браузере — 16 пикселей. А 62.5% от него равно 10 пикселям. Что крайне удобно для расчётов.
<div> <span> Здесь основной текст такой же, как в стандартных настройках браузера, <span>а эта фраза в 1.6 раз больше, чем основной текст</span>. </span></div>
<div>
<span>
Здесь основной текст такой же, как в стандартных настройках браузера,
<span>а эта фраза в 1.6 раз больше, чем основной текст</span>.
</span>
</div>
Теперь 1 em будет равен 10 px (62.5% от 16), а размер шрифта <span> будет 10 * 1.6 = 16px:
html { font-size: 62.5%;}span { font-size: 1.6em;}
html {
font-size: 62.5%;
}
span {
font-size: 1.6em;
}
Открыть демо в новой вкладкеПример, где размер шрифта не зависит от родительского элемента, потому что мы задали его в rem.
<span> Теперь один контейнер находится <span>внутри другого</span>, но относительный размер текста больше не зависит от родительского элемента.</span>
<span>
Теперь один контейнер находится <span>внутри другого</span>, но относительный
размер текста больше не зависит от родительского элемента.
</span>
Размер 1em равен 16px, как в стандартных настройках браузера:
html { font-size: 100%;}span { font-size: 2rem;}
html {
font-size: 100%;
}
span {
font-size: 2rem;
}
Открыть демо в новой вкладкеИ ещё три примера, как можно задать размер шрифта.
Текст параграфа будет очень большим:
p { font-size: xx-large;}
p {
font-size: xx-large;
}
Заголовок <h2> будет в 2.5 раза больше, чем текст вокруг него:
h2 { font-size: 250%;}
h2 {
font-size: 250%;
}
Размер текста внутри тега <span> будет равен 16px, независимо ни от чего:
span { font-size: 16px;}
span {
font-size: 16px;
}
Подсказки
Скопировано
💡 Если не задать никакое значение font, то браузер использует размер по умолчанию.
Обычно это 16px.
💡 У font не бывает отрицательных значений.
💡 Размер шрифта наследуется.
На практике
Скопировано
Алёна Батицкая советует
Скопировано
🛠 Для использования относительных единиц измерения — em, rem или проценты — нужно чётко понимать, от чего будет отсчитываться 1 единица. На начальном этапе я бы не советовала использовать эти единицы для размера шрифта. Велика вероятность, что вы запутаетесь в вычислениях.
🛠 Если в вёрстке используются строчно-блочные (inline) элементы, то не забывай задавать родителю свойство font со значением 0.
Между строчно-блочными (inline) элементами, как и между словами в тексте, есть небольшие отступы — пробелы.
Устанавливайте размер шрифта в ноль чтобы эти отступы не влияли на положение вложенных элементов и можно было получить более ожидаемый результат от задания внешних отступов.
🛠 Единицы измерения pt не используются в вёрстке веба. Эта единица измерения возникла ещё во времена вёрстки печатной продукции, например, газет.
Сперва она перекочевала в Фотошоп, к дизайнерам. Многие из них также перешли из печатки в веб. По инерции эта единица просочилась и в CSS, но свою логическую составляющую она потеряла. Совершенно не понятно что принимать за пункт в вебе. Гораздо логичнее оперировать пикселями — точками на экране.
CSS/Свойство font-size
Синтаксис
CSS 1
CSS 2‒2.2
CSS 3
font-size: <абсолютный-размер> | <относительный-размер> | <длина> | <проценты> | inherit;
Описание
Свойство font-size устанавливает размер шрифта
| Применяется: | ко всем элементам; |
|---|---|
| Наследование: | отсутствует; |
| Проценты: | относительно унаследованного размера шрифта; |
| Медиа: | визуальные. |
Условия использования
При указании размера в единицах длины и процентах значение свойства должно быть больше нуля.
JavaScript
[объект]
Поддержка браузерами
Chrome
Поддерж.
Firefox
Поддерж.
Opera
Поддерж.
Maxthon
Поддерж.
IExplorer
Поддерж.
Safari
Поддерж.
iOS
Поддерж.
Android
Поддерж.
Спецификация
| CSS | Раздел | |
|---|---|---|
| 1 | 5.2.6 ‘font-size’ | Перевод |
| 2 | 15.2.4 Font size: the ‘font-size’ and ‘font-size-adjust’ properties | |
2. 1 | 15.7 Font size: the ‘font-size’ property | Перевод |
| 2.2 | 15.7 Font size: the ‘font-size’ property | |
| 3 | 3.5 Font size: the font-size property | Перевод |
Значения
<абсолютный-размер>
Указывается ключевое слово, являющееся индексом в таблице размеров шрифтов. В CSS определены следующие ключевые слова абсолютного-размера:
- xx-small
- Устанавливает самый мелкий размер текста. (Эквивалентен HTML размеру шрифта равному «
1» или размеру шрифтаh6.)font-size: xx-small; - x-small
- Устанавливает мелкий размер текста, чуть больший чем «
xx-small».font-size: x-small; - small
- Устанавливает маленький размер текста. (Эквивалентен HTML размеру шрифта равному «
2» или размеру шрифтаh5.)font-size: small; - устанавливает средний размер текста. (Эквивалентен HTML размеру шрифта равному «
3» или размеру шрифтаh5.)font-size: medium; - large
- Устанавливает крупный размер текста. (Эквивалентен HTML размеру шрифта равному «
4» или размеру шрифтаh4.)font-size: large; - x-large
- Устанавливает очень крупный размер текста. (Эквивалентен HTML размеру шрифта равному «
5» или размеру шрифтаh3.)font-size: x-large; - xx-large
- Устанавливает самый крупный размер текста. (Эквивалентен HTML размеру шрифта равному «
6» или размеру шрифтаh2.)font-size: xx-large;
(Эквивалентен HTML размеру шрифта равному «
(Эквивалентен HTML размеру шрифта равному «<относительный-размер>
Указывается ключевое слово, которое интерпретируется относительно таблицы размеров шрифта и размера шрифта родительского элемента. В CSS определены следующие ключевые слова относительного-размера:
- smaller
- Уменьшает размер шрифта элемента относительно размера шрифта родительского элемента.
font-size: smaller; - larger
- Увеличивает размер шрифта элемента относительно размера шрифта родительского элемента.
font-size: larger;
Прочие значения
- <длина>
- Указывает размер шрифта в определённых единицах измерения.
font-size: 28pt; - <проценты>
- Указывает размер шрифта в процентах относительно базового значения. (За базовое значение принимается значение родительского элемента равное 100%.)
font-size: 190%; - inherit
- Указывает, что элемент должен унаследовать параметры родительского элемента.
Начальное значение: «medium».
Пример использования
Листинг кода
<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>Свойство font-size</title>
<style type=»text/css»>
.abs { font-size: x-small; }
.em { font-size: 0.75em; }
.in { font-size: 0.5in; }
.pt { font-size: 18.8pt; }
.pc { font-size: 0.8pc; }
.per { font-size: 59%; }
</style>
</head>
<body>
<h2>Размер шрифта</h2>
<p>Случайные размеры: <span>x-small</span> | <span>0.
75em</span> | <span>25px</span> | <span>0.5in</span> | <span>18.8pt</span> | <span>0.8pc</span> | <span>59%</span>.</p></body>
</html>
Свойство font-size
Размер шрифта CSS Свойство
❮ Пред. Следующий ❯
Свойство font-size определяет размер шрифта текста.
Размер шрифта можно определить следующими способами:
- абсолютный размер
- относительный размер
- длина
- процентов
Абсолютный размер шрифта включает следующие значения:
- хх-маленький
- х-маленький
- маленький
- маленький
- x-большой
- xx-большой
Относительный размер шрифта включает следующие значения:
- меньше
- больше
Длины могут быть относительными (em, ex, px) и абсолютными (in, cm, mm, pt, pc).
Проценты задают абсолютный размер шрифта относительно размера шрифта родительского элемента.
размер шрифта: средний | хх-маленький | х-маленький | маленький | большой | х-большой | х-большой | меньше | больше | длина | начальная | наследовать;
Пример свойства font-size:
<голова>
Название документа
<стиль>
ч2 {
размер шрифта: 24pt;
}
h4 {
размер шрифта: 26px;
}
п {
размер шрифта: 1em;
}
а {
размер шрифта: 100%;
}
охватывать {
размер шрифта: x-маленький;
}
<тело>
Этот диапазон записывается со значением x-small.
Этот абзац написан шрифтом размером 1em.
Эта гиперссылка написана со 100% размером шрифта.
Для этого заголовка мы использовали размер шрифта x-small.
Для этого заголовка мы установили размер шрифта 24pt.
Попробуй сам »
Результат
Значения в процентах относятся к размеру шрифта родительского элемента. Код ниже показывает его использование:
Пример свойства font-size, указанного в процентах:
<голова>
Название документа
<стиль>
h4 {
размер шрифта: 125%;
}
<тело>
Для этого заголовка мы использовали размер шрифта x-small.
Этот диапазон записывается со значением x-small.
Этот абзац написан шрифтом размером 1em.
Единица em считается относительной единицей. Он основан на вычисленном значении размера шрифта родительского элемента. В приведенном ниже коде размер абзаца будет 32 пикселя, потому что 2×16=32, а размер шрифта заголовка будет 48 пикселов, потому что 3×16=48 пикселов. Этот метод очень полезен, потому что мы можем быть уверены, что все дочерние элементы всегда будут относиться друг к другу.
Пример свойства font-size со значением «em»:
<голова>
Название документа
<стиль>
.контейнер {
размер шрифта: 16px;
}
п {
размер шрифта: 2em;
}
h3 {
размер шрифта: 3em;
}
<тело>
<дел>
Вот заголовок
Вот текст.
Попробуй сам »
В случае использования модуля rem размер шрифта зависит от значения HTML-элемента. В приведенном ниже примере единица rem наследуется от HTML-элемента, поэтому она равна 24px. Таким образом, заголовок будет иметь размер шрифта 24 пикселя, потому что 1,5×16 = 24 пикселя.
Пример свойства font-size со значением «rem»:
<голова>
Название документа
<стиль>
HTML {
размер шрифта: 16px;
}
h3 {
размер шрифта: 1. 5rem;
}
<тело>
<дел>
Вот заголовок
Вот текст.
5rem;
}
<тело>
<дел>
длина {
оранжевый цвет;
размер шрифта: 30px;
}
h4 {
цвет: голубой;
размер шрифта: 3ex;
}
ч2 {
цвет: фиолетовый;
размер шрифта: 24pt;
}
а {
цвет синий;
размер шрифта: 120%;
}
<тело>
шрифт-xsmall {
цвет: серый;
размер шрифта: x-маленький;
}
.шрифт-маленький {
цвет: серый;
размер шрифта: маленький;
}
.fontSize-средний {
цвет: серый;
размер шрифта: средний;
}
.шрифт-большой {
цвет: серый;
размер шрифта: большой;
}
.шрифт-xlarge {
цвет: серый;
размер шрифта: x-большой;
}
.font-xxlarge {
цвет: серый;
размер шрифта: xx-крупный;
}
<тело>
меньше {
красный цвет;
размер шрифта: меньше;
}
.больше {
красный цвет;
размер шрифта: больше;
}
<тело>
125rem 
Если они позже изменят настройки размера шрифта в настройках своего браузера, размер корневого шрифта на вашем сайте не будет обновлен. В другой моей статье, указанной выше, более подробно рассказывается о том, почему это так важно, но достаточно сказать, что это недоступно.
0126 16px для всего видимого текста на странице:
Но что, если пользователь изменит настройки шрифта в своем браузере?
6rem 
8rem 