font-style
font-style это CSS-свойство определяющее каким образом шрифт должен быть стилизирован, будь то это normal, italic, или oblique face из его font-family .
Интерактивный пример
Italic шрифты в общем курсивные по своей сути, обычно занимают меньше горизонтального пространства чем их нестилизированные копии, тогда как oblique шрифты обычно просто наклонная версия регулярного шрифта. Когда определённый стиль не доступен, оба italic и oblique шрифты симулируются искусственно наклоняя глифы регулярного шрифта (используйте font-synthesis (en-US) для управления этим поведением).
Syntax
font-style: normal; font-style: italic; font-style: oblique; /* Глобальные значения */ font-style: inherit; font-style: initial; font-style: unset;
Свойство font-style определяется как единственное ключевое слово выбранное из списка значений внизу.
Values
Выделяет шрифт который классифицирован как normal в font-family .
Выделяет шрифт который классифицирован как italic . Если не доступна курсивная версия шрифта, взамен используется oblique классификация. Если не одна версия не доступна, то стиль симулируется искусственно.
Выделяет шрифт который классифицирован как oblique . Если не доступна косая версия шрифта, взамен используется italic классификация. Если не одна версия не доступна, то стиль симулируется искусственно.
Formal syntax
font-style =
normal | (en-US)
italic | (en-US)
oblique ? (en-US)
Examples
Font styles
p class="normal">This paragraph is normal.p> p class="italic">This paragraph is italic.p> p class="oblique">This paragraph is oblique.p>
.normal font-style: normal; > .italic font-style: italic; > .oblique font-style: oblique; >
Specifications
| Specification |
|---|
| CSS Fonts Module Level 4 # font-style-prop |
| Начальное значение | normal |
|---|---|
| Применяется к | all elements and text. Это также применяется к ::first-letter и ::first-line . |
| Наследуется | да |
| Обработка значения | как указано |
| Animation type | by computed value type; normal animates as oblique 0deg |
Совместимость с браузерами
BCD tables only load in the browser
Found a content problem with this page?
- Edit the page on GitHub.
- Report the content issue.
- View the source on GitHub.
This page was last modified on 6 янв. 2024 г. by MDN contributors.
Your blueprint for a better internet.
MDN
Support
- Product help
- Report an issue
Our communities
Developers
- Web Technologies
- Learn Web Development
- MDN Plus
- Hacks Blog
- Website Privacy Notice
- Cookies
- Legal
- Community Participation Guidelines
Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2024 by individual mozilla.org contributors. Content available under a Creative Commons license.
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.
Оформляя текст своих статей, заметок и.т.д. на веб-страницах иногда нужно какой-то фрагмент этого текста выделить от остального текста.
Замечательным способом, как это можно сделать — это выделение его полужирными шрифтом или курсивом. Такой текст сразу бросается в глаза и становиться заметным.
Сегодня разберем свойства CSS, которые позволяют решить эту проблему и выделяют выбранный фрагмент текста курсивом или полужирным.
Итак, чтобы выделить текст полужирным, нужно воспользоваться свойством:
font-weight: bold|bolder|lighter|normal|100|200|300|400|500|600|700|800|900
Чаще всего из этих значений используется значение bold. Остальные значения лишь определяют степень полужирности шрифта.
Чтобы сделать его курсивом, нужно воспользоваться свойством CSS:
font-style: normal | italic | oblique | inherit
Значение italic, как раз отвечает за курсив текста.
Больше моих уроков по HTML, CSS и верстке сайтов здесь.
Давайте на конкретном практическом примере посмотрим, как работают эти свойства. Есть 3 абзаца. Один из них оставим как есть, другой выделим полужирным шрифтом, а третий курсивом.
Абзац обычный
Абзац полужирным шрифтом
Абзац курсивом
Также выделить особым образом может понадобиться только определенную часть текста внутри абзаца. В этом случае можно воспользоваться элементом span.
Абзац Абзац Абзац Абзац Абзац Абзац Абзац
Больше моих уроков по HTML, CSS и верстке сайтов здесь.
Чтобы оставить сообщение, зарегистрируйтесь/войдите на сайт через:
CSS: Курсив
Для выделения цитат или терминов часто используют курсивное начертание шрифта. В отличие от изменения насыщенности, курсив позволяет акцентировать внимание на участке текста, но не выделять его так, чтобы он сразу бросался в глаза.
Для изменения начертания шрифта используется свойство font-style , которое может принимать одно из значений:
- normal — обычный вывод текста.
- italic — курсивное начертание
- oblique — косое начертание
Текст с обычным начертанием шрифта
Текст с курсивным начертанием шрифта
Текст с косым начертанием шрифта
Обратите внимание, что текст со значением italic и oblique могут выглядеть совершенно одинаково. В чём же здесь дело? При использовании значения italic ищется специальная курсивная версия шрифта, а oblique лишь программно наклоняет символы в шрифте. Не все шрифты имееют отдельную версию для курсива, поэтому, визуально, оба значения будут выглядеть одинаково.
Используйте значение italic для создания курсива — это самый распространённый вариант
.italic
Задание
Добавьте в редактор параграф с классом italic-type и установите начертание oblique . Стили добавьте в тег
Упражнение не проходит проверку — что делать? ��
Если вы зашли в тупик, то самое время задать вопрос в «Обсуждениях». Как правильно задать вопрос:
- Обязательно приложите вывод тестов, без него практически невозможно понять что не так, даже если вы покажете свой код. Программисты плохо исполняют код в голове, но по полученной ошибке почти всегда понятно, куда смотреть.
В моей среде код работает, а здесь нет ��
Тесты устроены таким образом, что они проверяют решение разными способами и на разных данных. Часто решение работает с одними входными данными, но не работает с другими. Чтобы разобраться с этим моментом, изучите вкладку «Тесты» и внимательно посмотрите на вывод ошибок, в котором есть подсказки.
Мой код отличается от решения учителя ��
Это нормально ��, в программировании одну задачу можно выполнить множеством способов. Если ваш код прошел проверку, то он соответствует условиям задачи.
В редких случаях бывает, что решение подогнано под тесты, но это видно сразу.
Прочитал урок — ничего не понятно ��
Создавать обучающие материалы, понятные для всех без исключения, довольно сложно. Мы очень стараемся, но всегда есть что улучшать. Если вы встретили материал, который вам непонятен, опишите проблему в «Обсуждениях». Идеально, если вы сформулируете непонятные моменты в виде вопросов. Обычно нам нужно несколько дней для внесения правок.
Кстати, вы тоже можете участвовать в улучшении курсов: внизу есть ссылка на исходный код уроков, который можно править прямо из браузера.