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

Основные CSS-свойства

Единицы измерения

Рассмотрим, какие бывают единицы измерения для указания размера объектов HTML-документа.

Формат представления размера предполагает необязательное использование знака числа. Если знак отсутствует, то число предполагается положительным. После знака, если он используется, без разрыва должно идти число, возможно с десятичной точкой. И затем, опять без разрыва, двухбуквенная аббревиатура единицы измерения. Указание аббревиатуры необязательно, если значение размера равно нулю.

Существует два типа представления длины: относительное и абсолютное.

Относительное представление задает длину относительно другого свойства длины. Существуют следующие относительные размеры длины:

• em – высота шрифта
• ex – высота символа X
• px – пиксели (относится к разрешению устройства вывода)

Единицы длины em и ex относятся к характеристикам шрифта самого элемента, за исключением свойства font-size, для которого за основу берутся характеристики шрифта родительского элемента.

Единицы измерения px (пиксели) относятся к разрешению устройства вывода, т.е. обычно к дисплею компьютера. Если плотность пикселей устройства вывода очень сильно отличается от плотности пикселей компьютерного дисплея, браузер вынужден масштабировать значения пикселей. Это происходит, например, при выводе веб-страницы на принтер.

Относительный размер может быть также задан в виде процентного соотношения, обычно по сравнению с величиной родительского элемента. В этом случае, после значения указывается знак «%».

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

• in – дюймы
• cm – сантиметры
• mm – миллиметры
• pt – пункты (1/72 дюйма)
• pc – пика (12 пунктов)

Абсолютные значения используются очень редко в профессиональном веб-дизайне.

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

В этой главе мы рассмотрим CSS-свойства, определяющие стиль текста: font, font-family, font-size, font-weight, font-style, line-height.

Начнем с определения font-family. С помощью этого свойства можно задать шрифт, который будет использоваться для текста внутри объекта, для которого это свойство задано. Ввиду того, что на компьютере пользователя нужного шрифта может не оказаться (не установлен), font-family обычно содержит несколько альтернативных названий шрифтов, заканчивая этот список общим названием семейства шрифтов.

Cвойства font-family

font-family: “Lucida Sans”, Verdana, sans-serif;

В данном примере указан предпочтительный шрифт – «Lucida Sans». Так как название этого шрифта состоит их двух слов, оно взято в кавычки. Это правило применимо ко всем названиям шрифтов, состоящим более чем из одного слова.

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

Перечислим названия существующих семейств шрифтов: serif, sans-serif, monospace, script (или cursive), fantasy.

Ниже приведены несколько шрифтов семейства serif:

• Garamond
• Georgia
• New York
• Times
• Times New Roman

К шрифтам семейства sans-serif относятся:

• Arial
• Geneva
• Helvetica
• Lucida Sans
• Trebuchet
• Verdana
• Tahoma

Семейство monospace включает в себя:

• Courier
• Courier New
• Lucida Console
• Monaco

К семейству script относятся:

• Comic Sans MS
• Lucida Handwriting
• Zapf Chancery

И на последок несколько примеров шрифтов из семейства fantasy:

• Copperplate
• Desdemona
• Impact
• Kino

Как правило, в профессиональном веб-дизайне используется не более 3 – 4 шрифтов одновременно. Причем, разумеется это должны быть общедоступные и популярные шрифты. Для обычного текста используются как правило шрифты семейства sans-serif, такие как Arial, Tahoma, Verdana и пр. Для страниц предназначенных для печати, чаще всего используются шрифты serif. Monospace-шрифты, как правило, используются для отображения фрагментов кода. Шрифты семейства script и fantasy используются очень редко.

Указание только одного шрифта в качестве значения для font-family рассматривается CSS-валидатором W3C как некое нарушение правил, поэтому всегда следует указывать несколько альтернативных шрифтов, заканчивая список названием предпочтительного семейства шрифтов.

Ввиду наследования многих CSS-свойств дочерними объектами, в случае, когда на странице используется только одна разновидность шрифта, как правило, достаточно указать значение font-family один раз для элемента body. Элементы td, а также элементы формы не наследуют свойства шрифта, поэтому их нужно определять отдельно. Не нужно указывать font-family для каждого элемента, содержащего текст, это непрактично и неоптимально.

Размер шрифта указывается с помощью свойства font-size. В качестве значения, допустимы любые величины в любых единицах измерения (см. 5.4), плюс некие предопределенные значения например xx-small, x-small, small, medium, large, x-large и xx-large.

Свойство font-weight задает вес шрифта. Это свойство имеет несколько допустимых значений, однако на практике используются только два из них: normal и bold.

Стиль шрифта задается с помощью свойства font-style, которое имеет три допустимых значения: normal, italic и oblique. Значение oblique практически не используется по причине того, что поддерживается не всеми браузерами, да и необходимость использования oblique в веб-дизайне возникает крайне редко.

Одной из характеристик шрифта является межстрочный интервал или точнее высота строки. Свойство, отвечающее за этот параметр называется line-height. При обычных обстоятельствах расстояние между строками зависит от вида и размера шрифта и определяется браузером автоматически. Отрицательное значение межстрочного расстояния не допускается. Значение normal заставляет браузер вычислять расстояние между строк автоматически. Любое число больше нуля воспринимается как множитель от размера шрифта текущего текста. Например, значение 1.5 устанавливает полуторный межстрочный интервал. В качестве значений принимаются также любые единицы измерения (см. 5.4). Разрешается использовать процентную запись, в этом случае за 100 процентов берется высота шрифта.

Все вышеперечисленные свойства шрифта могут быть указаны с помощью сокращенной (shorthand) записи CSS свойства font. При этом значения свойств шрифта должны быть перечислены через пробел в следующем порядке: значение font-style, значение font-weight, значение font-size, значение font-family. Высота строки line-height может быть указана после величины размера шрифта, используя знак «/» в качестве разделителя. Рассмотрим несколько примеров:

Сокращенная (shorthand) запись свойств текста

font: 11px Arial, Verdana, sans-serif;

font: bold 12px/14px Tahoma, Arial, Verdana, sans-serif;

font: italic normal 10px Helvetica, Verdana, sans-serif;

Предпочтение следует отдавать сокращенной записи свойств текста там где это возможно для получения более компактного и удобно читаемого CSS.

Помимо вышеперечисленных свойств, существуют также такие свойства, как font-variant, text-decoration (см. 5.5.2) и text-transform.

Дата добавления: 2014-12-16