font-size¶
Свойство font-size
определяет размер шрифта элемента.
Размер может быть установлен несколькими способами. Набор констант (xx-small
, x-small
, small
, medium
, large
, x-large
, xx-large
) задаёт размер, который называется абсолютным. По правде говоря, они не совсем абсолютны, поскольку зависят от настроек браузера и операционной системы.
Другой набор констант (larger
, smaller
) устанавливает относительные размеры шрифта. Поскольку размер унаследован от родительского элемента, эти относительные размеры применяются к родительскому элементу, чтобы определить размер шрифта текущего элемента.
В конечном итоге, размер шрифта сильно зависит от значения свойства font-size
у родителя элемента.
Сам размер шрифта определяется как высота от базовой линии до верхней границы кегельной площадки, как показано на рис. 1.
Шрифт и Цвет
- font
- font-family
- font-feature-settings
- font-kerning
- font-language-override
- font-optical-sizing
- font-size
- font-size-adjust
- font-stretch
- font-style
- font-synthesis
- font-variant
- font-variant-alternates
- font-variant-caps
- font-variant-east-asian
- font-variant-ligatures
- font-variant-numeric
- font-variant-position
- font-variation-settings
- font-weight
- line-height
Синтаксис¶
/* <absolute-size> values */
font-size: xx-small;
font-size: x-small;
font-size: small;
font-size: medium;
font-size: large;
font-size: x-large;
font-size: xx-large;
/* <relative-size> values */
font-size: smaller;
font-size: larger;
/* <length> values */
font-size: 12px;
font-size: 0.8em;
/* <percentage> values */
font-size: 80%;
/* Global values */
font-size: inherit;
font-size: initial;
font-size: unset;
Значения¶
Для задания абсолютного размера используются следующие значения: 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% берётся размер шрифта родительского элемента. Отрицательные значения не допускаются.
Значение по-умолчанию:
font-size: medium;
Применяется ко всем элементам
Спецификации¶
Описание и примеры¶
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>font-size</title>
<style>
h1 {
font-family: 'Times New Roman', Times, serif; /* Гарнитура текста */
font-size: 250%; /* Размер шрифта в процентах */
}
p {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11pt; /* Размер шрифта в пунктах */
}
</style>
</head>
<body>
<h1>Амазонская низменность</h1>
<p>
Для гостей открываются погреба Прибалатонских
винодельческих хозяйств, известных отличными сортами
вин "Олазрислинг" и "Сюркебарат".
</p>
</body>
</html>