Как изменить толщину шрифта css

Сделать текст насыщенным можно как в разметке, так и в стилях. Рассмотрим, как изменить насыщенность текста с помощью CSS, и узнаем, в чём плюсы этого метода.

Как выделить текст в CSS

Определите, какой участок текста необходимо выделить и используйте CSS-свойство font-weight, которое отвечает за толщину шрифта.

Часто встречающиеся значения:

• 400 или normal — обычный шрифт, значение по умолчанию;
• 700 или bold — полужирный шрифт.

Например:

<p class="boldtext">Красота текста — это не только хороший дизайн 
и качественный контент, но и правильная вёрстка текста, 
и единообразие. Под единообразием мы имеем в виду, что редакция выработала общее представление о строчной вёрстке текста 
и придерживается его.</p>

.boldtext {
  font-weight: 700;
}

👉 Красота текста — это не только хороший дизайн и качественный контент, но и правильная вёрстка текста, и единообразие.
Под единообразием мы имеем в виду, что редакция выработала общее представление о строчной вёрстке текста и придерживается его.

Весь текст, размеченный классом boldtext, станет жирным.

Свойство font-weight может принимать одно из девяти числовых вариантов насыщенности:

• 100: Thin;
• 200: Extra Light (Ultra Light);
• 300: Light;
• 400: Normal;
• 500: Medium;
• 600: Semi Bold (Demi Bold);
• 700: Bold;
• 800: Extra Bold (Ultra Bold);
• 900: Black (Heavy).

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

Но в большинстве системных шрифтов есть только два варианта толщины: обычный normal (400) и полужирный bold (700). Поэтому остальные значения свойства используются реже.

Кроме числовых значений, у font-weight есть ещё два относительных значения: bolder и lighter. Они делают шрифт жирнее и тоньше, чем текущее или унаследованное значение.

Выделение отдельных предложений и слов

Чтобы выделить отдельные фразы или слова жирным шрифтом, нужные участки текста разметьте отдельными тегами с использованием классов. Например:

<p>Как и многие языки программирования, медиавыражения 
 <span class="bold">поддерживают логические операторы</span>, поэтому мы можем комбинировать выражения.</p>

И затем в стилях пропишите:

.bold {
  font-weight: 700;
}

Теперь все слова, обёрнутые в тег span с классом bold, станут жирными.

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

Эффективно и доступно

Что, если весь жирный текст сразу разметить в файле HTML? Для этого же есть специальные теги <strong> и <b>.

Теги <b> и <strong> используют в особых случаях, при этом важно знать несколько моментов:

• Тег <b> предназначен для выделения текста с целью привлечения к нему внимания, но без придания ему особой важности. Использовать его нужно только в случае, когда остальные теги выделения не подходят.
• Тег <strong> указывает на важность отмеченного текста и используется для выделения предупреждений или части документа, которую пользователь должен увидеть раньше остального.

В каких случаях предпочтительно использовать свойство font-weight:

• Для совместной работы над проектом. Если кто-то из команды захочет изменить стиль текста, ему не придётся искать и изменять каждый элемент HTML. Нужно будет просто изменить стили шрифтов в CSS.
• Для обеспечения доступности. Скринридер при чтении сайта учитывает насыщенность шрифта. Скринридер выделяет слова с тегом <strong> интонационно, в отличие от простого выделения с помощью <b>. Если чтение с интонацией не нужно, а важно лишь расставить визуальные акценты в тексте, то лучше использовать свойство
  font-weight.

Ещё по теме

• Как подключить и оптимизировать нестандартные шрифты
• Как убрать подчёркивание ссылок
• Как сделать список без точек в HTML

Главная » Основы CSS » Шрифты в CSS. Основы CSS для начинающих. Урок №6

Шрифты в CSS. Основы CSS для начинающих. Урок №6

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

Стиль шрифта в CSS

Свойство «FONT-STYLE»
Если вы захотели поменять стиль шрифта, а именно, сделать текст курсивом или просто наклонным, то воспользуйтесь правилом «font-style».

Значение:

• normal — нормальный шрифт;
• italic — курсив;
• oblique — наклонный шрифт.

Пример:

h1{
font-style:normal; /* нормальный шрифт */
}
h2{
font-style:italic ; /* курсив */
}
h3{
font-style:oblique; /* наклонный шрифт */
}

Результат:

Толщина шрифта в CSS

Свойство «FONT-WEIGHT»
Если вы хотите сделать шрифт жирным, используйте правило «font-weight».

Значение:

• normal — нормальная жирность
• lighter — светлое начертание
• bold — полужирный
• bolder– жирный

Пример:

h1{
font-weight: normal; /* нормальная жирность */
}
h2{
font-weight: lighter; /* светлое начертание */
}
h3{
font-style:bold; /* полужирный */
}
p {font-weight:bolder; /* жирный */}

Результат:

Можно указать толщину шрифта и обычными цифрами от 100 до 900.

Значение:

• 100 — светлый шрифт,
• 900 — самый жирный

Пример:

p {font-weight:900; /* жирный */}

Результат:

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

Свойство «FONT-SIZE»
Шрифт можно менять по размеру. Для этого используйте правило «font-size».

Значение задается в «px» и «%».

Пример:

h1{font-size: 120%; /* размер шрифта 120% */}
p {font-size: 36px; /* размер шрифта 36px */}

Результат:

Шрифты в CSS

Свойство «FONT-FAMILY»
На каждом компьютере установлены стандартные шрифты, такие как «Times New Roman», «Arial» или «Verdana». Выбор шрифта зависит от вкуса каждого, но потом он влияет на то, как внешне будет выглядеть сайт.
Чтобы указать шрифт, воспользуйтесь правилом «font-family».

Пример:

h1 {
font-family: Verdana; /* шрифт Verdana*/
}

Можно задавать в правилах несколько шрифтов. Это на тот случай, если у пользователя нет первого шрифта, тогда подключится второй.

Пример:

h1
{
font-family: "Times New Roman", Georgia, Verdana; /*шрифты*/
}

Обратите внимание, шрифт ««Times New Roman»» написан в кавычках (» «).
В кавычки берутся те шрифты, в которых название состоит из двух и более слов и есть пробел между словами.

Семейство шрифтов
Можно в правило «font-family» прописать и целое семейство шрифтов.
Наверное, вы меня не совсем поняли. Сейчас попробую объяснить.
Существует множество видов шрифтов, которые образуют так называемые семейства.
Существует всего пять семейств шрифтов:

Пример:

h1 {
font-family: cursive; /*шрифты*/
}

А можно и вот так:

h1 {
font-family:"Times New Roman", Georgia, Serif; /*шрифты*/
}

Подключение нестандартных шрифтов в CSS

Свойство «@FONT-FACE»
Бывает такой момент, что вам просто необходимо установить на сайт нестандартный шрифт, то есть, шрифт, который не установлен по умолчанию у пользователя на компьютере.
Правило «@font-face» позволяет нам импортировать внешний файл шрифтов в документ. После импортирования, мы можем использовать нестандартный шрифт как обычный через правило «font-family».
Залейте любой нестандартный шрифт формата «ttf» в папку вашего сайта рядом с файлом css, это для того, чтобы вы не запутались и правильно написали путь к шрифту. Для примера я возьму нестандартный шрифт с именем «DS-UncialFunnyHand-Medium.ttf».
Вот пример подключения нестандартного шрифта.

@font-face
{
font-family: DS-UncialFunnyHand-Medium; /* Имя шрифта */
src: url(DS-UncialFunnyHand-Medium.ttf); /* Путь к файлу со шрифтом */
}

Разъяснения:

• font-family: …;— здесь пишем имя шрифта;
• src: url(…); —  тут указываем путь к файлу со шрифтом который будет загружаться с сайта.

Вот полный пример с подключением нестандартного шрифта и его использование.

Пример:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>подключение нестандартных шрифтов</title>
<style>
@font-face
{
font-family: DS-UncialFunnyHand-Medium; /* Имя шрифта */
src: url(DS-UncialFunnyHand-Medium.ttf); /* Путь к файлу со шрифтом *
}

p{
font-family: "DS-UncialFunnyHand-Medium"; /* используем нестандартный шрифт */
}
</style>
</head>
<body>
<p>нестандартный шрифт</p>
</body>
</html>

Результат:

Жду вас на следующих уроках.
Удачи!