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

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

Пока я творю, я живу!
Блог посвящен: HTML, CSS, PHP, WordPress, Bootstrap

Шрифты в CSS. Основы CSS для начинающих. Урок №6

Шрифты в CSS. Основы CSS для начинающих. Урок №6

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

Стиль шрифта в CSS

Свойство «FONT-STYLE»
Если вы захотели поменять стиль шрифта, а именно, сделать текст курсивом или просто наклонным, то воспользуйтесь правилом « font-style ».

  • normal — нормальный шрифт;
  • italic — курсив;
  • oblique — наклонный шрифт.

Стиль шрифта в CSS

Толщина шрифта в CSS

Свойство «FONT-WEIGHT»
Если вы хотите сделать шрифт жирным, используйте правило « font-weight ».

  • normal — нормальная жирность
  • lighter — светлое начертание
  • bold — полужирный
  • bolder– жирный

Толщина шрифта в CSS

Можно указать толщину шрифта и обычными цифрами от 100 до 900.

  • 100 — светлый шрифт,
  • 900 — самый жирный

Толщина шрифта в CSS

Размер шрифта в CSS

Свойство «FONT-SIZE»
Шрифт можно менять по размеру. Для этого используйте правило « font-size ».

Значение задается в « px » и « % ».

Размер шрифта в CSS

Шрифты в CSS

Свойство «FONT-FAMILY»
На каждом компьютере установлены стандартные шрифты, такие как « Times New Roman », « Arial » или « Verdana ». Выбор шрифта зависит от вкуса каждого, но потом он влияет на то, как внешне будет выглядеть сайт.
Чтобы указать шрифт, воспользуйтесь правилом « font-family ».

Можно задавать в правилах несколько шрифтов. Это на тот случай, если у пользователя нет первого шрифта, тогда подключится второй.

Обратите внимание, шрифт « "Times New Roman" » написан в кавычках ( " " ).
В кавычки берутся те шрифты, в которых название состоит из двух и более слов и есть пробел между словами.

Семейство шрифтов
Можно в правило « font-family » прописать и целое семейство шрифтов.
Наверное, вы меня не совсем поняли. Сейчас попробую объяснить.
Существует множество видов шрифтов, которые образуют так называемые семейства.
Существует всего пять семейств шрифтов:

  • sansserif – шрифты без засечек (как Arial).
    Семейство шрифтов
  • serif— семейство шрифтов с засечками (как Times New Roman).
    Семейство шрифтов
  • monospace – моноширинные шрифты, ширина каждого символа в таком семействе одинакова.
    Семейство шрифтов
  • cursive–курсивные шрифты.
    Семейство шрифтов
  • fantasy — художественные и декоративные шрифты.
    Семейство шрифтов

А можно и вот так:

Подключение нестандартных шрифтов в CSS

Свойство «@FONT-FACE»
Бывает такой момент, что вам просто необходимо установить на сайт нестандартный шрифт, то есть, шрифт, который не установлен по умолчанию у пользователя на компьютере.
Правило « @font-face » позволяет нам импортировать внешний файл шрифтов в документ. После импортирования, мы можем использовать нестандартный шрифт как обычный через правило « font-family ».
Залейте любой нестандартный шрифт формата «ttf» в папку вашего сайта рядом с файлом css, это для того, чтобы вы не запутались и правильно написали путь к шрифту. Для примера я возьму нестандартный шрифт с именем « DS-UncialFunnyHand-Medium.ttf» .
Вот пример подключения нестандартного шрифта.

  • font-family:. ;— здесь пишем имя шрифта;
  • src: url(. ); — тут указываем путь к файлу со шрифтом который будет загружаться с сайта.

Вот полный пример с подключением нестандартного шрифта и его использование.

Свойство font-style, курсив

Начертание текста можно задавать с помощью свойства font-style . Вот его основные значения:

  1. normal — обычное начертание;
  2. italic — курсивное начертание;
  3. oblique — наклонное начертание.

Закономерный вопрос — а чем отличается курсивное и наклонное начертание?

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

Если отдельного курсивного начертания в шрифте не предусмотрено, то браузер сделает текст наклонным, то есть сымитирует курсив. Что равноценно заданию тексту значения font-style: oblique .

Закрепим теорию практикой.

  • index.html Сплит-режим
  • style.css Сплит-режим

Спасибо! Мы скоро всё исправим)

Код изменился, нажмите «Обновить» или включите автозапуск.

Вы перешли на другую страницу

Кликните внутри мини-браузера, чтобы поставить фокус в это окно.

  1. Для тегов em и i отмените курсивное начертание с помощью свойства font-style со значением normal ,
  2. А для класса .italic с помощью font-style задайте курсивное начертание.

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

CSS — Урок 6. Свойства — шрифты

Для задания параметров шрифтов в CSS используется свойство font.

Это свойство css задает гарнитуру шрифта. Все шрифты можно условно разделить на несколько групп:

  • Serif — шрифты с засечками, например, Times New Roman.
  • Sans-serif — шрифты рубленные, без засечек, например, Arial.
  • Monospace — моноширинные шрифты, например, Courier New.
  • Cursive — курсивные шрифты, например, Calisto MT.
  • Fantasy — декоративные шрифты, например, Torhok.

Так вот в качестве значения свойства font-family можно указать шрифт и группу шрифтов. Например:

Теперь весь текст страницы будет написан шрифтом Verdana, но если на компьютере пользователя такого шрифта не окажется, то будет использоваться любой другой из группы sans-serif. То есть будет подобран шрифт наиболее близкий ему по виду, и внешний вид страницы будет не очень отличаться от задуманного.

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

Это свойство css задает стиль шрифта: normal (обычный), oblique (наклонный), italic (курсивный). Пусть у нас есть html-страница с тремя параграфами, зададим каждому уникальный идентификатор:

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

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