Zano.ru




Рейтинг@Mail.ru


Главная / CSS параметров шрифтов Font-family, Font-style, Font-variant, Font-weight, Font-size

CSS параметров шрифтов Font-family, Font-style, Font-variant, Font-weight, Font-size

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

Font-family

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

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

Вот примеры написания разными группами шрифтов:

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

body{
  font-family: Verdana, sans-serif;
}

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

Font-style

Это свойство css задает стиль шрифта: normal (обычный), oblique (наклонный), italic (курсивный).

Font-variant

Это свойство css задает вариант написания букв из двух возможных: normal (обычный) и small-caps (малые прописные буквы). По умолчанию это свойство имеет значение normal.

Font-weight

Это свойство css задает толщину букв шрифта. В качестве значений выступают числа: 100, 200, 300, 400, 500, 600, 700, 800 и 900. А также ключевые слова: normal (нормальный), bold (полужирный), bolder (более жирный по отношению к базовому, унаследованному от предка) и lighter (менее жирный по отношению к базовому, унаследованному от предка).

Font-size

Это свойство задает размер шрифта.
Задавать размер в css можно тремя способами:

  • с помощью ключевых слов (xx-small, x-small, small, medium, large, x-large, xx-large, smaller, large),
  • с помощью относительных единиц (% и em),
  • с помощью единиц измерения длины (пикселы, пункты, сантиметры и миллиметры).

С помощью относительных единиц задаются размеры относительно элемента-предка.

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

Существует три относительных единицы измерения:

  • px - равен одной точке на экране, называемой пикселом.
  • em - равен высоте шрифта, используемого в данном элементе.
  • ex - равен высоте строчной буквы "х" шрифта, используемого в данном элементе.

И пять абсолютных единиц измерения:

  • in - равен 1 дюйму (2,54 см).
  • pt - равен 1/72 дюйма.
  • pc - равен 1/6 дюйма.
  • mm - равен 1 миллиметру.
  • sm - равен 1 сантиметру.

Как и понятно из названия, абсолютные единицы имеют фиксированный размер, а относительные устанавливают размер относительно какой-то другой единицы. Одни единицы измерения "перекочевали" из полиграфии, другие из реального мира. Но далеко не все из них подходят для web.
У наших пользователей разные диагонали мониторов и разные разрешения экранов, и мы не знаем какие они. И то, что будет смотреться хорошо на одном экране, будет совершенно нечитабельным на другом.
Поэтому для web-страниц лучше использовать только три единицы измерения: pt - для "фиксированного" дизайна сайта, % - для "резинового" дизайна и em - для пропорционального изменения размера.




 
E-Mail: zanoru@yandex.ru