"Истина где-то рядом."

Уроки HTML

Скрипты PHP

Шаблоны HTML

Меню сайта
Уроки HTML
Уроки CSS
HTML5
Скрипты JAVA
Вёрстка
Графика
Обзор хостингов
Дополнительно


Реклама на сайте:




Свойства шрифта в CSS


папка digest

Урок №5

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

Кроссбраузерность- это возможность какого либо элемента, одинаково отображаться во всех имеющихся в интернете браузерах.

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

Большинство текстовых элементов по умолчанию имеют шрифт Times New Roman. В CSS есть возможность установить другие шрифты. Также в CSS можно подключить шрифт, который изначатьно не был предусмотрен в браузерах.

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

Cвойства шрифта в CSS:

Шрифты подразделяются на семейства.

  • serif - с засечками
  • sans-serif - без засечек
  • monospace - моноширинные
  • cursive - курсивные
  • fantasy - декоративные

Пример:

p {font-family: Verdana, Arial, sans-serif;}

Результат: шрифт для абзаца, Verdana или Arial, а также sans-serif.

font-size

Пример:

p { font-size: 16px; }

Это свойство регулирует размер.
Имейте в виду, что установка размера шрифта 16px не делает каждую букву высотой 16px. Фактический размер каждой буквы зависит от используемого font-family.

font-style

Пример:

h2 { font-style: italic; }

Это свойство может сделать ваш текст курсивным. Значение по умолчанию — font-style: normal.

font-weight

Пример:

h2 { font-weight: bold; }

Это свойство может сделать ваш текст жирным. Значение по умолчанию — font-weight: normal.

font-variant

Пример:

h2 { font-variant: small-caps; }

Это свойство превратит ваш текст в капитель. Значение по умолчанию — font-weight: normal.

Это свойство используется крайне редко.


CSS для шрифтов

Задаются шрифты при помощи свойства CSS font-family, а в значении указывается название шрифта.

Задать шрифт и его оформление можно как в файле style.css, так и непосредственно в теге элемента.

В файле style.css задаётся общий шрифт для всех страниц сайта, а в теге, для выделения небольших участков контента.

В style.css
p{
  font-family: "Monotype Corsiva" Cursive;
В теге
<p style="font-family: "Monotype Corsiva" Cursive;">Текст
}

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



Безопасные шрифты

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

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

Times New Roman, serif

Georgia, serif

Arial, sans-serif

Verdana, sans-serif

Tahoma, sans-serif

Impact, sans-serif

Trebuchet MS, sans-serif

Courier New, monospace

Comic Sans MS, cursive


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

 



Создано|Обновлено: 23.05.2020.