Как сделать курсивный текст в css

Как сделать текст курсивом или полужирным с помощью CSS.

Оформляя текст своих статей, заметок и.т.д. на веб-страницах иногда нужно какой-то фрагмент этого текста выделить от остального текста.

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

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

Итак, чтобы выделить текст полужирным, нужно воспользоваться свойством:

Чаще всего из этих значений используется значение bold. Остальные значения лишь определяют степень полужирности шрифта.

Чтобы сделать его курсивом, нужно воспользоваться свойством CSS:

Значение italic, как раз отвечает за курсив текста.

Больше моих уроков по HTML, CSS и верстке сайтов здесь.

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

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

Акцентирование (выделение) текста в HTML

Акцентировать текст в большом количестве информации – хорошая идея. Ведь чтец может не заметить нужной, важной или еще какой-то информации, которую вы хотите донести. Например, я тоже акцентирую текст: теги, стили, атрибуты, ключевые слова, ссылки и прочее я выделяю своим цветом, но делаю я это при помощи стилей. В HTML предусмотрены стандартные «выделители» текста: жирное начертание, косое начертание, подчеркнутое начертание, зачеркнутое начертание, больше размера, меньше размера. Пробежимся по всем элементам акцентирования.

Жирный текст

Всеми известный жирный шрифт, который можно увидеть везде. Для этого было разработано два тега <b> и <strong> . Тег <b> , более распространенный. Эти теги не одинаковы, хоть и результат схож. Различие заключается в том, что тег <b> определяет физическую жирность текста, а тег <strong> определяет важность этого текста и выделяет его жирным начертанием. Но, большое «но», в современных браузерах их права «уравняли», они стали равнозначными (эквивалентными). Такая же ситуация и у тегов <i> и <em> . Следовательно, выгоднее использовать тег, который короче. Далее пример:

Курсивный текст

За акцентирование курсивным шрифтом, отвечают теги <i> и <em> . Как сказано выше, они различны по своей направленности, но в современных браузерах эквивалентны. Далее пример:

Подчеркнутый текст

Акцентировать текст подчеркнутым шрифтом можно при помощи тега <u> . Этот тег осуждают спецификацией HTML и рекомендуют использовать стили, с чем я и соглашусь. Я обязательно напишу эквиваленты тегов акцентирования в CSS. Далее пример:

Зачеркнутый текст

Для того чтобы зачеркнуть текст, используют два эквивалентных тега: <s> и <strike> . Эти два тега осуждают и рекомендуют взамен им использовать стили. А тег <strike> категорически запрещен в HTML5. Далее пример:

Крупнее и мельче обычного текста

Акцентировать текст, можно и увеличив размер это текста. Для этого есть тег <big> . Чтобы текст был мельче обычного, применяют тег <small> . Но все же выгодно использовать всегда стили CSS. Далее пример:

Замена жирного текста стилями CSS

Есть такое свойство в CSS – font-weight . Оно принимает много значений: font-weight:bold|bolder|lighter|normal|100|200|300|400|500|600|700|800|900 . Чтобы сделать текст самым жирным, нужно использовать значение font-weight: 900 . О нем мы еще поговорим в следующих уроках.

Замена курсивного текста стилями CSS

В CSS есть аналог тегу <i> (Курсивный текст). Это свойство font-style . Далее пример:

Замена подчеркнутого текста стилями CSS

Тег <u> осуждается спецификацией HTML и рекомендуется использовать стили. Аналогом может служить свойство text-decoration . Я обычно его использую, чтобы убрать подчеркивание у ссылок (значение none), но в этом случае нам нужно добавить подчеркивание (значение underline). Далее пример:

font-style

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

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

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

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *