font — style
Определяет начертание шрифта: обычное, курсивное или наклонное .
Пример
Скопировать ссылку «Пример» Скопировано
Попробуем выделить курсивом текст всего абзаца:
Текст ниже мы написали курсивом
Этот текст написан курсивом. А мог быть написан наклонным шрифтом, но вы всё равно бы это не отличили.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 — наклонное начертание, которое можно использовать, если у шрифта нет курсивного варианта начертания.
- 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; >
На практике
Скопировать ссылку «На практике» Скопировано
Дока Дог советует
Скопировать ссылку «Дока Дог советует» Скопировано
�� Не стоит писать большие части текста курсивом — это сильно усложняет чтение.
Курсив CSS
В прошлой статье мы обсуждали спецификацию выделения текста жирным шрифтом. В текущей статье мы поговорим о том, как выделить текст курсивом HTML. Как и в случае с жирным текстом, курсивный текст можно сделать тремя способами:
Рассмотрим все три варианта, как можно сделать курсив в HTML, обсудим тонкости этого вопроса и какие способы удобнее и правильнее использовать в тех или иных ситуациях.
Курсивный текст: тег
Тег i (italic), по аналогии с тегом b для жирного текста, служит для физического выделения курсивного текста (это означает, что изменяется только начертание текста). Применение тега i:
Конструктор сайтов "Нубекс"Таким образом, нужная часть текста помещается между тегами .
Курсивный текст: тег
Хотя тег i остается валидным, с точки зрения оптимизации сайта лучше использовать тег em для выделения логически важных участков текста. Это означает, что поисковые роботы учитывают важность текста, помещенного между тегами :
Конструктор сайтов "Нубекс"Конструктор сайтов «Нубекс»
Но не стоит забывать, что текст, заключенный в теги i и em, хоть и отображаются практически одинаково (во всех современных браузерах), по своей сути являеются не совсем идентичными, как уже отмечалось выше. Поэтому использовать теги нужно по мере необходимости: тегом em HTML обрамлять важные участки текста, а визуальное курсивное оформление применять с помощью тега i или CSS-стилей. Рассмотрим теперь использование CSS-стилей для курсивного выделения текста.
Курсивный текст силами CSS
Для установления стилей отображения шрифтов в CSS применяется свойство font-style, которое может принимать значения: oblique (наклонный текст), italic (курсив) и normal (обычный шрифт).
Стоит помнить о том, что курсивный шрифт и наклонный, по своей сути, не являются одним и тем же. Курсив — это особый шрифт, который является аналогом рукописного текста, а наклонный формируется посредством наклона обычного шрифта вправо.
Применение атрибута font-style на практике:
Курсив с помощью CSS - "Нубекс" .nubex1 < font-style: italic; >.nubex2 Наши сайты - это, действительно, огромный шаг в веб-разработке.
Мы делаем по-настоящему качественные сайты.
Но необходимо помнить, что некоторые браузеры текст со свойством font-style: oblique; могут интерпретировать не как наклонный текст, а как курсивный.
font-style
Курсив — это вид начертания, при котором символы написаны под наклоном и иногда имеют дополнительные засечки.
В CSS можно задать курсивный шрифт, используя свойство font-style со значением italic . Однако не во всех шрифтах предусмотрен курсив, и вместо него можно увидеть лишь наклонные символы. Такие символы также наклонены вправо, но при этом браузер не использует специально разработанный набор символов, а просто наклоняет стандартный шрифт, то есть визуально это будет выглядеть как просто наклонный текст.
Чтобы получить наклонный текст, вы также можете использовать свойство font-style , задав для него значение oblique .
Если разница между наклонным текстом и курсивными символами для вас не очень велика, просто выберите один из этих вариантов. Если же она имеет для вас значение, придется протестировать различные сочетания шрифтов и браузеров для достижения лучшего результата.
| Значение по умолчанию: | normal |
|---|---|
| Применяется: | ко всем элементам |
| Анимируется: | нет |
| Наследуется: | да |
| Версия: | CSS1 |
| Синтаксис JavaScript: | object.style.fontStyle=»italic» |
Синтаксис
font-style: normal|italic|oblique|inherit;
Значения свойства
| Значение | Описание |
|---|---|
| normal | Браузер отображает стандартный шрифт. |
| italic | Устанавливает курсивный шрифт. |
| oblique | Определяет наклонный текст. |
| inherit | Указывает, что значение наследуется от родительского элемента. |
font-style
Определяет начертание шрифта — обычное, курсивное или наклонное. Когда для текста установлено курсивное или наклонное начертание, браузер обращается к системе для поиска подходящего шрифта. Если заданный шрифт не найден, браузер использует специальный алгоритм для имитации нужного вида текста. Результат и качество при этом могут получиться неудовлетворительными, особенно при печати документа.
Синтаксис
font-style: normal | italic | oblique | inherit
Значения
normal Обычное начертание текста. italic Курсивное начертание. oblique Наклонное начертание. Курсив и наклонный шрифт при всей их похожести не одно и то же. Курсив это специальный шрифт имитирующий рукописный, наклонный же образуется путем наклона обычных знаков вправо. inherit Наследует значение родителя.
HTML5 CSS2.1 IE Cr Op Sa Fx
font-style Duis te feugifacilisi
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Результат данного примера показан на рис. 1.
Рис. 1. Применение свойства font-style
Объектная модель
[window.]document.getElementById(» elementID «).style.fontStyle
Браузеры
Internet Explorer до версии 7.0 включительно не поддерживает значение inherit .
Браузеры текст со значением oblique всегда отображают как курсив ( italic ).