font-style

Время чтения: меньше 5 мин

Кратко

Секция статьи "Кратко"

Определяет начертание шрифта: обычное, курсивное или наклонное.

Пример

Секция статьи "Пример"

Попробуем выделить курсивом текст всего абзаца:

        
          
          <body>  <h1>Текст ниже мы написали курсивом</h1>  <p>    Этот текст написан курсивом. А мог быть написан наклонным шрифтом, но вы всё    равно бы это не отличили.  </p></body>
          <body>
  <h1>Текст ниже мы написали курсивом</h1>
  <p>
    Этот текст написан курсивом. А мог быть написан наклонным шрифтом, но вы всё
    равно бы это не отличили.
  </p>
</body>

        
        
          
        
      
        
          
          body {  font-family: "Roboto", sans-serif;}p {  font-style: italic;}
          body {
  font-family: "Roboto", sans-serif;
}
p {
  font-style: italic;
}

        
        
          
        
      
Открыть демо в новой вкладке

Как это понять

Секция статьи "Как это понять"

У большинства шрифтов есть несколько вариантов написания: стандартный, курсивный или жирный. Чтобы задать курсивное написание, используй font-style: italic.

Ещё есть наклонный шрифт, который задаётся через font-style: oblique. Он очень похож на курсив, но по сути, это его имитация, которую используют, если у выбранного шрифта нет курсивного написания. Нужно помнить, что oblique может выглядеть хуже по качеству, чем курсивный шрифт. Это особенно заметно при печати страницы.

Как пишется

Секция статьи "Как пишется"

Для font-style можно выбрать одно из четырёх значений:

  • normal — обычное начертание текста (значение по умолчанию).
  • italic — курсивное начертание.
  • oblique — наклонное начертание, которое можно использовать, если у шрифта нет курсивного варианта начертания.
        
          
          .normal {  font-style: normal;}.italic {  font-style: italic;}.oblique {  font-style: oblique;}
          .normal {
  font-style: normal;
}

.italic {
  font-style: italic;
}

.oblique {
  font-style: oblique;
}

        
        
          
        
      

На практике

Секция статьи "На практике"