Tel: +372 5596 5762
e-mail: info@digipo.eu

Рассмотрим варианты работы со шрифтами, а так же вопрос отображения уникального шрифта на выбранном на web-сайте.

В уроке используются следующие параметры CSS:

  • font-family
  • font-style
  • font-variant
  • font-weight
  • font-size

Семейство шрифта

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

Для категоризации шрифтов используются два типа имён: имя семейства/family-name и общее/родовое семейство/generic family. Эти два термина объясняются далее.

Family-name

Пример family-name (часто называемое просто "шрифт") это, например, "Arial", "Times New Roman" или "Tahoma".

Generic family

Его можно проще описать как группу family-names, имеющих характерные общие черты. Пример - sans-serif, набор шрифтов без "засечек/feet".

Разницу можно также проиллюстрировать так:

Семейство шрифта

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

Список шрифтов может выглядеть так:

h1 {font-family: arial, verdana, sans-serif;}

h2 {font-family: "Times New Roman", serif; }      

Заголовки <h1> будут отображаться шрифтом "Arial". Если он не установлен на пользовательской машине, будет использоваться "Verdana". Если недоступны оба шрифта, для показа заголовков будет использован шрифт семейства sans-serif.

Обратите внимание, что имя шрифта "Times New Roman" содержит пробелы, поэтому указано в двойных кавычках.


Стиль шрифта

Свойство font-style определяет normal (обычный), italic (курсив) или oblique (наклонный). В примере все заголовки <h2> будут показаны курсивом italic.

h1 {font-family: arial, verdana, sans-serif;}

h2 {font-family: "Times New Roman", serif; font-style: italic;} 

Вариант шрифта

Свойство font-variant используется для выбора между вариантами normal и small-caps. Шрифт small-caps использует малые заглавные буквы (upper case) вместо букв нижнего регистра. Непонятно? Смотрите примеры:

Если font-variant имеет значение small-caps, а шрифт small-caps недоступен, браузер, скорее всего, отобразит текст буквами верхнего регистра.

h1 {font-family: arial, verdana, sans-serif;}

h2 {font-family: "Times New Roman", serif; font-style: italic;}

h3 {font-variant: small-caps;}


Вес шрифта

Свойство font-weight описывает, насколько толстым, или "тяжёлым", должен отображаться шрифт. Шрифт может быть normal или bold. Некоторые браузеры поддерживают даже числовые значения 100-900 (в сотнях) для описания веса шрифта.

  • normal - обычный шрифт
  • bold - полужирный шрифт
  • bolder - жирный шрифт
  • lighter - тонкий шрифт

Пример кода:

h1 {font-family: arial, verdana, sans-serif; font-weight: bold;}

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

Размер шрифта устанавливается свойством font-size.

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

значения абсолютного размера шрифта:

  • xx-small - очень очень маленький
  • x-small - очень маленький
  • small - маленький
  • medium - средний
  • large - большой
  • x-large - очень большой
  • xx-large - очень очень большой

значения относительного размера шрифта:

  • larger - больше чем размер шрифта родительского элемента
  • smaller - меньше чем размер шрифта родительского элемента

Примеры:

h1 {font-family: arial, verdana, sans-serif; color: #ff0000;background-color: #fc9804; font-size: 30px;}

h2 {font-size: 12pt; font-family: "Times New Roman", serif; font-style: italic;}

h3 {font-size: 120%; font-variant: small-caps;}

p { font-size: 1em; font-weight: bold; }

Есть одно отличие в указанных единицах измерения: 'px' и 'pt' дают абсолютное значение размера шрифта, а '%' и 'em' - относительные. Многие пользователи не могут читать мелкий текст, по разным причинам. Чтобы сделать ваш web-сайт доступным для всех, вы должны использовать относительные значения, такие как '%' или 'em'.

Примеры параметров шрифта

 Задания

Установите парметры шрифта для заголовка H1 - жирный, все буквы большие, цвет красный и размер 25px

Установите парметры шрифта для заголовка H2 - наклонный, цвет черный и размер 2em

Установите парметры шрифта для заголовка H3 - размер 1em


В предыдущем уроке мы рассматривали работу с цветом и фоном страницы

В следующем уроке мы рассмотрим работу с текстом