Font size/размер шрифта
"Что такое font-size"!? Несколько примеров использования "font-size" на сайте. Способов использования "font-size" всего существует 3!
О font-size подробно:
- Что такое font size?
- Единицы измерения используемые свойством font-size.
- Пример №1 использования "font-size"
- Пример №2 использования "font-size"
- Пример №3 использования "font-size"
Что такое font size?
Начнем наше повествования с того : "Что такое font size"?
Как переводится "font size".
Если вы переведете словосочетание "font size", то сразу станет понятно "Что такое font size"?
font - шрифт(существительное).
size - размер(существительное).
Из выше приведенного примера, вы можете соединить два значения и получить ответ на вопрос "Что такое font size"?
Что такое "font-size" в css?
В css "font-size" - является свойством!
Как используется "font-size" в css?
Существует всего "3 способа css" и соответственно эти 3 способа распространяются и на "font-size"!
Какой размер "font-size" в css по умолчанию?
Какая единица измерения "font-size" используется чаще всего?
Единицы измерения используемые свойством font-size.
Приведем некоторые единицы измерения применяемые для "font-size":
Font-size - единица измерения px.
Font-size - единица измерения px : можно задать значение в пикселях, когда важно, чтобы шрифт всегда был одного конкретного размера, вне зависимости от браузера и настроек устройства.
Font-size - единица измерения em .
Font-size - единица измерения em : относительная единица, которая определяется по родительскому элементу. 1em — это стандартный размер текста, который установлен в браузере.Обычно он равен 16px.
Соответственно, 2em будут равны 32px, а 0.5em — 8px.
Если задаёшь font-size внутри другого элемента, то em будет рассчитан относительно этого элемента.
Font-size - единица измерения rem .
Font-size - единица измерения rem : работает похожим образом, что em, но в этом случае размер шрифта зависит не от родительского элемента, а от корневого html элемента.Другими словами, так можно не зависеть от размера родительского элемента.
Font-size - единица измерения %.
Font-size - единица измерения % : значение в процентах, например 80%.
Работает похожим образом, что и единица em.За 100% берётся размер текста в родительском элементе.
Значение может быть только положительным.
Font-size - единица измерения x, xx, и др.
xx-small, x-small, small, medium, large, x-large, xx-large — абсолютные значения, которые зависят от настроек браузера и операционной системы.
Font-size - единица измерения larger, smaller.
larger, smaller — больший или меньший размер шрифта относительно родительского элемента.
Пример №1 использования "font-size"
Вопрос :
Когда использовать данный способ "font-size"
Данный способ используется для того, когда у вас есть единичный блок на странице, который на сайте больше нигде не используется!
Как я уже выше сказал, что существует только "3 способа css"... начнем с использования "font-size" внутри тега... для этого вам понадобится:
Для примера используем любой блок - пусть это будет div.
В него поместим произвольный текст.
В первый тег ставим атрибут style.
Далее знак равно, двойные кавычки, font-size: "число" + "измерение"
Соберем весь код:
Код примера №1 использования "font-size"
<div style="font-size:40px">Пример font-size</div>
Пример №1 использования "font-size"
Расположим выше приведенный пример прямо здесь:
Пример №2 использования "font-size"
Начнем с того :
Когда использовать данный способ "font-size"
Данный способ возможно использовать для того, когда у вас есть единичная страница, на которой требуется прописать 1, 2, 3 свойства для определенного блока, которые на сайте больше нигде не используется!
Для того, чтобы рассмотреть второй способ использования "font-size" вам понадобится:
Опять возьмем div.
В него поместим произвольный текст.
Используем любой класс с произвольным названием "example"(пример).
Для класса example пропишем свойство "font-size" со значением 50px.
.example{
font-size:50px
}
На странице внутри head(это желательно, но не обязательно) размещаем тег style.
Соберем весь код:
Соберем весь код использования "font-size" в теге style:
<style>
.example {
font-size:50px
}
</style>
<div class="example">Пример font-size через тег style</div>
Пример использования "font-size" в теге style:
Разместим выше приведенный код прямо здесь:
Пример №3 использования "font-size".
И снова вопрос :
Когда использовать данный способ "font-size"
Данный способ "font-size" используется как основной, для всего сайта! Например:
Этот способ наиболее распространенный!
Для использования "font-size" в данном способе вам понадобится:
Чтобы не плодить различные сущности разберем данный способ на уже существующем блоке...
Вы можете использовать опять div у меня же есть самодельный блок "blackblock".
Для него пропишем свойства и в том числе "font-size" - выделено
blackblock {
display: block;
width: 100%;
background: black;
color: #fffa00;
text-align: center;
padding: 15px 0;
font-size: 22px;
margin: 18px 0;
word-wrap: break-word;
line-height: 34px;
}
Код использования "font-size" в файле стилей.
Стили внутри файла css.
<blackblock>"<strong>font-size</strong>" в файле стилей.</blackblock>
Пример использования "font-size" в файле стилей.
Разместим выше рассмотренный блок с использованием "font-size" в файле стилей прямо здесь:
Свои комменты в ожидании переделки!
Когда сделаю не знаю!
Времени нет...
Иначе сообщение будет удалено, вас в бан - все просто!
Но если, сил нет как хочется высказать всё, что вы думаете об этом, пожалуйста - комменты от Vk - форма ниже: