Чтобы задать размер шрифта на сайте с помощью css, необходимо у нужного элемента прописать свойство font-size. При этом размер шрифта можно указать несколькими способами:
1 В пикселях:
font-size:20px
}
2 Размер шрифта с помощью свойств small, medium и large (маленький, средний, большой).А так же x-small и xx-small ( очень-маленький ) , x-large и xx-large (очень большой)
font-size:small;
}
3 Так же можно задать размер шрифта в процентах (процент берется относительно родительского элемента):
<h1>Пример</h1>
</span>
font-size: 150%;
}
Здесь размер заголовка <h1> будет равен 150% от 20px, т. е. 30px.
4 Вычисляемый размер шрифта:
font-size: calc(2em + 2%);
}
5 Размер в относительных единицах. Как и у процентов, размер берется относительно родительского элемента:
<h1>Пример</h1>
</span>
font-size: 2em;
}
Здесь размер шрифта заголовка css <h1> будет равен 60px
6Размер в типографских пунктах. 1 пункт = 4/3px.
font-size: 20pt;
}
Как сделать шрифт "резиновым" (адаптивным)?
Чтобы адаптировать шрифт под размеры экрана различных мобильных устройств, можно воспользоваться несколькими способами:
7Задать кегль шрифта с помощью медиазапросов:
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 относительно ширины и высоты окна браузера.
font-size: 3vw;
}
Здесь 3 - это 3% от ширины экрана, Т. е. при разрешении 1200px размер шрифта будет равен 36px и на экранах с более низким разрешением будет пропорционально уменьшаться.
Как подключить шрифт к сайту можно прочитать здесь.
