Начертание шрифтов в HTML. Как сделать текст жирным, курсивным или зачеркнутым?

начертание шрифтов в html. как сделать текст
   жирным, курсивным или зачеркнутым?

Что такое шрифт и его начертание?

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

Шрифт — способ графического отображения букв и знаков из определенного доступного набора. Этот способ отображения должен формировать единую стилистическую систему. В качестве примера посмотрите на один из самых распространенных шрифтов «Times New Roman», отличающийся острыми засечками на концах букв.

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

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

Курсивный и жирный текст

Для выделения текста курсивом в HTML существует элемент <i>. Он является строковым, поэтому не имеет собственной длины и ширины, а размер занимаемого им пространства определяется обрамленным текстом. Весь текст, помещенный между открывающим тегом <i> и закрывающим </i>, поменяет начертание своего шрифта на курсив (разг. Наклонный).

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Пример использования курсивного шрифта</title>
    </head>
    <body>
        <p>Часть данного текста будет <i>наклонной</i></p>
    </body>
</html>

В HTML также есть способ сделать участок текста жирным. Для этого используется элемент <b>. Как можно догадаться он также является строковым элементом. Если поместить часть текста между открывающим тэгом <b> и закрывающим </b>, то он поменяет начертание своего шрифта на жирный.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Пример использования жирного шрифта</title>
    </head>
    <body>
        <p>Этот был <b>очень хороший</b> и светлый день</p>
    </body>
</html>

Заметка
Вы можете суммировать эффекты различных элементов за счет их вложенности друг в друга. Например, разметка «<i><b>Пример вложенности</b></i>» сделает выделенный текст жирным и курсивным одновременно.

Зачеркнутый и подчеркнутый текст

Зачеркивание и подчеркивание в HTML реализуется за счет двух элементов: <s> - зачеркивание текста, <u> - подчеркивание текста. Принцип их работы полностью схож с примерами, приведенными выше. Весь текст, заключенный между их открывающим и закрывающими тегами, станет подчеркнутыми или зачеркнутым, в зависимости от используемого элемента.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Пример зачеркнутого и подчеркнутого текста</title>
    </head>
    <body>
        <h1>Список дел на сегодня:</h1>
        <p><s>Погладить одежду перед уходом на работу.</s></p>
        <p><u>Разнести деловую корреспонденицю сотрудникам.</u></p>
    </body>
</html>

Последние публикации