CSS Font-size

FavoriteLoadingДобавить в избранное

Свойство font-size в CSS используется для указания высоты и размера шрифта. Это влияет на размер текста элемента. Его значение по умолчанию среднее и может быть применено к каждому элементу. Значения этого свойства включают xx-small, small, x-small и т.д.
Размер шрифта может быть относительным или абсолютным.

Абсолютный размер

Используется для установки текста определенного размера. Используя absolute-size, невозможно изменить размер текста во всех браузерах. Это выгодно, когда мы знаем физический размер вывода.

Относительный размер

Он используется для установки размера текста относительно соседних элементов. С относительным размером можно изменить размер текста в браузерах.

ПРИМЕЧАНИЕ.
Если мы не определяем размер шрифта, то для обычного текста, такого как абзацы, размер по умолчанию равен 16px, что равно 1em.
Размер шрифта в пикселях
Когда мы устанавливаем размер текста в пикселях, это дает нам полный контроль над размером текста.

Пример

<!DOCTYPE html>
<html>
<head>
<title>Document</title>
<style>
#first {
font-size: 40px;
}
#second {
font-size: 20px;
}
</style>
</head>
<body>
<p id="first">Это абзац размером 40 пикселей.</p>
<p id="second">Это еще один абзац размером 20 пикселей.</p>
</body>
</html>

Размер шрифта с em

Используется для изменения размера текста. Большинство разработчиков предпочитают em вместо пикселей . Он рекомендован консорциумом всемирной паутины (W3C). Как указано выше, размер текста по умолчанию в браузерах составляет 16 пикселей. Итак, мы можем сказать, что размер 1em по умолчанию равен 16px.
Формула для вычисления размера от пикселей до em: em = пикселей/16.

Пример

<!DOCTYPE html>
<html>
<head>
<title>Document</title>
<style>
#first {
font-size: 2.5em; /* 40px/16=2.5em */
}
#second {
font-size: 1.875em; /* 30px/116=1.875em */
}
#third {
font-size: 0.875em; /* 14px/16=0.875em */
}
</style>
</head>
<body>
<p id='first'>Первый абзац.</p>
<p id='second'>Второй абзац</p>
<p id='third'>Третий абзац.</p>
</body>
</html>

Адаптивный размер шрифта

Мы можем установить размер текста, используя единицу vw , которая означает « ширину области просмотра ». Область просмотра — это размер окна браузера.
1vw = 1% ширины области просмотра.
Если ширина окна просмотра 50 см, то 1vw равно 0,5 см.

пример

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p style="font-size: 5vw;">Первый абзац шириной 5vw.</p>
<p style="font-size: 10vw;">Второй абзац шириной 10vw.</p>
</body>
</html>
Написать Администратору

Вы можете написать Администратору сайта.

отправить