CSS Размер шрифта
Свойство font-size задаёт размер текста.
Управление размером текста важно в веб-дизайне, но не используйте размер, чтобы абзацы выглядели как заголовки, или наоборот. Всегда используйте правильные теги, такие как <h1>–<h6> для заголовков и <p> для абзацев.
Размер может быть абсолютным или относительным. Абсолютные размеры включают px и ключевые слова, такие как small, medium и large. Относительные размеры включают em (относительно родителя), rem (относительно корневого элемента), % (относительно родителя) и smaller / larger.
Как выбрать правильную единицу?
- Используйте
pxдля фиксированного, точного контроля, но страница не будет так хорошо масштабироваться на разных размерах экрана или предпочтениях пользователя. - Абсолютные размеры полезны, когда известен физический размер вывода.
- Используйте
emилиremдля масштабируемых дизайнов, которые позволяют пользователям настраивать размер текста в браузере. - Используйте
%, чтобы задать размер текста относительно родительского элемента.
Установка размера шрифта в пикселях
Установка размера в пикселях даёт вам полный контроль над размером текста.
С пикселями страница может плохо масштабироваться на разных размерах экрана, и пользователи не могут изменить размер текста в своих настройках, хотя они всё же могут увеличить всю страницу.
Пример
Размеры заголовка и абзаца заданы в пикселях.
<style> установите h1 в 40px, h2 в 30px и p в 16px. Добавьте заголовок каждого уровня и абзац.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
h1 {
font-size: 40px;
}
h2 {
font-size: 30px;
}
p {
font-size: 16px;
}
</style>
</head>
<body>
<h1>This is a heading (40px)</h1>
<h2>This is a heading (30px)</h2>
<p>This is a paragraph (16px).</p>
</body>
</html>
Установка размера шрифта с помощью Em
Единица em относится к размеру шрифта родительского элемента. Если родитель равен 16px, то 2.5em равно 40px.
В отличие от пикселей, em позволяет пользователям настраивать размер текста в настройках браузера.
Пример
Те же размеры, что и в примере с пикселями, записанные с помощью em.
<style> установите body в 16px, затем h1 в 2.5em, h2 в 1.875em и p в 1em. Добавьте заголовок каждого уровня и абзац.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
font-size: 16px; /* Base font size */
}
h1 {
font-size: 2.5em; /* 2.5 * 16 = 40px */
}
h2 {
font-size: 1.875em; /* 1.875 * 16 = 30px */
}
p {
font-size: 1em; /* 1 * 16 = 16px */
}
</style>
</head>
<body>
<h1>This is a heading (2.5em)</h1>
<h2>This is a heading (1.875em)</h2>
<p>This is a paragraph (1em).</p>
</body>
</html>
Установка размера шрифта с помощью Rem
Единица rem относится к размеру шрифта корневого элемента <html>, независимо от того, где элемент находится на странице.
Это делает rem полезной для масштабируемых, адаптивных дизайнов: измените размер шрифта <html>, и всё, что задано в rem, масштабируется вместе с ним. По умолчанию 1rem равен 16px в большинстве браузеров.
Пример
Те же размеры, записанные с помощью rem, относительно корневого элемента.
<style> установите элемент html в 16px, затем h1 в 2.5rem, h2 в 1.875rem и p в 1rem. Добавьте заголовок каждого уровня и абзац.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
html {
font-size: 16px; /* Set the root font size */
}
h1 {
font-size: 2.5rem; /* 2.5 * 16 = 40px */
}
h2 {
font-size: 1.875rem; /* 1.875 * 16 = 30px */
}
p {
font-size: 1rem; /* 1 * 16 = 16px */
}
</style>
</head>
<body>
<h1>This is a heading (2.5rem)</h1>
<h2>This is a heading (1.875rem)</h2>
<p>This is a paragraph (1rem).</p>
</body>
</html>
Единица vw
Размер шрифта также можно задать с помощью единицы vw, что означает ширину области просмотра.
1vw составляет 1% от текущей ширины области просмотра браузера. Так, если область просмотра шириной 500px, 1vw равен 5px. Это заставляет размер текста следовать за размером окна браузера.
Пример
Заголовок и абзац масштабируются вместе с шириной окна с помощью vw.
<style> установите h1 в 10vw и p в 5vw. Добавьте заголовок и абзац, отметив, что изменение размера окна меняет размер текста.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
h1 {
font-size: 10vw;
}
p {
font-size: 5vw;
}
</style>
</head>
<body>
<h1>Hello World</h1>
<p>Resize the browser window to see how the font size scales.</p>
</body>
</html>