В этой статье мы рассмотрим, как изменить начертание шрифта в 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>