Как установить размер шрифта на сайте
Сегодня я хотел бы рассказать Вам о такой теме, как установить размер шрифта на сайте. Ведь мы уже давно изучили такое свойство как font-family, при помощи которого можно устанавливать шрифт для сайта, но, а про размер шрифта мы даже и не разговаривали. Предлагаю начинать. Для того чтобы установить размер шрифта существует отдельное css свойство, которое называется font-size, с его помощью мы сможем устанавливать нужный нам размер шрифта для определенных элементов, а также для сайта в целом. Единицы измерения шрифтов могут быть различными, но я расскажу о некоторых и наиболее часто используемых в практике. Начнем с первого значения, при помощи которого можно измерять размер текста - это pt, так называемый пункт, который равен 1/72 дюйма. Также можно указывать размер шрифта в пикселях (px), процентах, и значениях em. На счет пикселей заострять внимания не будем, думаю, здесь все понятно, а вот на проценты и em стоит обратить внимание. Как же рассчитываются данные единицы? У каждого браузера изначально в настройках установлен шрифт, а также размер шрифта, который будет отображаться, если иное не указано нами в css стилях. Поэтому 1em равен величине по умолчанию, установленной в браузере, либо размеру шрифта родительского элемента, установленного нами в css стилях. Тоже самое и с процентами, т.е., 100% = 1em и расчет идет точно такой же, как и для em. Например, у нас изначально установлен шрифт, который равен размеру в 16px, а мы хотим указать нужному нам элементу свой размер шрифта в em или процентах, который будет в полтора раза больше изначально установленного шрифта. Тогда мы указываем следующее, либо 1.5em, либо 150%. Эти значения будут означать, что размер шрифта будет в полтора раза больше чем 16 пикселей, следовательно, размер шрифта будет равен 24px. Надеюсь, Вы поняли, что я хотел до Вас донести. И для закрепления рассмотрим пример с установкой различных единиц и их значений для размера шрифта.
<html>
<head>
<title>Свойство font-size</title>
<link rel="stylesheet" href="css/styles.css" type="text/css" />
</head>
<body>
<a href="#">Ссылка</a>
<p>Текст</p>
<span>Текст span</span>
</body>
</html>
Устанавливаем размер шрифта при помощи CSS стилей:
body {
font-size: 16px;
}
a {
font-size: 1.5em;
}
span {
font-size: 24px;
}
Мы создали три элемента, чтобы применить к каждому из них свой размер текста. В стилях мы установили для всех элементов на странице размер текста равный 16 пикселей. Для ссылки мы установили значение в em, для элемента span - значение в пикселях, а для параграфа оставили значение по умолчанию. Можете сравнить ссылку со строчным элементом, хоть значения указаны в различных единицах, размер текста у них одинаковый. Об этом я говорил немного выше.
Это все, что нужно знать о том, как установить размер шрифта в CSS, до скорого!
