font-style — CSS — Дока

  1. Кратко
  2. Пример
  3. Как понять
  4. Как пишется
  5. На практике
    1. Дока Дог советует

Кратко

Скопировано

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

Пример

Скопировано

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

<body>  <h2>Текст ниже мы написали курсивом</h2>  <p>    Этот текст написан курсивом. А мог быть написан наклонным шрифтом, но вы всё    равно бы это не отличили.  </p></body>
          <body>
  <h2>Текст ниже мы написали курсивом</h2>
  <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 — наклонное начертание, которое можно использовать, если у шрифта нет курсивного варианта начертания.
  • oblique -20deg — наклонное начертание с указанием угла наклона. Допустимо указать от -90deg до 90deg. При этом шрифт будет наклоняться вперёд или назад на указанное количество градусов. Почти нигде не поддерживается, уточняйте поддержку на Can I use перед использованием.
.normal {  font-style: normal;}.italic {  font-style: italic;}.oblique {  font-style: oblique;}.oblique-deg {  font-style: oblique -20deg;}
          
 
.normal {
  font-style: normal;
}
.italic {
  font-style: italic;
}
.oblique {
  font-style: oblique;
}
.oblique-deg {
  font-style: oblique -20deg;
}

На практике

Скопировано

Дока Дог советует

Скопировано

🛠 Не стоит писать большие части текста курсивом — это сильно усложняет чтение.

Если вы нашли ошибку, отправьте нам пул-реквест!

Во время отправки формы что-то пошло не так. Попробуйте ещё раз?

←

@font-face

ctrl + alt + ←

→

font-weight

ctrl + alt + →

CSS-свойство font-style устанавливает,следует ли стилизовать шрифт font-family нормальным,курсивным,наклонным начертанием.

Свойство CSS font-style устанавливает, следует ли стилизовать шрифт с обычным, курсивом или наклонным font-family из его семейства font-family .

Try it

Курсивные грани шрифтов, как правило, имеют курсивный характер, обычно используют меньше горизонтального пространства, чем их нестандартные аналоги, в то время как наклонные грани обычно представляют собой просто наклонные версии обычного грани. Когда указанный стиль недоступен, и курсивные, и наклонные грани имитируются путем искусственного наклона глифов обычного грани (используйте управление font-synthesis для управления этим поведением).

Syntax

font-style: normal;
font-style: italic;
font-style: oblique;
font-style: oblique 10deg;
/ * Глобальные значения * /
font-style: inherit;
font-style: initial;
font-style: revert;
font-style: revert-layer;
font-style: unset;

Свойство font-style указывается как одно ключевое слово, выбранное из списка значений ниже, который может дополнительно включать угол, если ключевое слово является oblique .

Values

normal

Выбирает шрифт, который классифицируется как

normal в font-family .

italic

Выбирает шрифт, который классифицируется как italic . Если курсивная версия лица недоступна, вместо oblique используется классифицированная как наклонная . Если ни один не доступен, стиль искусственно моделируется.

oblique

Выбирает шрифт, который классифицируется как oblique . Если косой версии лица нет, вместо italic используется курсив . Если ни один не доступен, стиль искусственно моделируется.

oblique<angle>

Выбирает шрифт, классифицируемый как

oblique , и дополнительно указывает угол наклона текста. Если в выбранном семействе шрифтов доступны одна или несколько наклонных граней, выбирается та, которая наиболее точно соответствует указанному углу. Если наклонные грани недоступны, браузер синтезирует наклонную версию шрифта, наклоняя нормальное начертание на указанную величину. Допустимые значения: от -90deg до 90deg градусов включительно. Если угол не указан, используется угол 14 градусов. Положительные значения наклонены к концу строки, а отрицательные значения наклонены к началу.

Как правило, для требуемого угла 14 градусов или более предпочтительны более крупные углы; в противном случае предпочтительны меньшие углы ( точный алгоритм см. в разделе соответствия шрифтов спецификации ).

Variable fonts

Переменные шрифты могут обеспечить точный контроль над тем, насколько наклонная грань наклонена. Вы можете выбрать это, используя модификатор <angle> для oblique ключевого слова.

Для переменных шрифтов TrueType или OpenType вариант "slnt" используется для реализации изменяющихся углов наклона для косой, а вариант "ital" со значением 1 используется для реализации значений курсива.

Смотрите font-variation-settings .

Примечание. Чтобы приведенный ниже пример работал, вам понадобится браузер, поддерживающий синтаксис CSS Fonts Level 4, в котором font-style: oblique может принимать <angle> . Демонстрация загружается со font-style: oblique 23deg; . Измените значение, чтобы увидеть изменение наклона текста.

Accessibility concerns

Большие участки текста набор с font-style значения italic может быть трудным для людей с когнитивными проблемами , такими как дислексии , чтобы читать.

  • MDN Понимание СППН,Руководящий принцип 1.4 пояснения
  • W3C Понимание WCAG 2.1

Formal definition

Initial valuenormal
Applies toвсе элементы. Это также относится к ::first-letter и ::first-line .
Inheritedyes
Computed valueas specified
Animation typediscrete

Formal syntax

font-style =   normal                           |  italic                           |  oblique <angle [-90deg,90deg]>?

Examples

Font styles

.
 
 normal {
  font-style: normal;
}
.italic {
  font-style: italic;
}
.oblique {
  font-style: oblique;
}

Specifications

Specification
Модуль шрифтов CSS, уровень 4
# font-style-prop

Browser compatibility

DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox для AndroidOpera AndroidSafari на IOSSamsung Internet
font-style

1

12

1

До Firefox 44 oblique не отличался от italic .

4

7

1

4.4

18

4

До Firefox 44 oblique не отличался от italic .

10.1

1

1.0

oblique-angle

No

No

61

No

No

No

No

No

61

No

No

No

See also

  • font-family
  • font-weight
  • Фундаментальный стиль текста и шрифта

CSS

  • font-size-adjust

    Свойство CSS font-size-adjust устанавливает размер строчных букв относительно текущего (определяющего верхний регистр Свойство полезно,поскольку разборчивость шрифтов,

  • font-stretch

    Свойство CSS font-stretch выбирает нормальное, сжатое, расширенное начертание из. Это свойство может быть указано как одно ключевое значение. <percentage> Указывает

  • font-synthesis

    Свойство font-synthesis CSS управляет тем,какие отсутствующие шрифты,жирный,курсив или мелкий шрифт,могут быть синтезированы браузером.

  • font-variant

    Свойство сокращения CSS font-variant позволяет задавать варианты для вариантов. Вы также можете задать значения font-variant для CSS уровня 2 (редакция 1),(это обычное значение).

  • 1
  • …
  • 512
  • 513
  • 514
  • 515
  • 516
  • …
  • 857
  • Next

Как выделить текст курсивом в CSS?

< html lang = "en" >

   

< head >

     < мета кодировка = "UTF-8" />

9  

0008 < meta http-equiv = "X-UA-Compatible" content = "IE=edge" />

   

     < Meta Имя = "Viewport" Содержание =

"Ширина = ширина устройства, начальная масштаба = 1,0" />

9. 0007

< Стиль >

.GFG {

Font-Style: ITALIC;

             размер шрифта: 24 пикселя;

             поле: 10 пикселей;

             отступ: 2 пикселя;

             цвет: черный;

         }

     style >

head >

   

< body >

     < h3 >

         GeeksForGeeks | Информатика

         Portal for Geeks

     h3 >

   

     < p class = "gfg" >

         Эта платформа была разработана для 

         каждого гика, желающего расширить свои

         знаниями, делитесь своими знаниями и 

         готовы взяться за работу своей мечты. У нас

есть миллионы статей, Live As

, а также онлайн -курсы, тысячи из

и многое другое для

Geek внутри.

     p >

   

     < p class = "geeks" >

         Thank You for choosing and поддерживает нас!

P >

Body >

 

html >

Курсив | CSS | CodeBasics

Курсив часто используется для выделения цитат или терминов. В отличие от изменения толщины, курсив позволяет выделить часть текста, но не выделить его, чтобы он сразу стал более заметным.

Чтобы изменить стиль шрифта, используйте свойство font-style , которое может принимать одно из следующих значений:

  • нормальный - обычный вывод текста.
  • курсив - курсив
  • наклонный - курсив

Текст с обычным шрифтом

Текст с курсивом

Текст с наклонным шрифтом

Обратите внимание, что текст со значением курсив и текст со значением наклон могут выглядеть совершенно одинаково. Так в чем здесь смысл? Значение italic ищет специальную курсивную версию шрифта, а наклонный просто систематически наклоняет символы в тексте. Не все шрифты имеют отдельную версию для курсива, поэтому визуально оба значения будут выглядеть одинаково.

Используйте курсив для создания курсива - это наиболее распространенный вариант

 
Курсив

 
 . курсив {
  стиль шрифта: курсив;
}

Курсив

Добавьте абзац в редактор с классом, установленным на , курсив, тип и установите шрифт на , наклонный . Добавьте стили в тег