Свойство font-size — размер текста css

Содержание:

Использование горизонтальных разделителей
CSS Advanced
Примеры использования viewport единиц
Как изменить размер шрифта на компьютере (везде)
Font Size
Единица измерения rem
Работа с текстом в ворде.
Тэги изменения начертания шрифта
Единицы изменения viewport (окно просмотра)
Теги и
- Пример: уменьшенный и увеличенный шрифт
Единица измерения em
CSS Tutorial
Свойства шрифта

Использование горизонтальных разделителей

При оформлении текста можно воспользоваться горизонтальными разделителями. Для того чтобы их вставить нужно воспользоваться тэгом <HR>.Линия всегда начинается с новой строки, а после нее все элементы отображаются на следующей строке. Этот элемент является одинарным тэгом и не требует закрытия.

У тэга HR есть параметры:

SIZE — устанавливает толщину линии.

Пример:

<HR SIZE=”3”>

WIDTH – устанавливает ширину линии в пикселах или процентах.

Пример:

<HR WIDTH =”300”>
<HR WIDTH =”25%”>

COLOR – задает линии определенный цвет.

Пример:

<HR COLOR =”red”>

ALIGN определяет выравнивание линии.

Пример:

<HR ALIGN=”LEFT”>

Вставим горизонтальный разделитель после стихотворения с толщиной в 2 пикселя и желтым цветом.

Пример:

<HTML>
<HEAD>
<TITLE>   Стихотворение </TITLE>
</HEAD>
<BODY>
<H1 ALIGN = “CENTER”>
Унылая пора! Очей очарованье!...
</H1>
<H3 ALIGN = “RIGHT”>
Александр Пушкин
</H3>
<P>
Унылая пора! Очей очарованье!   <BR>
Приятна мне твоя прощальная краса —   <BR>
Люблю я пышное природы увяданье,   <BR>
В багрец и в золото одетые леса,   <BR>
В их сенях ветра шум и свежее дыханье,   <BR>
И мглой волнистою покрыты небеса,   <BR>
И редкий солнца луч, и первые морозы,   <BR>
И отдаленные седой зимы угрозы.   <BR>
</P>
<HR COLOR="yellow" SIZE="2">
</BODY>
</HTML>

Замечание. Если для одного тэга мы применяем несколько атрибутов, то достаточно перечислить их через пробел.

Результат:

CSS Advanced

Css свойство font

CSS Rounded CornersCSS Border ImagesCSS BackgroundsCSS ColorsCSS Color KeywordsCSS Gradients
Linear Gradients
Radial Gradients

CSS Shadows
Shadow Effects
Box Shadow

CSS Text EffectsCSS Web FontsCSS 2D TransformsCSS 3D TransformsCSS TransitionsCSS AnimationsCSS TooltipsCSS Style ImagesCSS Image ReflectionCSS object-fitCSS object-positionCSS ButtonsCSS PaginationCSS Multiple ColumnsCSS User InterfaceCSS Variables
The var() Function
Overriding Variables
Variables and JavaScript
Variables in Media Queries

CSS Box SizingCSS Media QueriesCSS MQ ExamplesCSS Flexbox
CSS Flexbox
CSS Flex Container
CSS Flex Items
CSS Flex Responsive

Примеры использования viewport единиц

Стиль и размер текста в css

В следующих секциях мы посмотрим на некоторые примеры использования единиц viewport и на то, как их применять в ваших рабочих проектах.

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

Единицы вьюпорта идеальны для адаптивной типографики. Для примера, мы можем использовать следующий код для заголовка статьи:

Размер заголовка будет увеличиваться или уменьшаться в зависимости от ширины вьюпорта. Это как будто бы мы выдали размеру шрифта 5% ширины страницы. Однако, как бы не хотелось, а надо протестировать и смотрим, что получается.

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

А там у нас выходит уже ниже .

Чтобы решить эту проблему, нам надо дать заголовку минимальный размер шрифта, который не может быть меньше положенной нормы. И тут CSS спешит на помощь!

У функции будет основное значение и оно добавит к нему . Учитывая это, размер шрифта точно не будет слишком маленьким.

Ещё стоит рассмотреть то, как себя будет вести размер шрифта на больших экранах, к примеру на 27” аймаках. Что будет? Ну вы уже наверное предположили. Размер шрифта бахнет аж в , что само по себе уже кошмар. Чтобы предохраниться от этой ситуации мы можем использовать медиа запросы на определённых брейкпоинтах и менять размеры шрифтов.

Сбрасывая мы можем быть уверены в том, что размер шрифта не будет слишком большим. Тут возможно вам понадобится несколько медиа запросов, но это сугубо ваше личное дело когда и как их использовать в контексте проекта.

Полноэкранные секции

Иногда нам надо, чтобы секция забирала 100% высоты виюпорта. Это так называемые полноэкранные секции. Для их создания мы можем использовать вьюпорт единицу высоты.

Добавив , мы можем точно убедиться в том, высота секции будет в 100% высоту вьюпорта. Также, тут я добавил немного флексбокса, чтобы отцентровать контент вертикально и горизонтально.

Прилипающий футер

На больших экранах вы могли уже обратить внимание на то, что футер не прилипает к концу страницы. Ну и это нормально

Это даже не рассматривается как плохая практика. Однако, тут у нас есть пространство для улучшений. Давайте рассмотрим следующий кейс, в котором и происходит эта ошибка.

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

Первое решение: calc и единицы вьюпорта

Если высота хедера и футера фиксированны, то их можно совместить с помощью функции :

Это решение не гарантирует того, что оно будет всегда работать, особенно для футера. За всю свою карьеру я никогда не использовал футер с фиксированной высотой, потому что это просто непрактично, особенно на разных размерах экранов.

Второе решение: Flexbox и вьюпорт единицы (рекомендуемое)

Добавляя как высоту для элемента, мы можем использовать флексы для того, чтобы основной контент занимал всё оставшееся место.

С учетом этого, наша проблема решена и у нас есть прилипающий футер вне зависимости от длины контента.

Адаптивные элементы

Занимаясь подготовкой материала я наткнулся на эту статью и она мне реально понравилась. Так что я возьму пример использования оттуда и объясню его своим способом.

Предположим, что у нас есть портфолио для того, чтобы показать свои адаптивные работы и у нас имеется три типа устройства (мобильные, планшеты и ноутбук). В каждом устройстве есть по изображению. Суть в том, чтобы сделать этот контент 100% отзывчивым на CSS.

Используя гриды и единицы вьюпорта, мы можем сделать это адаптивным и динамическим.

Обратите внимание, что вьюпорт единицы используются в grid-* свойствах. Они также используются для , и других свойств

Всё это приведет к флюидному дизайну.

Выходим за пределы контейнера

Я обратил внимание на случай, который больше всего подходит для редакторских шаблонов. А именно когда дочерний элемент забирает 100% ширины вьюпорта, хотя его родитель ограничен в ней

Давайте рассмотрим пример ниже:

Чтобы достигнуть такого же эффекта, мы можем использовать вьюпорт единицы и свойства позиционирования. Вот наш CSS:

Давайте разберем всё по полочкам и поймём как это работает.

Добавляем

Самый важный шаг, который даст изображению ширину равную 100% вьюпорта.

Добавляем

Чтобы отцентровать изображение, нам понадобится выдать отрицательный маргин с половиной ширины вьюпорта.

Добавляем

И наконец, мы отодвинем изображение в правую сторону со значением 50% от ширины его родителя.

Как изменить размер шрифта на компьютере (везде)

Font

Можно увеличить или уменьшить шрифт не только в отдельных программах, но и сразу во всем компьютере. В этом случае поменяются еще и все надписи, значки, меню и многое другое.

Покажу на примере. Вот стандартный экран компьютера:

А это тот же самый экран, но с увеличенным размером шрифта:

Для того чтобы получить такой вид, нужно всего лишь изменить одну настройку в системе. Если вдруг результат не понравится, всегда можно вернуть все как было тем же самым образом.

В разных версиях Windows эта процедура производится по-разному. Поэтому я приведу три инструкции для популярных систем: Windows 7, Windows 8 и XP.

Нажмите на кнопку «Пуск» и откройте «Панель управления».
Щелкните по надписи «Оформление и персонализация».
Нажмите на надпись «Экран».
Укажите нужный размер шрифта (мелкий, средний или крупный) и нажмите на кнопку «Применить».
В появившемся окошке щелкните по «Выйти сейчас». Не забудьте перед этим сохранить все открытые файлы и закрыть все открытые программы.

Увеличение размера шрифта на экране компьютера может быть жизненной необходимостью для пользователя. Все люди имеют индивидуальные особенности, в том числе и различную остроту зрения. Кроме этого, они используют мониторы от разных производителей, с разной диагональю экрана и разрешением. Чтобы максимально учесть все эти факторы, в операционной системе предусмотрена возможность изменять размер шрифтов и значков с целью подбора максимально комфортного для пользователя отображения.

Чтобы подобрать оптимальный для себя размер отображаемых на экране шрифтов, пользователю предоставляется несколько способов. Они включают в себя использование определенных комбинаций клавиш, компьютерной мыши и экранной лупы. Кроме того, возможность изменять масштаб отображаемой страницы предусмотрена во всех браузерах. Популярные соцсети также имеют подобный функционал. Рассмотрим все это подробнее.

Способ 1: Клавиатура

Клавиатура является основным инструментом пользователя при работе с компьютером. Задействуя только определенные сочетания клавиш, можно изменять размер всего, что отображаются на экране. Это ярлыки, подписи под ними, или другой текст. Чтобы сделать их больше или меньше, могут использоваться такие комбинации:

Ctrl + Alt + ;
Ctrl + Alt + ;
Ctrl + Alt + (ноль).

Для людей со слабым зрением оптимальным решением может стать экранная лупа.
Она имитирует эффект линзы при наведении на определенную область экрана. Вызвать ее можно с помощью сочетания клавиш Win +
.

Менять масштаб открытой страницы браузера можно с помощью сочетания клавиш Ctrl +
и Ctrl +
, или все тем же вращением колеса мыши при нажатой клавише Ctrl
.

Способ 2: Мышь

В сочетании клавиатуры с мышью изменять размер значков и шрифтов еще проще. Достаточно при нажатой клавише «Ctrl»
вращать колесо мыши к себе или от себя, чтобы масштаб рабочего стола или проводника менялся в ту или другую сторону. Если у пользователя ноутбук и он не использует в работе мышь — имитация вращения его колеса присутствует в функциях тачпада. Для этого нужно совершать такие движения пальцами по его поверхности:

Изменяя направление движения, можно увеличивать или уменьшать содержимое экрана.

Способ 3: Настройки браузера

Если возникла нужда изменить размер контента просматриваемой веб-страницы, то кроме описанных выше сочетаний клавиш, можно воспользоваться настройками самого браузера. Достаточно открыть окно настроек и найти там раздел «Масштаб»
. Вот как это выглядит в :

Остается только подобрать наиболее подходящий для себя масштаб. При этом будут увеличиваться все объекты веб-страницы, включая шрифты.

В других популярных браузерах подобная операция происходит схожим образом.

Кроме масштабирования страницы существует возможность увеличить только размер текста, оставив все остальные элементы в неизменном виде. На примере это выглядит так:

Так же как и масштабирование страницы, данная операция происходит практически одинаково во всех веб-обозревателях.

Способ 4: Изменение размера шрифта в соцсетях

Любителей подолгу зависать в соцсетях также может не устроить размер шрифтов, который используется там по умолчанию. Но так как по своей сути социальные сети также представляют собой веб-страницы, для решения этой задачи могут подойти те же методы, что были описаны в предыдущих разделах. Каких-либо своих специфических способов увеличить размер шрифта или масштаб страницы разработчики интерфейса этих ресурсов не предусмотрели.

Таким образом, операционная система предоставляет самые различные возможности для изменения размера шрифта и значков на экране компьютера. Гибкость настроек позволяет удовлетворить запросы самого взыскательного пользователя.

Единица измерения rem

Что касается единиц измерения rem, то здесь font-size всегда зависит от значения корневого элемента (или элемента html).

CSS

html {
  font-size: 16px;
}

p {
  font-size: 1.5rem;
}

В приведенном выше примере rem равен 16px (так как это значение наследуется у html-элемента) и, следовательно, размер текста CSS для всех элементов paragraph будет составлять 24px (1.5 x 16 = 24). В отличие от em-единиц параграф будет игнорировать стилизацию всех родительских элементов, кроме корневого.

Эта единица измерения поддерживается следующими браузерами:

Chrome	Safari	Firefox	Opera	IE	Android	iOS
Работает	Работает	Работает	Работает	10+	Работает	Работает

Работа с текстом в ворде.

Работа и редактирование текста в ворде является неотъемлемой частью любой профессии связанной с компьютером в полной или частичной мере. Грамотно отформатированный текст, залог успеха любой работы связанной с документами. И в этой публикации мы рассмотрим основные инструменты для редактирования текста в ворде.

В статье «Редактирование текста в Word» мы рассмотрели основные инструменты необходимые для работы с текстом. Теперь давайте попробуем применить теорию на практике. Самое первое правило работы с текстом это применение всех инструментов только к выделенной области текста. Что бы выделить текст Вам необходимо навести курсор мыши на начало нужного участка текста, что бы появилась вертикальная палочка. Затем нажимаем правую клавишу мыши и удерживая ее в нажатом состоянии плавно ведем по тексту. Выделенная область текста будет иметь темный фон. Теперь можно применять различные инструменты к выделенной области. Смотрим пример:

1. Выделяем текст и применяем инструменты выделения текста:

— и все три инструмента вместе

Смотрим пример:

Все три инструмента применяются для выделения или акцентирования определенных участков текста

То на что следует обратить внимание. Не следует весь текст в документе делать курсивом или жирным, как бы для красоты

Честно, смотреться гадко и не профессионально.

2. Применяем инструменты выравнивания текста.

— выравнивание по левому краю

— выравнивание по правому краю

— выравнивание по центру

— выравнивание по ширине страницы

Смотрим пример:

Один из необходимых инструментов для формата отображения текста. В основном применяют выравнивание по центру – заголовки, названия глав. Выравнивание по ширине страницы – основной текст, все края текста выравниваются по границам страницы.

3. Стиль шрифта и размер шрифта.

Редактор ворд имеет набор стандартных шрифтов, большая часть из которых имеет корректное отображение на мониторе компьютера. Некоторые шрифты могут не отображаться, причина в технических характеристиках компьютера и настройке системы. Для большинства документов существуют определенные форматы шрифта, такие как стиль и размер. Например, каждый из вас заполнять бланки документов

Обратите внимание на стиль и размер шрифта, он во всем документе одинаков. За исключением заголовок делают немного больше размером

Смотрим пример:

4. Применяем стилистические эффекты.

— Анимация. Применяется для придания тексту оригинального отображения. (выделено зеленым цветом)

— Цвет выделения текста. Применяется для выделения наиболее важных участков текста. Аналог ручной работы это выделитель или маркер. Для выделения текста так же применяется «Заливка». (выделено красным цветом)

— Цвет текста. Так же применяется для выделения особо важных участков текста. А так же для придания тексту красочного вида. (выделено оранжевым цветом)

— Регистр. Буквы выделенного текста делает заглавными, строчными, а так же различные варианты написания с заглавной или строчной буквы в начале предложения. (выделено розовым цветом)

Смотрим пример:

Тэги изменения начертания шрифта

Создадим новый документ.

Пример:

<HTML>
<HEAD>
<TITLE>   Формулы </TITLE>
</HEAD>
<BODY>
<H3 ALIGN = “CENTER”>
Пример некоторых математических формул
</H3>
здесь будут записаны 2 математические формулы
<H3 ALIGN = “CENTER”>
Пример некоторых химических формул
</H3>
здесь будут записаны 2 химические формулы
</BODY>
</HTML>

Для строки «здесь будут записаны 2 математические формулы» установим курсивное начертание, для этого используем тэг .

Пример:

<I>
здесь будут записаны 2 математические формулы
</I>

А для строки «здесь будут записаны 2 химические формулы» установим жирное начертание, используя тэг .

Пример:

<B>
здесь будут записаны 2 химические формулы
</B>

Результат:

Тэг отображает шрифт в виде нижнего индекса. Текст при этом располагается ниже базовой линии остальных символов строки и уменьшенного размера.

Тэг отображает шрифт в виде верхнего индекса. Текст при этом располагается выше базовой линии остальных символов строки и уменьшенного размера.

Пример:

<HTML>
<HEAD>
<TITLE>   Формулы </TITLE>
</HEAD>
<BODY>
<H3 ALIGN = “CENTER”>
Пример некоторых математических формул
</H3>
<I>
здесь будут записаны 2 математические формулы <BR>
</I>
(a+b) <SUP> 2</SUP> =a<SUP> 2</SUP> +2*a*b+b<SUP> 2</SUP> <BR>
(a+b)*(a-b)=a<SUP> 2</SUP>-b<SUP> 2</SUP> <BR>
<H3 ALIGN = “CENTER”>
Пример некоторых химических формул
</H3>
<B>
здесь будут записаны 2 химические формулы
</B>
H<SUB> 2</SUB> O <BR>
H<SUB> 2</SUB> SO<SUB> 4</SUB>
</BODY>
</HTML>

Результат:

Единицы изменения viewport (окно просмотра)

CSS

.element-one {
  font-size: 100vh;
}

.element-two {
  font-size: 100vw;
}
.

Viewport-единицы, такие как vw и vh, позволяют устанавливать размер шрифта относительно длины или ширины окна просмотра:

1vw = 1% от ширины окна просмотра;
1vh = 1% от высоты окна просмотра.

То есть, если мы посмотрим на следующий пример:

CSS

.element {
  font-size: 100vh;
}
}

то увидим, что размер текста CSS всегда должен находиться на отметке в 100% ширины окна просмотра (50vh будет означать 50%, 15vh — 15% и так далее). В приведенном ниже демо попробуйте изменить высоту, и посмотрите, как растягивается шрифт:

vw-единицы отличаются тем, что позволяют указывать высоту символов, руководствуясь шириной окна просмотра. В приведенном ниже демо вам нужно будет изменить ширину окна браузера, чтобы увидеть изменения:

Эти единицы измерения поддерживаются следующими браузерами:

Chrome	Safari	Firefox	Opera	IE	Android	iOS
31+	7+	31+	27+	9+	4.4+	7.1+

В нашем распоряжении имеются еще две единицы измерения, основанные на размере окна просмотра. Первая позволяет вычислять значения vh и vw, и устанавливать свойству font-size минимальное значение, а vmax позволяет определить и установить, наоборот, максимальное значение.

Теги и

Тег уменьшает размер шрифта на единицу по сравнению с обычным текстом. В HTML размер шрифта измеряется в условных единицах от 1 до 7, средний размер текста, используемый по умолчанию, принят 3. Таким образом, добавление тега уменьшает текст на одну условную единицу. Тег <big> наоборот увеличивает размер шрифта на единицу по сравнению с обычным текстом.

HTML-код с тегами и <big>:

Пример: уменьшенный и увеличенный шрифт

Результат
HTML-код
Попробуй сам »

Внимание: Это чисто презентационный код, элемент удален в HTML5 и вы не должны больше им пользоваться. Вместо элемента веб — разработчики должны использовать CSS свойства.

Единица измерения em

CSS

.element {
  font-size: 2em;
}

Единица измерения em является относительной, и вычисляется в зависимости от CSS размера текста в родительском элементе. Это означает, что дочерние элементы всегда зависят от родительских. Например:

HTML

<div class="container">
  <h2>Заголовок</h2>
  <p>Какой-нибудь текст</p>
</div>

CSS

.container {
  font-size: 16px;
}

p {
  font-size: 1em;
}

h2 {
  font-size: 2em;
}

В приведенном выше примере у абзаца будет установлено значение font-size 16px, так как 1 x 16 = 16px, а в качестве размера текста HTML CSS заголовка будет использоваться 32px, так как 2 x 16 = 32px. Есть некоторое преимущество в том, чтобы указывать размер, ориентируясь на родительский элемент. Так мы можем оборачивать элементы в контейнеры и быть уверенными в том, что все дочерние элементы всегда будут относительны друг другу:

CSS Tutorial

CSS HOMECSS IntroductionCSS SyntaxCSS SelectorsCSS How ToCSS CommentsCSS Colors
Colors
RGB
HEX
HSL

CSS Backgrounds
Background Color
Background Image
Background Repeat
Background Attachment
Background Shorthand

CSS Borders
Borders
Border Width
Border Color
Border Sides
Border Shorthand
Rounded Borders

CSS Margins
Margins
Margin Collapse

CSS PaddingCSS Height/WidthCSS Box ModelCSS Outline
Outline
Outline Width
Outline Color
Outline Shorthand
Outline Offset

CSS Text
Text Color
Text Alignment
Text Decoration
Text Transformation
Text Spacing
Text Shadow

CSS Fonts
Font Family
Font Web Safe
Font Fallbacks
Font Style
Font Size
Font Google
Font Pairings
Font Shorthand

CSS IconsCSS LinksCSS ListsCSS Tables
Table Borders
Table Size
Table Alignment
Table Style
Table Responsive

CSS DisplayCSS Max-widthCSS PositionCSS OverflowCSS Float
Float
Clear
Float Examples

CSS Inline-blockCSS AlignCSS CombinatorsCSS Pseudo-classCSS Pseudo-elementCSS OpacityCSS Navigation Bar
Navbar
Vertical Navbar
Horizontal Navbar

CSS DropdownsCSS Image GalleryCSS Image SpritesCSS Attr SelectorsCSS FormsCSS CountersCSS Website LayoutCSS UnitsCSS SpecificityCSS !important

Свойства шрифта

CSS предоставляет несколько свойств для стилизации шрифтов, таких как: font-family, font-style, font-option, font-weight и font-size. В следующем разделе описывается каждое из этих свойств.

Семейство шрифтов (font-family)

Свойство CSS font-family позволяет вам установить приоритетный список имени семейства шрифтов для текстового содержимого выбранного элемента.

Свойство font-family может содержать несколько имен шрифтов в качестве резерва. Сначала идет название приоритетного шрифта, а затем любые шрифты, которые могли бы заменить первый, если он недоступен. Вы должны закончить список общим семейством шрифтов: с засечками (serif), без засечек (sans-serif), моноширинный (monospace), курсивный (cursive) и фэнтезийный (fantasy). Объявление семейства шрифтов может выглядеть так:

p {
  font-family: "Times New Roman", Times, serif;
}

Если имя семейства шрифтов содержит более одного слова, оно должно быть заключено в кавычки, такие как «Times New Roman», «Courier New», «Trebuchet MS» и т.д.

Стиль шрифта

блок 1

Свойство font-style устанавливает стиль шрифта. Возможные значения этого свойства: нормальное (normal), курсивное (italic) или наклонное (oblique).

p.one {
  font-style: normal;
}
p.two {
  font-style: italic;
}
p.three {
  font-style: oblique;
}

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

Свойство font-size устанавливает размер шрифта для текстового содержимого элемента.

Есть несколько способов указать значения размера шрифта, например, при помощи ключевых слов, пикселей (px) или em.

Установка размера шрифта с помощью ключевых слов

Установив размер шрифта при помощи ключевого слова в элементе body, вы можете установить относительный размер шрифта повсюду на странице, что дает вам возможность легко масштабировать шрифт. Абсолютный размер указывается с использованием одного из следующих ключевых слов: xx-small, x-small, small, medium, large, x-large, xx-large.

Относительный размер указывается с помощью одного из следующих ключевых слов: smaller, larger.

body {
  font-size: large;
}
h1 {
  font-size: larger;
}
p {
  font-size: smaller;
}

Однако этот способ не рекомендуется использовать. Давайте рассмотрим как можно установить размер шрифта при помощи px и em.

Установка размера шрифта в пикселях

Установка размера шрифта в пикселях (например, 12px, 16px и т.д.) является приоритетным, когда вам нужна точность до пикселей. Тем не менее, результаты могут варьироваться в разных браузерах, так как они используют разные алгоритмы для достижения аналогичного эффекта.

h1 {
  font-size: 24px;
}
p {
  font-size: 14px;
}

Заданные в пикселях размеры шрифта не позволяют пользователям менять их размер в настройках браузера. Например, пользователи с нарушением зрения могут захотеть установить размер шрифта больше указанного вами размера. Поэтому вам следует избегать использования значений в пикселях для размеров шрифта, если вы хотите создать дизайн который будет одинаково удобен для всех.

Установка размера шрифта с помощью Em

Единица em относится к размеру шрифта родительского элемента.

Размер значения em является динамическим. При определении свойства font-size, em равно размеру шрифта, который применяется к родительскому элементу.

Если вы установите размер шрифта 20px для элемента body, то 1em = 20px и 2em = 40px.

Если вы нигде не указали размер шрифта на странице, то будет использоваться размер, который установлен в браузере по умолчанию, обычно он составляет 16 пикселей. Итак, по умолчанию 1em = 16px, а 2em = 32px.

h1 {
  font-size: 2em; /* 32px/16px=2em */
}
p {
  font-size: 0.875em; /* 14px/16px=0.875em */
}

Толщина шрифта (weight)

Свойство font-weight указывает толщину или жирность шрифта.

Возможные значения свойства font-weight: normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900 и inherit.

p {
  font-weight: bold;
}

Большинство шрифтов доступны только в обычном и жирном шрифте. Если шрифт недоступен в указанной толщине, будет выбран альтернативный.

блок 3