Домой / Учебник Css / 10 Урок. Шрифты Css

10 Урок. Шрифты Css

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

Какие есть шрифты css?

Шрифты объединяются в семейства по тем или иным признакам. Рассмотри 3 наиболее ярких семейства:

  1. Sans-serif. Шрифты без засечек, которые выглядят ровными и строгими. Яркий представитель данного семейства - шрифт Arial, еще Vernada.
  2. Serif. Шрифты с засечками. Например, "Times New Roman".
  3. Monospace. Моноширинные шрифты, то есть шрифты с одинаковым расстоянием между символами, как будто из под печатной машинки. Яркий представитель - "Courier New".

Свойство font-family для шрифтов css

Для того, чтобы задать шрифт в css, существует свойство:

  • font-family - задает шрифт для текста.

Как мы помним, свойство font, само по себе, это свойство для работы с текстом в css. Оно имеет ряд, скажем, подсвойств, которые пишутся через тире. Одно из них - font-family. Оно отвечает за шрифты.

Свойство font-family: пример

Данное свойство можно задавать для любого элемента html, содержащего текст. Если задать для тега body, то мы повлияем на текст всей страницы. Можно задавать также для заголовка (h) или для параграфа (p), или для любого элемента с классом (p class="..."). Смотрим пример.

p 
{
font-family: arial, vernada, sans-serif;
}

Результат:

Пример шрифта css
Пример шрифта css

Что означает эта запись? Она означает, что параграфы будут отображать шрифт arial. Если по каким-то причинам браузер не сможет отобразить этот шрифт, то отобразится vernada. А если и vernada не сможет отобразиться, то подставится любой шрифт из семейства sans-serif.

Таким образом, пишем по приоритету: сначала самый приоритетный, который мы хотим, чтобы отражался в первую очередь, и через запятую уже менее приоритетные шрифты (или семейства).

Еще существует такое правило: если в названии шрифта есть пробелы, то в css он записывается в кавычках.

Например, такая запись:

p 
{
font-family: "Times New Roman";
}

Заключение

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

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

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