font-style | htmlbook.ru

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
6.0+8.0+1.0+3.5+1.0+1.0+1.0+1.0+

Краткая информация

Версии CSS

CSS 1CSS 2CSS 2.1CSS 3

Описание

Определяет начертание шрифта — обычное, курсивное или наклонное. Когда для текста установлено курсивное или наклонное начертание, браузер обращается к системе для поиска подходящего шрифта. Если заданный шрифт не найден, браузер использует специальный алгоритм для имитации нужного вида текста. Результат и качество при этом могут получиться неудовлетворительными, особенно при печати документа.

Синтаксис

font-style: normal | italic | oblique | inherit

Значения

normal
Обычное начертание текста.
italic
Курсивное начертание.
oblique
Наклонное начертание. Курсив и наклонный шрифт при всей их похожести не одно и то же. Курсив это специальный шрифт имитирующий рукописный, наклонный же образуется путем наклона обычных знаков вправо.
inherit
Наследует значение родителя.

Пример

HTML5CSS2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>font-style</title>
  <style>
   h2 {
    font-family: Verdana, Arial, Helvetica, sans-serif; /* Рубленый шрифт заголовка */
   } 
   p {
    font-family: 'Times New Roman', Times, serif; /* Шрифт с засечками */
    font-style: italic; /* Курсивное начертание */
   }
  </style>
 </head>
 <body> 
  <h2>Duis te feugifacilisi</h2>
  <p>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.</p>
 </body>
</html>

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

Рис. 1. Применение свойства font-style

Объектная модель

[window.]document.getElementById(«elementID»).style.fontStyle

Браузеры

Internet Explorer до версии 7.0 включительно не поддерживает значение inherit.

Браузеры текст со значением oblique всегда отображают как курсив (italic).

htmlbook.ru

Курсивный текст: CSS и HTML подходы

В прошлой статье мы обсуждали спецификацию выделения текста жирным шрифтом. В текущей статье мы поговорим о том, как выделить текст курсивом HTML. Как и в случае с жирным текстом, курсивный текст можно сделать тремя способами:

  • Тег i HTML;
  • Тег em HTML;
  • CSS-свойство font-style.

Рассмотрим все три варианта, как можно сделать курсив в HTML, обсудим тонкости этого вопроса и какие способы удобнее и правильнее использовать в тех или иных ситуациях.

Курсивный текст: тег <i>

Тег i (italic), по аналогии с тегом b для жирного текста, служит для физического выделения курсивного текста (это означает, что изменяется только начертание текста). Применение тега i:

<i>Конструктор сайтов "Нубекс"</i>

Таким образом, нужная часть текста помещается между тегами

<i></i>.

Курсивный текст: тег <em>

Хотя тег i остается валидным, с точки зрения оптимизации сайта лучше использовать тег em для выделения логически важных участков текста. Это означает, что поисковые роботы учитывают важность текста, помещенного между тегами <em></em>:

Конструктор сайтов <em>"Нубекс"</em>

Результат:

Конструктор сайтов «Нубекс»

Но не стоит забывать, что текст, заключенный в теги i и em, хоть и отображаются практически одинаково (во всех современных браузерах), по своей сути являеются не совсем идентичными, как уже отмечалось выше. Поэтому использовать теги нужно по мере необходимости: тегом

em HTML обрамлять важные участки текста, а визуальное курсивное оформление применять с помощью тега i или CSS-стилей. Рассмотрим теперь использование CSS-стилей для курсивного выделения текста.

Курсивный текст силами CSS

Для установления стилей отображения шрифтов в CSS применяется свойство font-style, которое может принимать значения: oblique (наклонный текст), italic (курсив) и normal (обычный шрифт).

Стоит помнить о том, что курсивный шрифт и наклонный, по своей сути, не являются одним и тем же. Курсив — это особый шрифт, который является аналогом рукописного текста, а

наклонный формируется посредством наклона обычного шрифта вправо.

Применение атрибута font-style на практике:

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Курсив с помощью CSS - "Нубекс"</title>
  <style>
   .nubex1 {
    font-style: italic;
   }
   .nubex2 {
    font-style: oblique;
   }
  </style>
 </head>
 <body>
  <center>
   <p>Наши сайты - это, действительно, <span>огромный шаг</span> в веб-разработке.</p>
   <p>Мы делаем по-настоящему <span>качественные</span> сайты.</p>
  </center>
 </body>
</html>

Но необходимо помнить, что некоторые браузеры текст со свойством font-style: oblique; могут интерпретировать не как наклонный текст, а как курсивный.

nubex.ru

Свойство font-style — курсив или наклонный текст

Свойство font-style устанавливает курсив либо наклонное написание текста.

Синтаксис

селектор {
	font-style: italic | oblique | normal | inherit;
}

Значения

ЗначениеОписание
italic Делает курсив.
oblique Наклонный текст. В отличие от курсива, который имитирует рукописный текст, наклонный представляет собой обычный текст, буквы которого наклонены в сторону.
normal Отменяет курсив или наклон. Обычно необходимо в случае, если вам нужно отменить курсивное начертание для определенного участка текста (к примеру, все абзацы сделаны курсивом, а данный — нет).
inherit Наследует значение родителя.

Значение по умолчанию:

normal.

Примеры

Пример . Значение italic

Сейчас текст станет курсивным:

p {
	font-style: italic;
}

Результат выполнения кода:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a dapibus magna, ac interdum nisl. Suspendisse eget fringilla nibh, eu commodo arcu. Donec lacinia tempor velit sed tincidunt. Aliquam porttitor nulla purus, vel vulputate ipsum faucibus sed. Phasellus sodales, lorem vel cursus vehicula, ante purus lacinia dui, interdum fringilla massa eros ut dui.

Пример . Значение oblique

Сейчас текст станет наклонным (в зависимости от браузера может быть неотличим от курсивного):

p {
	font-style: oblique;
}

Результат выполнения кода:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a dapibus magna, ac interdum nisl. Suspendisse eget fringilla nibh, eu commodo arcu. Donec lacinia tempor velit sed tincidunt. Aliquam porttitor nulla purus, vel vulputate ipsum faucibus sed. Phasellus sodales, lorem vel cursus vehicula, ante purus lacinia dui, interdum fringilla massa eros ut dui.

code.mu

font-style | CSS | WebReference

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

Краткая информация

Значение по умолчаниюnormal
НаследуетсяДа
ПрименяетсяКо всем элементам
АнимируетсяНет

Синтаксис ?

font-style: normal | italic | oblique

Обозначения

ОписаниеПример
<тип>Указывает тип значения.<размер>
A && BЗначения должны выводиться в указанном порядке.<размер> && <цвет>
A | BУказывает, что надо выбрать только одно значение из предложенных (A или B).normal | small-caps
A || BКаждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.width || count
[ ]Группирует значения.[ crop || cross ]
*Повторять ноль или больше раз.[,<время>]*
+Повторять один или больше раз.<число>+
?		Указанный тип, слово или группа не является обязательным.inset?
{A, B}Повторять не менее A, но не более B раз.<радиус>{1,4}
#Повторять один или больше раз через запятую.<время>#
×

Значения

normal
Обычное начертание текста.
italic
Курсивное начертание.
oblique
Наклонное начертание. Курсив и наклонный шрифт при всей их похожести не одно и то же. Курсив это специальный шрифт имитирующий рукописный, наклонный же образуется путем наклона обычных знаков вправо.

Песочница

Винни-Пух был всегда не прочь немного подкрепиться, в особенности часов в одиннадцать утра, потому что в это время завтрак уже давно окончился, а обед ещё и не думал начинаться. И, конечно, он страшно обрадовался, увидев, что Кролик достаёт чашки и тарелки.

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>font-style</title>
  <style>
   h2 {
    font-family: Verdana, Arial, Helvetica, sans-serif; /* Рубленый шрифт заголовка */
   } 
   p {
    font-family: 'Times New Roman', Times, serif; /* Шрифт с засечками */
    font-style: italic; /* Курсивное начертание */
   }
  </style>
 </head>
 <body> 
  <h2>Культурный памятник Средневековья</h2>
  <p>Амазонская низменность неумеренно берёт 
  небольшой провоз кошек и собак, а Хайош-Байа 
  славится красными винами. </p>
 </body>
</html>

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

Рис. 1. Применение свойства font-style

Объектная модель

Объект.style.fontStyle

Спецификация ?

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

  • Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
  • Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
  • Draft (Черновик спецификации) — первая черновая версия стандарта.
×

Браузеры

В таблице браузеров применяются следующие обозначения.

  •  — свойство полностью поддерживается браузером со всеми допустимыми значениями;
  •  — свойство браузером не воспринимается и игнорируется;
  •  — при работе возможно появление различных ошибок, либо свойство поддерживается лишь частично, например, не все допустимые значения действуют или свойство применяется не ко всем элементам, которые указаны в спецификации.

Число указывает версию браузера, начиная с которой свойство поддерживается.

×

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

Автор: Влад Мержевич

Последнее изменение: 29.08.2017

Редакторы: Влад Мержевич

webref.ru

font-style — курсивный шрифт (наклонный текст)

Поддержка браузерами

12.0+ 4.0+ 1.0+ 1.0+ 7.0+ 1.0+

Описание

Курсив — это вид начертания, при котором символы написаны под наклоном и иногда имеют дополнительные засечки.

В CSS можно задать курсивный шрифт, используя свойство font-style со значением italic. Однако не во всех шрифтах предусмотрен курсив, и вместо него можно увидеть лишь наклонные символы. Такие символы также наклонены вправо, но при этом браузер не использует специально разработанный набор символов, а просто наклоняет стандартный шрифт, то есть визуально это будет выглядеть как просто наклонный текст.

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

Если разница между наклонным текстом и курсивными символами для вас не очень велика, просто выберите один из этих вариантов. Если же она имеет для вас значение, придется протестировать различные сочетания шрифтов и браузеров для достижения лучшего результата.

Значение по умолчанию: normal
Применяется: ко всем элементам
Анимируется: нет
Наследуется: да
Версия: CSS1
Синтаксис JavaScript: object.style.fontStyle=»italic»

Синтаксис

font-style: normal|italic|oblique|inherit;

Значения свойства

Значение Описание
normal Браузер отображает стандартный шрифт.
italic Устанавливает курсивный шрифт.
oblique Определяет наклонный текст.
inherit Указывает, что значение наследуется от родительского элемента.

Пример

Изменение стиля в один клик!

Попробуйте поменять стиль шрифта, изменив значение свойства.

div {
font-style: normal;
}

puzzleweb.ru

Как в html сделать текст курсивом.

Сегодня мы узнаем как сделать текст курсивом в html документе. Существует несколько способов для решения данной задачи и мы их рассмотрим.

Начнем с самого простого — используем теги предназначенные для выделения курсивом:

  • <em>Текст</em>
  • <i>Текст</i>

Тег <em> — предназначен для акцентирования внимания на выделенном тексте. Обернутый данным тегом текст становится курсивным и означает, что на данном фрагменте сделан акцент меняющий смысл всего предложения.

Тег <i> так же выделяет текс, но не придает ему особого значения. Данный тег рекомендуется использовать для разметки каких-нибудь терминов в теле документа.

Важно учесть, что не стоит злоуподреблять данными тегами при разметке текста. Поисковые системы могут отнестись к этому не очень хорошо и посчитать такое выделение за спам. Лучше используйте css стили.

Выделение курсивом с помощью css.

Тут все просто. Существует свойство font-style: принимающее следующие значения normal | italic | oblique | inherit
  • normal — обычное начертание
  • italic — курсивное
  • oblique — наклонное начертание.
  • inherit — наследует значение родителя.

Для того чтобы сделать текст курсивом достаточно прописать стили для элемента.

Вот несколько примеров:



.italic{
	font-style: italic; // курсивное начертание текста для элементов с классом italic
}

span {
	font-style: italic; // курсивное начертание для текста выделенного тегом span
}

или inline стили для элемента <p>Этот текст будет курсивом</p>

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


goodweb.me

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

Наклон определяется сдвигом шрифта на определённый угол. Различают два типа наклона: просто наклонный шрифт (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>для успеха</em>, 
  <em>для информации</em>, 
  <em>для ошибок</em></p>
 </body>
</html>

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

Рис. 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>Курсивный текст хорошо использовать для цитат и прямой речи.</p>
  <p>Наклонный шрифт пригодится для создания ненавязчивого выделения в тексте.</p>
 </body>
</html>

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

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

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

Автор: Влад Мержевич

Последнее изменение: 05.09.2017

Редакторы: Влад Мержевич

webref.ru

No related posts.