Хостинг от 220 ₽/месяц. Перенос сайтов и месяц на тестирование - бесплатно!
HTML Academy

Как задать размер шрифта с помощью css свойства font-size

433
()

Чтобы задать размер шрифта на сайте с помощью css, необходимо у нужного элемента прописать свойство font-size. При этом размер шрифта можно указать несколькими способами:


1 В пикселях:

h1 {
font-size:20px
}

2 Размер шрифта с помощью свойств small, medium и large (маленький, средний, большой).А так же x-small и xx-small ( очень-маленький ) , x-large и xx-large (очень большой)

h1 {
font-size:small;
}

3 Так же можно задать размер шрифта в процентах (процент берется относительно родительского элемента):

<span style="font-size:20px">
<h1>Пример</h1>
</span>
h1 {
font-size: 150%;
}

Здесь размер заголовка <h1> будет равен 150% от 20px, т. е. 30px.

4 Вычисляемый размер шрифта:

h1 {
font-size: calc(2em + 2%);
}

5 Размер в относительных единицах. Как и у процентов, размер берется относительно родительского элемента:

<span style="font-size:30px">
<h1>Пример</h1>
</span>
h1 {
font-size: 2em;
}

Здесь размер шрифта заголовка css <h1> будет равен 60px

6Размер в типографских пунктах. 1 пункт = 4/3px.

h1 {
font-size: 20pt;
}

Как сделать шрифт "резиновым" (адаптивным)?

Чтобы адаптировать шрифт под размеры экрана различных мобильных устройств, можно воспользоваться несколькими способами:

7Задать кегль шрифта с помощью медиазапросов:

h1 {
font-size: 40px;
}
@media (min-width:1500px) {
h1 {
font-size: 60px;
}
}
@media (max-width:600px) {
h1 {
font-size: 20px;
}
}

Здесь при разрешении экрана больше 1500px шрифт увеличится с 40 пикселей до 60, а при разрешении меньше 600px уменьшится до 20 пикселей.

Как сделать сайт адаптивным и больше о медиазапросах можно прочитать здесь.

8 Задать размер шрифта через css в относительных единицах vw и vh относительно ширины и высоты окна браузера.

h1 {
font-size: 3vw;
}

Здесь 3 - это 3% от ширины экрана, Т. е. при разрешении 1200px размер шрифта будет равен 36px и на экранах с более низким разрешением будет пропорционально уменьшаться.

Как подключить шрифт к сайту можно прочитать здесь.

Понравилась статья?

Оцените!

Средняя оценка / 5. Количество оценок:

Оценок пока нет. Поставьте оценку первым!

css

Добавить комментарий

Ваш адрес email не будет опубликован.

*
code