Как изменить размер шрифта на сайте с помощью CSS?

В CSS размер шрифта можно задавать различными способами. Вот некоторые из них:

1. Единицы измерения:

В CSS есть несколько единиц измерения, которые используются для задания размеров, в том числе и размера шрифта. Это px (пиксели), em (относительные единицы), rem (относительные единицы относительно корневого элемента HTML), pt (точки), % (проценты) и др. Например:

p {

font-size: 16px; /* задаем размер шрифта в пикселях */

}

h1 {

font-size: 2em; /* задаем размер шрифта относительно размера родительского элемента */

}

p {

font-size: 1.2rem; /* задаем размер шрифта относительно размера корневого элемента HTML */

}

h2 {

font-size: 12pt; /* задаем размер шрифта в точках */

}

p {

font-size: 80%; /* задаем размер шрифта в процентах относительно размера родительского элемента */

}

2. Свойство font-size:

В CSS есть свойство font-size, которое задает размер шрифта. Например:

p {

font-size: medium; /* задаем средний размер шрифта */

}

h1 {

font-size: x-large; /* задаем очень большой размер шрифта */

}

p {

font-size: smaller; /* задаем меньший размер шрифта */

}

3. Смешанный способ:

Можно задавать размер шрифта с помощью комбинации единиц измерения и свойства font-size. Например:

p {

font-size: 1.2em; /* задаем размер шрифта 1,2 раза больше размера родительского элемента */

}

h2 {

font-size: 20px; /* задаем размер шрифта в 20 пикселей */

}

p {

font-size: medium; /* задаем средний размер шрифта */

font-size: 1.2em; /* и увеличиваем его на 1,2 раза */

}

4. Использование переменных:

С помощью CSS-переменных можно задавать размеры шрифтов различных элементов в одном месте, а затем использовать эти переменные в других местах. Это удобно для изменения размеров шрифтов на всем сайте с помощью одной переменной. Например:

:root {

--font-size-base: 16px; /* задаем базовый размер шрифта */

--font-size-small: calc(var(--font-size-base) * 0.8); /* вычисляем размер шрифта для маленьких элементов */

--font-size-large: calc(var(--font-size-base) * 1.2); /* вычисляем размер шрифта для больших элементов */

}

p {

font-size: var(--font-size-base); /* задаем базовый размер шрифта */

}

h1 {

font-size: var(--font-size-large); /* задаем большой размер шрифта */

}

small {

font-size: var(--font-size-small); /* задаем маленький размер шрифта */

}

Пример кода:

HTML:

Заголовок страницы
Это обычный текст на странице.
Этот текст немного меньше остального.

CSS:

:root {
  --font-size-base: 16px;
  --font-size-small: calc(var(--font-size-base) * 0.8);
  --font-size-large: calc(var(--font-size-base) * 1.2);
}
h1 {
  font-size: var(--font-size-large);
}
p {
  font-size: var(--font-size-base);
}
small {
  font-size: var(--font-size-small);
}