Параметры шрифта
Рассмотрим основные атрибуты стиля, которые задают различные параметры шрифта.
font-family - наименование шрифта
Имя шрифта задается атрибутом стиля font-family
font-family: <font 1, font 2, ..., font n>|inherit
Имена шрифтов задаются в виде стандартных названий шрифтов. Если имя шрифта состоит из нескольких слов, оно берется в кавычки. Если сразу задается несколько шрифтов, они разделяются запятыми. Если имя шрифта задается во встроенном стиле, вместо кавычек используют апострофы (если имя шрифта состоит из нескольких слов).
ПРИМЕР:
P {font-family: Verdana}
H2 {font-family: Arial, "Times New Roman", Tahoma}
<H3 STYLE="font-family: 'Courier New'">
|
Браузер пытается отобразить текст шрифтом (если их указано несколько), который указан в списке первым. Если такого шрифта нет на компьютере пользователя, браузер пытается отобразить текст следующим шрифтом, и так далее, по списку. Если на компьютере не установлено ни одного из указанных шрифтов, браузер отобразит текст шрифтом, который установлен по умолчанию на компьютере пользователя. Если компьютер работает под управлением системы Windows, на нем должны быть установлены самые популярные шрифты, которые используются на большинстве веб-сайтов - Arial, Times New Roman, Verdana, Tahoma, Courier.
Многие веб-мастера, чтобы избежать различного рода неожиданностей при отображении html-страницы, в списке шрифтов задают не только имена шрифтов, но и один из пяти семейств шрифтов, который обычно указывают в конце списка:
- serif - шрифты с засечками (Times New Roman, Bodoni, Garamond...);
- sans-serif - шрифты без засечек (Arial, Helvetica...);
- cursive - шрифты, имитирующие рукописный текст;
- fantasy - декоративные шрифты;
- monospace - моноширинные шрифты.
Особое значение inherit указывает браузеру, что элемент веб-страницы, к которому привязывают стиль, наследует значение параметра у родительского элемента. Это значение по умолчанию, поэтому, его обычно не указывают.
Применительно к атрибуту font-family особое значение inherit указывает, что текст элемента html-страницы будет отображен тем же шрифтом, что и текст родительского элемента.
font-size - размер шрифта
Размер шрифта можно задавать двумя способами: числовым значением; символьным значением. В свою очередь числовое значение размера шрифта можно задавать в абсолютных или относительных величинах.
ПРИМЕР:
P {font-size: 12px}
H1 {font-size: 120%}
EM {font-size: small}
|
Единицы измерения размера шрифта:
- px - пикселы;
- pt - пункты;
- in - дюймы;
- cm - сантиметры;
- mm - миллиметры;
- pc - пики;
- em - размер символа 'm' текущего шрифта;
- ex - размер символа 'x' текущего шрифта;
- % - проценты от размера шрифта родительского элемента.
Символные значения атрибута font-size:
- xx-small
- x-small
- small
- medium
- large
- x-large
- xx-large
- larger - следующий размер шрифта по возрастанию относительно родительского элемента;
- smaller - следующий размер шрифта по убыванию относительно родительского элемента.
Значения от xx-small до xx-large задают семь предопределенных размеров шрифта от самого маленького до самого большого.
color - цвет текста
Цвет текста можно задавать либо предопределенным названием, либо RGB-кодом.
ПРИМЕР:
P {color: Red}
H1 {color: #FF00FF}
|
RGB-код начинается с символа фунта # и числа в шестнадцатеричном формате, которое определяет интенсивность красной, зеленой и синей составляющих цвета. Значение #000000 соответствует черному цвету; #FFFFFF - белому.
Основные цвета:
white #FFFFFF aqua #00FFFF black #000000 blue #0000FF fuchsia #FF00FF gray #808080 green #008000 lime #00FF00 maroon #800000 navy #000080 olive #808000 purple #800080 red #FF0000 silver #C0C0C0 teal #008080 white #FFFFFF yellow #FFFF00 black #000000
Более полный список имен цветов и их RGB-значений представлен на странице https://msdn.microsoft.com/en-us/library/aa358802(v=VS.85).aspx
Opacity - степень прозрачности
Атрибут стиля opacity указывает степень прозрачности текста (или другого элемента html-страницы):
opacity: <0..1>
Степень прозрачности задается числовым значением в диапазоне от 0 до 1: 0 - соответствует полной прозрачности текста; 1 - соответствует полной видимости текста.
ПРИМЕР:
EM {opacity: 0.4}
|
Обратите внимание, что в качестве десятичного разделителя в числе, которое задает степень прозрачности, должна использоваться точка.
Атрибут opacity имеет крайне ограниченное применение, и не используется в обычном тексте, чтобы не вводить посетителя сайта в недоумение. Прозрачность рекомендуется использовать для создания специальных эффектов.
font-weight - степень "жирности" шрифта
Возможные значения атрибута font-weight:
- normal - стандартная "жирность" шрифта;
- bold - полужирный шрифт;
- bolder - относительное значение, представляет следующую степень "жирности" в сторону увеличения;
- lighter - относительное значение, представляет следующую степень "жирности" в сторону уменьшения;
- 100 - минимальная "жирность" шрифта;
- 200
- 300
- 400 - стандартная "жирность" шрифта (соответствует normal);
- 500
- 600
- 700 - полужирный шрифт (соответствует bold);
- 800
- 900 - максимальная "жирность" шрифта.
ПРИМЕР:
EM {font-weight: bold}
|
font-style - начертание шрифта
Возможны три значения font-style:
- normal - обычный шрифт;
- italic - курсив;
- oblique - декоративное начертание шрифта, похожее на курсив.
font-decoration - декоративное "украшение" шрифта
Возможны пять значений font-decoration:
- none - отменяет все "украшения" шрифта, которые были ранее заданы для шрифта родительского элемента;
- underline - подчеркивание текста (не рекомендуется применять, поскольку подчеркнутый текст у посетителя обычно ассоциируется с гиперссылкой);
- overline - создает линию над текстом;
- line-through - зачеркнутый текст;
- blink - мигающий текст (поддерживается не всеми браузерами).
font-variant - задает вид строчных букв
Возможны два значения атрибута font-variant:
- normal - обычный текст;
- small-caps - строчные буквы шрифта выглядят аналогично прописным, но меньшего размера.
text-transform - изменение регистра символов текста
Возможные значения text-transform:
- capitalize - преобразование первой буквы каждого слова к верхнему регистру;
- uppercase - преобразование всего текста к верхнему регистру;
- lowercase - преобразование всего текста к нижнему регистру;
- none - оставляет текст в исходном виде.
line-height - высота строки текста
Высоту строки текста можно задавать абсолютно или относительно.
ПРИМЕР:
P {line-height: 5px}
EM {line-height: 2}
STRONG {line-height: normal}
|
В первом примере задается высота строки текста в 5 пикселей; во втором примере - текущая высота строки текста умножается на 2; в третьем примере - атрибут возвращает управление высотой строки текста браузеру.
letter-spacing - расстояние между символами текста
Расстояние, заданное в letter-spacing, добавляется к текущему, установленному браузером. Значение может быть положительным (символы шрифта располагаются дальше друг от друга) или отрицательным (символы шрифта располагаются ближе друг к другу и даже могут наезжать друг на друга). Значение normal устанавливает нулевое дополнительное расстояние.
ПРИМЕР:
P {letter-spacing: 5px}
EM {letter-spacing: -2pt}
STRONG {letter-spacing: normal}
|
Атрибут стиля letter-spacing не поддерживает значение inherit
word-spacing - дополнительное расстояние между словами
Возможные значения и поведение атрибута word-spacing аналогичны letter-spacing.
font - одновременное определение нескольких параметров шрифта
Обязательным параметром атрибута стиля font является имя шрифта, остальные параметры могут отсутствовать. Значения параметров отделяются друг от друга пробелами.
ПРИМЕР:
P {font: italic 14px "Courier New"}
|
