Войти
Регистрация

Жирный шрифт и курсив в CSS

Жирный шрифт и курсив в CSS

Продолжаем форматировать текст с помощью CSS и на этот раз разберем свойства для текста жирным и курсивным написанием.

В HTML существуют теги, которые делают шрифт жирным, это <b> и <strong>, а также курсивные теги <i> и <em>, если забыли, то можете повторить в теме HTML-теги для текста

Однако эти теги устанавливают начертание по умолчанию и если необходимо будет Вам обратно текст сделать обычным, не жирным или не курсивом, то необходимо будет все файлы редактировать и удалять эти теги. Правда, трудоемко?

Для этого в CSS есть свойства font-weight и font-style:

Свойство font-weight принимает разные значения, в частности значение bold, которое задает жирный шрифт:

p {
   font-weight: bold;
}

Также степень насыщенности шрифта можно задавать числом: 100, 200, 300, 400, 500, 600, 700, 800 и 900.

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

Допустим, есть шрифт Akrobat, я его иногда использую для дизайна, который имеет 8 степеней насыщенности. Каждая степень насыщенности это отдельный файл шрифта. В теме "Подключение шрифтов в CSS" я показывал как подключать шрифт. Тут также подключаем все файлы отдельно в селекторе @font-face. Для примера возьмем только 4 степени насыщенности у этого шрифта и подключим:

@font-face {
   font-famyly: Akrobat;
   font-weight: 300;
   src: url("../fonts/akrobat/Akrobat-Light.eot") format("eot"),
        url("../fonts/akrobat/Akrobat-Light.ttf") format("ttf"),
        url("../fonts/akrobat/Akrobat-Light.woff") format("woff"),
        url("../fonts/akrobat/Akrobat-Light.woff2") format("woff2");

}
@font-face {
   font-famyly: Akrobat;
   font-weight: 400;
   src: url("../fonts/akrobat/Akrobat-Regular.eot") format("eot"),
        url("../fonts/akrobat/Akrobat-Regular.ttf") format("ttf"),
        url("../fonts/akrobat/Akrobat-Regular.woff") format("woff"),
        url("../fonts/akrobat/Akrobat-Regular.woff2") format("woff2");

}
@font-face {
   font-famyly: Akrobat;
   font-weight: 700;
   src: url("../fonts/akrobat/Akrobat-Bold.eot") format("eot"),
        url("../fonts/akrobat/Akrobat-Bold.ttf") format("ttf"),
        url("../fonts/akrobat/Akrobat-Bold.woff") format("woff"),
        url("../fonts/akrobat/Akrobat-Bold.woff2") format("woff2");

}
@font-face {
   font-famyly: Akrobat;
   font-weight: 900;
   src: url("../fonts/akrobat/Akrobat-Black.eot") format("eot"),
        url("../fonts/akrobat/Akrobat-Black.ttf") format("ttf"),
        url("../fonts/akrobat/Akrobat-Black.woff") format("woff"),
        url("../fonts/akrobat/Akrobat-Black.woff2") format("woff2");

}

Как видите, я подключил 4 файла шрифта. У каждого в свойстве font-family я указал одно название, а в свойстве font-weight указал степень насыщенности. Именно по этому свойству мы и будем менять "толщину" шрифта. Можно указать хоть что, но лучше писать так, от 100 до 900.

Далее в свойстве src указан путь к файлу в 4 форматах, для разных браузеров.

Теперь, чтобы задать шрифт и его толщину пишем:

p {
   font-family: Akrobat;
   font-weight: 300;
}

Результат: Шрифт толщина 300

p {
   font-family: Akrobat;
   font-weight: 400;
}

Результат: Шрифт толщина 400

p {
   font-family: Akrobat;
   font-weight: 700;
}

Результат: Шрифт толщина 700

p {
   font-family: Akrobat;
   font-weight: 900;
}

Результат: Шрифт толщина 900

И последнее, это курсив

За данный способ начертания отвечает свойство font-style и принимает значение italic:

p {
   font-family: Akrobat;
   font-weight: 900;
   font-style: italic;
}

Получаем: Шрифт толщина 900 + курсив

Не обязательно подключать шрифты без необходимости, т.к. некоторые стандартные встроенные шрифты также имею числовые степени насыщенности. Например шрифт Arial, имеет степени 300, 700 и 900

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

С уважением, Самвел Погосов

Рекомендую к изучению мой бесплатный видеокурс по HTML и CSS для начинающих с подробными видеоуроками и заданиями: Перейти к видеокурсу

Комментарии к статье

Бесплатный видеокурс

HTML и CSS для начинающих

Практический и бесплатный курс по основам HTML и CSS для начинающих. С этим курсом Вы сможете изучить базовые понятия верстки и стилей CSS. Курс с практическими уроками и заданиями, все видеоуроки последовательны и увлекательны. Я научу Вас всему, чему научился сам.

Получить курс
Опрос

Для чего Вы изучаете HTML и CSS?