CSS-шрифты — набор свойств для управления внешним видом текста веб-страниц. Используя различные шрифты для заголовков, абзацев и других элементов, можно задавать определенный стиль письменных сообщений, передавая желаемые эмоции и настроение.
Окунаясь в многообразие шрифтов, не забывайте, что текст основного содержимого веб-страницы должен быть в первую очередь читабельным. Не рекомендуется использовать более двух шрифтов на странице, а желаемого контраста можно достигнуть за счет комбинирования шрифтов разной толщины, размера, начертания или же при помощи цвета.
Более подробно с правилами вы сможете ознакомиться в предложенной статье.
Форматирование шрифта с помощью CSS-свойств
1. Семейство шрифтов font-family
Свойство используется для выбора начертания шрифта. Поскольку невозможно предсказать, установлен тот или иной шрифт на компьютере посетителя вашего сайта, рекомендуется прописывать все возможные варианты однотипных шрифтов. В таком случае браузер будет проверять их наличие, последовательно перебирая предложенные варианты. Наследуется.
Важно! Если в названии шрифта имеются пробелы или символы (например, #, $, %), то оно заключается в кавычки. Это делается для того, чтобы браузер мог понять, где начинается и заканчивается название шрифта.
font-family | |
---|---|
Значения: | |
family-name | Название (имя) семейства шрифтов, например, Times , Courier , Arial . Рекомендуется указывать вместе с базовым семейством. |
generic-family | Базовое семейство. CSS определяет пять базовых семейств шрифтов: Шрифты с засечками — Serif (Times New Roman, Times, Garamond, Georgia) Рубленые шрифты — Sans-serif (Helvetica, Geneva, Arial, Verdana, Trebuchet, Univers) Моноширинные шрифты — Monospace (Courier, Courier New, Andele Mono) Рукописные шрифты — Cursive (Comic Sans, Gabriola, Monotype Corsiva, Author, Zapf Chancery) Аллегорические шрифты (Western, Woodblock, Klingon) |
initial | |
inherit |
Синтаксис
P {font-family: "Times New Roman", Georgia, Serif;}
2. Стиль начертания шрифта font-style
Свойство позволяет выбрать стиль начертания для текста. При этом разница между курсивом и наклонным текстом заключается в том, что курсивное начертание вносит небольшие изменения в структуру каждой буквы, а наклонный текст представляет собой наклонную версию прямого текста. Наследуется.
Синтаксис
H1 {font-style: normal;} h1 {font-style: italic;} h1 {font-style: oblique;} Рис. 1. Свойство font-style
3. Вариант начертания шрифта font-variant
Свойство позволяет выводить шрифт малыми заглавными буквами. Наследуется.
Синтаксис
H1 {font-variant: normal;} h1 {font-variant: small-caps;} Рис. 2. Свойство font-variant
4. Насыщенность шрифта font-weight
Свойство задаёт насыщенность шрифта.
Значения: | |
normal | Значение по умолчанию, устанавливает нормальную насыщенность шрифта. Эквивалентно значению насыщенности, равной 400. |
bold | Делает шрифт текста полужирным. Эквивалентно значению насыщенности, равной 700. |
bolder | Насыщенность шрифта будет больше, чем у предка. |
lighter | Насыщенность шрифта будет меньше, чем у предка. |
100, 200, 300, 400, 500, 600, 700, 800, 900 | Значение 100 соответствует самому легкому варианту начертания шрифта, а 900 — самому плотному. При этом, эти числа не определяют конкретной плотности, т.е. 100, 200, 300 и 400 могут соответствовать одному и тому же варианту слабой насыщенности начертания шрифта; 500 и 600 — средней насыщенности, а 700, 800 и 900 могут выводить одинаковое очень насыщенное начертание. Распределение плотности так же зависит от количества уровней насыщенности, определенных в конкретном семействе шрифтов. |
initial | Устанавливает значение свойства в значение по умолчанию. |
inherit | Наследует значение свойства от родительского элемента. |
Синтаксис
H1 {font-weight: normal;} span {font-weight: bold;} span {font-weight: bolder;} span {font-weight: lighter;} h1 {font-weight: 100;} Рис. 3. Свойство font-weight
5. Размер шрифта font-size
Свойство определяет размер (кегль) шрифта.
font-size | |
---|---|
Значения: | |
absolute-size | xx-small , x-small , small , medium , large , x-large , xx-large . Абсолютные размеры определены относительно друг друга и коэффициент масштабирования между двумя соседними абсолютными размерами составляет примерно 1,5 при переходе от меньшего к большему и 0,66 при переходе от большего к меньшему. В качестве стандартного размера принимается medium . |
relative-size | smaller , larger . Относительные размеры обусловливают изменение размера шрифта элемента относительно родителя. При этом размер шрифта может выйти за рамки размеров, предполагаемых для xx-small и xx-large . |
длина | Размер шрифта устанавливается с помощью положительных значений единиц длины — px , как целых, так и дробных. |
% | Относительное значение, вычисляется на основании любого размера, унаследованного от родительского элемента. Обеспечивает более точную настройку вычисляемого размера шрифта. Задание размеров шрифта с помощью em эквивалентно процентному значению. |
initial | Устанавливает значение свойства в значение по умолчанию. |
inherit | Наследует значение свойства от родительского элемента. |
Синтаксис
H3 {font-size: small;} h1 {font-size: xx-large;}, em {font-size: large;} p {font-size: 20px;} h3 {font-size: 120%;}
6. Цвет шрифта
Свойство задаёт цвет шрифта с помощью различных систем цветопередачи. Свойство наследуется.
color | |
---|---|
Значения: | |
HEX | В данной системе используются арабские десятичные цифры от 0 до 9 и латинские буквы от A до F. Для веб-дизайна взяты 16 основных цветов, так называемый шестнадцатеричный код цвета #RRGGBB , где каждая пара отвечает за свою долю цвета: RR – красный, GG – зеленый и BB – синий. Каждая доля цвета находится в диапазоне от 00 до FF. |
RGB | RedGreenBlue , обозначает количество соответствующего тона (красный,зеленый,синий) в получаемом цвете. |
RGBA | Система цветопередачи RGB, расширенная параметром Alpha , который используется для управления смешиванием цветов. Значение поддерживается IE9+, Firefox 3+, Chrome, Safari, and in Opera 10+. Последнее число определяет степень прозрачности, задается значением от 0 до 1, где 0 соответствует полной прозрачности, а 1 — непрозрачности. |
HSL | Hue, Saturation, Lightness (Intensity)
- оттенок (тон), насыщенность, светлота, цветовая модель описания цветов. Первое значение — оттенок — определяется градусом поворота цветового спектра по часовой стрелке от 0° до 360°, где 60° — желтый, 120° — зеленый, 180° — голубой, 240° — синий, 300° — фиолетовый. Второе значение определяет насыщенность выбранного оттенка и указывается в процентах в диапазоне от 0% до 100%. Чем ближе данное значение к 100%, тем цвет более чистый и сочный. Светлота или яркость (Lightness) указывается в процентах, чем выше процент, тем ярче становится цвет. Значения 0% и 100% обозначают соответственно чёрный (отсутствие света) и белый (засвеченный) цвета, в независимости от того, какой оттенок из цветового круга был выбран изначально. Оптимальное значение яркости цвета равняется 50%. Значение поддерживается IE9+, Firefox, Chrome, Safari, Opera 10+ |
HSLA | Задает прозрачность (через Альфа-канал) элемента. Тон (от 0 до 360), насыщенность (от 0% до 100%), светлота (от 0% до 100%), прозрачность (от 0 до 1). Значение поддерживается IE9+, Firefox 3+, Chrome, Safari, and in Opera 10+. |
имя цвета | Значение цвета задаётся кроссбраузерным названием. В настоящий момент существует |
Возможность управлять шрифтом - меняете ли вы его семейство, кегель или толщину - позволяет увеличить блеск и неповторимость WEB-страниц.
font-family
Определяет семейства шрифта, используемого в этом тексте. Может быть несколько таких семейств, отделенные друг от друга запятыми. Приоритет определяется порядком в этом списке.
Значение:
- имя семейства - семейства шрифта, применяемое для вывода текста. Имена, состоящие из нескольких слов, должны заключаться в кавычки.
- имя типового шрифта, применяемого для вывода текста. Типовыми могут быть следующие шрифты: serif, sans-serif, fantasy и monospce.
font-style
Определяет начертания шрифта, такие как курсив или наклонное.
Значение:
- italic - курсив.
- oblique - наклонное начертание. Это начертание исключительно экранного шрифта. Он имеет несколько меньший наклон чем курсив.
- inherit - применяется значение родительского элемента.
font-variant
Определяет, будет ли шрифт выведен в виде малых прописных букв.
Значение:
- normal - обычное начертание (по умолчанию).
- small-caps - выводит шрифт в виде малых прописных букв.
- inherit - применяется значение родительского элемента.
font-weight
cвойства шрифта font css
Определяет толщину выводимого шрифта.
Значение:
- normal - обычное начертание (по умолчанию).
- bold - полужирное начертание. Полужирное начертание выделяет текст. Линии становятся толще, а сам текст немного шире, чем при обычном начертании.
- bolder - жирный шрифт.
- lighter - светлый шрифт. Тонкие, светлые начертания шрифтов производят менее сильное впечатление, чем обычные или полужирные, но они незаменимы, когда требуется легкий и простой внешний вид.
- 100-900 - число, указывающее толщину шрифта. 100 соответствует самой светлой толщине (lighter), 400-normal, 700- bold, 900- bolder.
- inherit - применяется значение родительского элемента.
font-stretch
Определяет толщину шрифта.
Значение:
- normal - обычная ширина (по умолчанию)
- wider- увеличение текущей ширины.
- narrower - уменьшает текущую ширину на единицу.
- ultra-condensed - наименьшее значение ширины.
- extra-condensed - значение большее, чем предыдущее
- condensed - значение большее, чем предыдущее.
- semi-condensed - значение большее, чем предыдущее.
- semi-expanded - значение большее, чем при обычной толщине.
- expanded - значение большее, чем предыдущее.
- extra-expanded - значение большее, чем предыдущее.
- ultra-expanded - максимальное значение ширины.
- inherit - применяется значение родительского элемента.
font-size
Определяет кегель (высоту символов) шрифта.
Значение:
- абсолютный размер - для выражения кегля шрифта используется ключевые слова: xx-small(крайне малый), small (малый), medium (средний) (по умолчанию), large (большой), x-large (очень большое), xx-large (крайне большое).
- относительный размер - для выражение кегля шрифта используется ключевые слова: larger (меньше), smaller (больше),
- любое соответствующая стандарту высота - абсолютный размер шрифта. Отрицательное значение не допускается.
- любое соответствующее стандарту процентное значение.
- inherit - применяется значение родительского элемента.
cвойства шрифта font css
font-size-adjust
Определяет соотношение ширины и высоты символов, которые поддерживается при установке кегля шрифта. Это дает пользователю регулировать изменения высоты текста.
Значение:
- none - по умолчанию.
- любое соответствующее стандартам значение - число, представляющее соотношение высоты и ширины символов.
- inherit - применяется значение родительского элемента.
font
Удобное свойство для установки сразу всех параметров шрифта. Если какие-то значение пропущены, то берется их значение по умолчанию.
Значение:
- font-style - начертание.
- font-variant - значение, определяющее вывод шрифта в виде малых прописных букв.
- font-weight- толщина.
- font-size - кегль.
- line-height - интерлиньяж.
- font-family - семейство шрифтов.
- inherit - применяется значение родительского элемента.
cвойства шрифта font css
Внедрения индивидуальных шрифтов.
До появления Internet Explorer 4.0 Web-мастер должен были использовать встроенные шрифты в браузер или использовать шрифты, доступные в системе. CSS представляет WEB-мастеру возможность указания отображаемых шрифтов, которые загружаются вмести с Web-страницей, что гарантирует правильную обработку страницы. Загружаемый шрифт определяется с помощью новых элементов в синтаксис CSS. Ниже приведен синтаксис для определения загружаемого шрифта в CSS:
@font-face {font-family: fontName ; src: url(failMame.eot) }
значение fontName, на которое впоследствии ссылается свойство CSS font-family, определяется пользователем. Ниже приведен полный пример:
Текст отображается с использованием загружаемого шрифта
после определения нового шрифта его имя может быть использовано как действительное для свойства font-family. Свойство font-family может быть связано с равным списком шрифтов, так что если первый в списке шрифтне может быть загружен, то браузер попытается загрузить следующий шрифт или семейство шрифтов. В данном примере последним определенным шрифтом является sans-serif, что позволяет браузеру использовать любой шрифт семейства sans-serif для воспроизведения элемента.
Параметры шрифта
Начнем с атрибутов стиля, задающих параметры шрифта, которым набран текст. Ведь текст на Web-страницах - всему голова.
Атрибут стиля font-family задает имя шрифта, которым будет выведен текст:
font-family: <список имен шрифтов, разделенных запятыми> |inherit
Имена шрифтов задаются в виде их названий, например, Arial или Times New Roman. Если имя шрифта содержит пробелы, его нужно взять в кавычки:
P { font-family: Arial }
H1 (font-family: "Times New Roman" }
Если данный атрибут стиля присутствует во встроенном стиле, кавычки заменяют апострофами:
Если указанный нами шрифт присутствует на компьютере посетителя, Web- обозреватель его использует. Если же такого шрифта нет, то текст выводится шрифтом, заданным в настройках по умолчанию. И наша Web-страница, возможно, будет выглядеть не так, как мы задумывали. (Впрочем, шрифты Arial и Times New Roman присутствуют на любом компьютере, работающем под управлением Win- dows.) Можно указать несколько наименований шрифтов через запятую:
P { font-family: Verdana, Arial }
Тогда Web-обозреватель сначала будет искать первый из указанных шрифтов, в случае неудачного поиска - второй, потом третий и т. д. Вместо имени конкретного шрифта можно задать имя одного из семейств шрифтов , представляющих целые наборы аналогичных шрифтов. Таких семейств пять: serif (шрифты с засечками), sans-serif (шрифты без засечек), cursive (шрифты, имитирующие рукописный текст), fantasy (декоративные шрифты) и monospace (моноширинные шрифты):
H2 { font-family: Verdana, Arial, sans-serif }
Особое значение inherit указывает, что текст данного элемента Web-страницы должен быть набран тем же шрифтом, что и текст родительского элемента. Говорят, что в данном случае элемент Web-страницы "наследует" шрифт от родительского элемента. Это, кстати, значение атрибута стиля font-family по умолчанию. Атрибут стиля font-size определяет размер шрифта:
font-size: <размер >|xx-small|x-small|small|medium|large|x-large|xx-large|larger|smaller|inherit
Размер шрифта можно задать в абсолютных и относительных величинах. Для этого используется одна из единиц измерения , поддерживаемая CSS (табл. 8.1).
Таблица 8.1. Единицы измерения размера, поддерживаемые стандартом CSS
Обозначение выбранной единицы измерения указывают после самого значения:
P { font-size: 10pt } STRONG { font-size: 1cm } EM { font-size: 150 % }
Отметим, что все приведенные в табл. 8.1 единицы измерения подходят для задания значений других атрибутов стилей CSS.
Кроме числовых, атрибут font-size может принимать и символьные значения. Так, значения от xx-small до xx-large задают семь предопределенных размеров шрифта, от самого маленького до самого большого. А значения larger и smaller представляют следующий размер шрифта, соответственно, по возрастанию и убыванию. Например, если для родительского элемента определен шрифт размера medium, то значение larger установит для текущего элемента размер шрифта large.
Значение inherit указывает, что данный элемент Web-страницы должен иметь тот же размер шрифта, что и родительский элемент. Это значение атрибута стиля font- size по умолчанию.
Атрибут стиля color задает цвет текста:
color: <цвет> |inherit
В главе 7 мы упоминали, что цвет можно задать так называемым RGB-кодом (Red, Green, Blue - красный, зеленый, синий). Он записывается в формате
#<доля красного цвета><доля зеленого цвета><доля синего цвета> ,
где доли всех цветов указаны в виде шестнадцатеричных чисел от 00 до FF. Зададим для текста красный цвет:
H1 { color: #FF0000 } А теперь серый цвет: ADDRESS { color: #CCCCCC }
Кроме того, CSS позволяет задавать цвета по именам. Так, значение black соответствует черному цвету, white - белому, red - красному, green - зеленому, а blue - синему.
H1 { color: red }
Полный список имен и соответствующих им цветов можно посмотреть на Web-странице http://msdn.microsoft.com/en-us/library/aa358802%28v=VS.85%29.aspx .
Значение inherit указывает, что данный элемент Web-страницы должен иметь тот же цвет шрифта, что и родительский элемент. Это значение атрибута стиля font- size по умолчанию.
ВНИМАНИЕ!
Значение inherit поддерживают практически все атрибуты стиля CSS. Оно говорит Web-обозревателю, что элемент Web-страницы, к которому привязан стиль, "наследует" значение соответствующего параметра у родительского элемента. У всех атрибутов это значение по умолчанию. В дальнейшем мы не будем описывать данное значение у каждого атрибута стиля; если же какой-то атрибут стиля не поддерживает его, мы специально об этом упомянем.
С помощью атрибута стиля color мы можем, например, задать цвет горизонтальной линии HTML.
Атрибут стиля opacity позволяет указать степень полупрозрачности элемента Web-страницы:
opacity: <числовое значение>|inherit
Значение полупрозрачности представляет собой число от 0 до 1. При этом 0 обозначает полную прозрачность элемента (т. е. элемент фактически не виден), а 1 - полную непрозрачность (это обычное поведение).
Вот пример задания половинной прозрачности (значение 0,5) для текста фиксированного форматирования:
PRE { opacity: 0.5 }
Отметим, как мы указали дробное число - вместо символа запятой здесь используется точка.
НА ЗАМЕТКУ
Полупрозрачность обычно целесообразна только для создания специальных эффектов. В обычном тексте применять ее не рекомендуется, т. к. это может обескуражить посетителя.
Атрибут стиля font-weight устанавливает "жирность" шрифта:
font-weight: normal|bold|bolder|lighter|100|200|300|400|500|600|700|800|900|inherit
Здесь доступны семь абсолютных значений от 100 до 900, представляющих различную "жирность" шрифта, от минимальной до максимальной; при этом обычный шрифт будет иметь "жирность" 400 (или normal), а полужирный - 700 (или bold). Значение по умолчанию - 400 (normal). Значения bolder и lighter являются относительными и представляют следующие степени "жирности" соответственно в бóльшую и меньшую сторону.
CODE { font-weight: bold }
Атрибут font-style задает начертание шрифта:
font-style: normal|italic|oblique|inherit
Доступны три значения, представляющие обычный шрифт (normal), курсив (italic) и особое декоративное начертание, похожее на курсив (oblique).
Атрибут стиля text-decoration задает "украшение" (подчеркивание или зачеркивание), которое будет применено к тексту:
text-decoration: none|underline|overline|line-through|blink|inherit
Здесь доступны пять значений (не считая inherit):
None убирает все "украшения", заданные для шрифта родительского элемента;
Underline подчеркивает текст;
Overline "надчеркивает" текст, т. е. проводит линию над строками;
Line-through зачеркивает текст;
Blink делает шрифт мерцающим (на данный момент не поддерживается Safari).
ВНИМАНИЕ!
Не следует без особой необходимости задавать для текста подчеркивание. Дело в том, что Web-обозреватели по умолчанию выводят гиперссылки подчеркнутыми, и подчеркнутый текст, не являющийся гиперссылкой, может обескуражить посетителя.
Атрибут стиля font-variant позволяет указать, как будут выглядеть строчные буквы шрифта:
font-variant: normal|small-caps|inherit
Значение small-caps задает такое поведение шрифта, когда его строчные буквы выглядят точно так же, как прописные, просто имеют меньший размер. Значение normal задает для шрифта обычные прописные буквы.
Атрибут стиля text-transform позволяет изменить регистр символов текста:
text-transform: capitalize|uppercase|lowercase|none|inherit
Мы можем преобразовать текст к верхнему (значение uppercase этого атрибута) или нижнему (lowercase) регистру, преобразовать к верхнему регистру первую букву каждого слова (capitalize) или оставить в изначальном виде (none).
Атрибут стиля line-height задает высоту строки текста:
line-height: normal|<расстояние> |inherit
Здесь можно задать абсолютную и относительную величину расстояния, указав соответствующую единицу измерения CSS (см. табл. 8.1). При ее отсутствии заданное нами значение сначала умножается на высоту текущего шрифта и затем используется. Таким образом, чтобы увеличить высоту строки вдвое по сравнению с обычной, мы можем написать:
P { line-height: 2 }
Значение normal этого атрибута возвращает управление высотой строки Web-обозревателю.
Атрибут стиля letter-spacing позволяет задать дополнительное расстояние между символами текста:
letter-spacing: normal|<расстояние>
Отметим, что это именно дополнительное расстояние; оно будет добавлено к изначальному, установленному самим Web-обозревателем.
Здесь также можно задать абсолютное и относительное расстояние, указав соответствующую единицу измерения CSS (см. табл. 8.1). Расстояние может быть положительным и отрицательным; в последнем случае символы шрифта будут располагаться друг к другу ближе обычного. Значение normal устанавливает дополнительное расстояние по умолчанию, равное нулю.
Атрибут стиля letter-spacing не поддерживает значение inherit.
Вот пример задания дополнительного расстояния между символами равного пяти пикселам:
H1 { letter-spacing: 5px }
Текст, набранный такими символами, будет выглядеть разреженным.
А здесь мы задали отрицательное дополнительное расстояние между символами равным двум пикселам:
H6 { letter-spacing: -2px }
Эти два пиксела будут вычтены из изначального расстояния, в результате символы сблизятся, а текст станет выглядеть сжатым. Возможно, символы даже налезут друг на друга.
Аналогичный атрибут стиля word-spacing задает дополнительное расстояние между отдельными словами текста:
word-spacing: normal|<расстояние>
H1 { word-spacing: 5mm }
Ну, 5 мм, пожалуй, многовато… Хотя это всего лишь пример.
И напоследок рассмотрим атрибут стиля font, позволяющий задать одновременно сразу несколько параметров шрифта:
font: [<начертание> ] [<вид строчных букв> ] [<"жирность"> ] [<размер> ] <имя шрифта>
Как видим, обязательным является только имя шрифта - остальные параметры могут отсутствовать.
Задаем для текста абзацев шрифт Times New Roman размером 10 пунктов:
P { font: 10pt "Times New Roman" }
А для заголовков шестого уровня - шрифт Arial размером 12 пунктов и курсивного начертания:
H6 { font: italic 12pt Verdana }