Наклон текста

Наклон определяется сдвигом шрифта на определённый угол. Различают два типа наклона: просто наклонный шрифт (oblique) и курсив (italic). Курсивный шрифт представляет собой не просто наклон отдельных символов, для шрифтов с засечками это полная переделка под новый стиль, имитирующий рукописный. Следует отметить, что хотя браузеры и различают тип наклона italic и oblique, при этом они отображают текст как курсив.

Для создания курсивного текста применяются элементы <i> и <em>, а также стилевое свойство font-style. Следует отметить, что <i> и <em> несмотря на сходство результата в браузере, не совсем эквивалентны и заменяемые. Первый элемент <i> (сокращение от англ. слова italic — курсив) — является элементом для физической разметки и устанавливает курсивный текст, а <em> (сокращение от англ. emphasis — выделение, акцент) — элементом логической разметки и определяет важность помеченного текста. Такое разделение элементов на логическое и физическое форматирование изначально предназначалось чтобы сделать HTML универсальным, в том числе не зависящим от устройства вывода информации. Теоретически, если воспользоваться, например, речевым браузером, то текст, оформленный с помощью <i> и <em>, будет отмечен по-разному. Однако получилось так, что в популярных браузерах результат использования этих элементов равнозначен.

Чтобы различия были более заметны, добавим несколько классов с разным цветом текста (пример 1). Так мы не только сделаем акцент на выбранном тексте, но и выделим его визуально.

Пример 1. Изменение цвета текста

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Элемент em</title>
  <style>
   .error { color: #d50019; } 
   .info { color: #006cc9; } 
   .success { color: #0f9400; } 
  </style>
 </head>
 <body>
  <p>Варианты текста: <em class="success">для успеха</em>, 
  <em class="info">для информации</em>, 
  <em class="error">для ошибок</em></p>
 </body>
</html>

Результат примера показан на рис. 1.

Вид текста, оформленного через em, в браузере

Рис. 1. Вид текста, оформленного через <em>, в браузере

font-style определяет начертание шрифта — normal (обычное), italic (курсивное) или oblique (наклонное), как показано в примере 2. Когда для текста установлено курсивное или наклонное начертание, браузер обращается к системе для поиска подходящего шрифта. Если заданный шрифт не найден, браузер использует специальный алгоритм для имитации нужного вида текста. Результат и качество при этом могут получиться неудовлетворительными, особенно при печати документа.

Пример 2. Курсивный и наклонный текст

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Курсивный и наклонный текст</title>
  <style>
   .italic { font-style: italic; } /* Курсивный текст */
   .oblique { font-style: oblique; } /* Наклонный текст */
  </style>
 </head>
 <body>
  <p class="italic">Курсивный текст хорошо использовать для цитат и прямой речи.</p>
  <p class="oblique">Наклонный шрифт пригодится для создания ненавязчивого выделения в тексте.</p>
 </body>
</html>

Курсив и наклонный шрифт при всей их похожести — не одно и то же. Курсив — это специальный шрифт, напоминающий рукописный, наклонный же образуется путём наклона обычных знаков. Несмотря на то, что между указанными начертаниями существует различие, браузеры, как правило, отображают их одинаково (рис. 2).

Курсивный и наклонный текст в браузерах отображается одинаково

Рис. 2. Курсивный и наклонный текст в браузерах отображается одинаково

Автор и редакторы

Автор: Влад Мержевич
Последнее изменение: 05.09.2017
Редакторы: Влад Мержевич
Курс по вёрстке сайта на CSS Grid