Как изменять начертание шрифта в css

В этой статье мы рассмотрим, как изменить начертание шрифта в css: жирный, наклонный, подчеркнутый. Начертание и внешний вид шрифта в css задается внутри атрибута style следующими свойствами, описанными ниже.

Содержание статьи

Font-style (начертание шрифта)

Свойство font-style определяет начертание шрифта в css — обычный или наклонный(курсив) и может иметь следующие значения:

normal — обычный;

italic — курсив, наклонный.

Для того чтобы изменить начертание шрифта в css на наклонный(курсив) нужно у атрибута style указать свойство font-style: italic. Пример, как сделать шрифт наклонным: <span style="font-style:italic">Данный текст с наклоном</span>.


Результат в браузере
Пример кода с наклонным шрифтом html

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>Тестовая страница</title>
</head>
<body>
<span style="font-style:normal">Пример фразы normal</span> <br>
<span style="font-style:italic">Пример фразы italic</span> <br>
</body>
</html>

Font-weight(жирность шрифта)

Свойство font-weight задает жирность шрифта и может иметь следующие значения:

normal — нормальный(нежирный);

bold — жирный.

2 способ как сделать шрифт жирным в html без css

В html есть специальные теги <b> и </b> которые делают находящийся внутри текст жирным. Результат применения тега <b> аналогичен свойству font-weight:bold.

Редко встречаемые значения свойства font-weight(есть не у всех шрифтов)

— lighter, 100, 200, 300, 400, 500. В случае отсутствия используется normal;

— bolder, 600, 700, 800, 900. В случае отсутствия используется bold.

Пример, как сделать шрифт жирным: <span style="font-weight:bold">жирное слово 1</span> и <b>жирное слово 2</b>.


Результат в браузере
Полный пример кода html, как изменить жирность шрифта

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>Тестовая страница</title>
</head>
<body>
<span style="font-weight:normal">Пример фразы, значение normal</span> <br>
<span style="font-weight:bold">Пример фразы, значение bold</span> <br>
<b>Пример фразы, тег b</b> <br>
</body>
</html>

Text-decoration(оформление текста, украшение)

Свойство text-decoration имеет следующие основные значения:

line-through — перечеркивание текста;

underline — подчеркивание текста;

none — отмена всех эффектов, в том числе и заданное по умолчанию подчеркивание у ссылок.

Пример, как сделать шрифт подчеркнутым: Предложение с <span style="text-decoration:underline">подчеркнутым текстом</span>.


Результат в браузере
Полный пример кода html(Подчеркнутый и перечеркнутый шрифты)

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>Тестовая страница</title>
</head>
<body>
<span style="text-decoration:underline">Подчеркнутый текст</span> <br>
<span style="text-decoration:line-through">Перечеркнутый текст</span> <br>
<span style="text-decoration:none">Обычный текст</span> <br>
</body>
</html>




© 2007-2024 Студия web дизайна «Webdeco» - Разработка сайтов | Продвижение сайтов | Статьи | Портфолио | Отзывы | Клиенты | Контакты