CSS-шрифты — набор свойств для управления внешним видом текста веб-страниц. Используя различные шрифты для заголовков, абзацев и других элементов, можно задавать определенный стиль письменных сообщений, передавая желаемые эмоции и настроение.

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

Более подробно с правилами вы сможете ознакомиться в предложенной статье.

Форматирование шрифта с помощью CSS-свойств

1. Семейство шрифтов font-family

Свойство используется для выбора начертания шрифта. Поскольку невозможно предсказать, установлен тот или иной шрифт на компьютере посетителя вашего сайта, рекомендуется прописывать все возможные варианты однотипных шрифтов. В таком случае браузер будет проверять их наличие, последовательно перебирая предложенные варианты. Наследуется.

Важно! Если в названии шрифта имеются пробелы или символы (например, #, $, %), то оно заключается в кавычки. Это делается для того, чтобы браузер мог понять, где начинается и заканчивается название шрифта.

Синтаксис

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

Свойство задаёт насыщенность шрифта.

Синтаксис

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

Свойство определяет размер (кегль) шрифта.

Синтаксис

H3 {font-size: small;} h1 {font-size: xx-large;}, em {font-size: large;} p {font-size: 20px;} h3 {font-size: 120%;}

6. Цвет шрифта

Свойство задаёт цвет шрифта с помощью различных систем цветопередачи. Свойство наследуется.

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

P { color: #211C18; }

В нашем примере значение #211C18 означает шестнадцатеричный код цвета. Если вы уже знакомы с шестнадцатеричной системой счисления, то можете пропустить чтение следующего абзаца. Также далее мы расскажем о других способах представления цветов в веб – с помощью цветовых моделей (RGB, HSL) и ключевых слов. Эта информация будет полезна новичкам и рекомендуется к прочтению.

Шестнадцатеричные цвета (hex)

Шестнадцатеричная система счисления (hexadecimal, hex ) основывается на числе 16. Для записи шестнадцатеричного значения используется 16 символов: арабские цифры от 0 до 9 и первые буквы латинского алфавита (A, B, C, D, E, F). Цвет в шестнадцатеричном формате записывается в виде трех двузначных чисел от 00 до FF (перед ними обязательно ставится символ решетки #), что соответствует трем компонентам: Red, Green, Blue (цветовая модель RGB). Иными словами, запись цвета можно представить как #RRGGBB , где первая пара символов определяет уровень красного, вторая – уровень зеленого, третья – уровень синего цвета. Результирующий цвет является сочетанием этих трех цветов.

Сокращенная запись hex-цветов

Некоторые шестнадцатеричные значения цветов можно записать сокращенно. Для этого следует превратить запись вида #RRGGBB в #RGB . Это можно сделать в том случае, когда в hex-числе имеется три пары одинаковых символов.

Сокращенная форма записи встречается довольно часто, и для вашего ознакомления мы приведем несколько примеров сокращений. К слову, hex-значения цветов не чувствительны к регистру – вы можете использовать как прописные, так и строчные буквы, всё зависит от вашего желания и вкуса.

Примеры сокращенной записи hex-цветов:

Цветовая модель RGB

Второй способ указания цвета в CSS – использовать десятичные значения RGB (Red, Blue, Green). Для этого необходимо записать после свойства color ключевое слово rgb , а затем в скобках и через запятую – три числа в диапазоне от 0 до 255, каждое из которых означает интенсивность красного, зеленого и синего цветов (r, g, b). Чем больше число, тем более интенсивен цвет. К примеру, чтобы получить ярко-зеленый цвет, нужно записать:

P { color: rgb(0, 255, 0); }

А вот желтовато-горчичный оттенок имеет такое значение:

Color: rgb(94, 81, 3); /* ниже – тот же цвет, записанный в шестнадцатеричном виде: */ color: #5E5103;

Значение черного цвета записывается как (0, 0, 0) , а белого – (255, 255, 255) . Также допускается указывать эти значения в процентах. Так, число 255 соответствует 100%, следовательно, белый цвет можно задать следующим образом:

Color: rgb(100%, 100%, 100%);

Где искать значения цветов

Возможно, у вас возник вопрос: откуда же брать все эти значения цветов? Существует множество графических редакторов и онлайн-сервисов, с помощью которых можно подбирать цвета и строить цветовые схемы. Одна из наиболее популярных программ, в которой можно выбрать подходящий цвет и получить его значение RGB, hex и не только – Adobe Photoshop. В качестве альтернативы есть специальные сайты, на которых можно легко подобрать не только цвет, но и целую цветовую схему. Отличный пример – сервис Adobe Color CC .

Цветовая модель RGBA

Задать цвет в формате RGBA можно почти так же, как и в RGB. Отличие RGBA от RGB заключается в наличии альфа-канала, который отвечает за прозрачность цвета. Задается прозрачность с помощью числа в диапазоне от 0 до 1, где 0 соответствует полной прозрачности, а 1 , наоборот, означает полную непрозрачность. Промежуточные значения вроде 0.5 позволяют задать полупрозрачный вид (допускается сокращенная запись, без нуля, но с точкой – .5). Например, чтобы сделать текст цветным и слегка прозрачным, нужно записать после свойства color ключевое слово rgba и значение цвета:

P { color: rgba(94, 81, 3, .9); }

Минусом RGBA является то, что его не поддерживает браузер Internet Explorer версии 8 и ранее. Специально для IE8 можно применить следующее решение:

P { color: rgb(94, 81, 3); color: rgba(94, 81, 3, .9); }

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

Цветовые модели HSL (HSLA)

Задавать цвет в CSS можно также с помощью координат цветовой модели HSL (Hue, Saturation, Lightness – тон, насыщенность, светлота). Записывается это так:

P { color: hsl(165, 100%, 50%); }

Первое число в скобках означает тон (hue) и задается в градусах (диапазон чисел от 0 до 359). Вам будет легко понять, почему используются именно градусы, если вы вспомните, как выглядит цветовой круг:

Второе и третье числа в скобках означают насыщенность (saturation) и светлоту (lightness) соответственно. Их значения устанавливаются в процентах от 0 до 100. Чем ниже значение насыщенности, тем более приглушенным становится цвет. Значение saturation, равное нулю, приведет к серому цвету, при этом неважно, какое значение имеет hue. С помощью значения lightness (светлота) можно указать яркость цвета. Низкие значения приводят к темным оттенкам цвета, высокие – к светлым. Значение 100% для lightness означает белый цвет, 0% – черный.

Цветовая модель HSLA работает почти так же, как и HSL, но в ней, аналогично с RGBA, есть альфа-канал, с помощью которого можно задавать прозрачность цвета, указывая необходимое значение в диапазоне от 0 до 1:

P { color: hsla(165, 100%, 50%, .6); }

HSL и HSLA поддерживаются всеми браузерами, кроме Internet Explorer версии 8 и ранее.

Стандартные цвета HTML

Еще один способ представления цветов в веб – это ключевые слова, при помощи которых можно указать цвет для элемента. Пример:

P { color: black; }

Существует 16 стандартных цветов, которые можно записать в значении свойства color:

Эти цвета поддерживают все браузеры. Кроме них есть еще порядка 130 дополнительных ключевых слов для различных оттенков цветов. Полную таблицу этих цветов можно увидеть в справочнике W3C .

Использование таких ключевых слов допустимо, но есть риск, что какое-нибудь слово не воспримется браузером. Поэтому рекомендуется вместо ключевых слов записывать шестнадцатеричный код цвета.

Итоги

В CSS цвет текста задается с помощью свойства color , а его значение можно записать несколькими способами – в шестнадцатеричном (hex) виде, в формате RGB или HSL либо указав ключевое слово. Во избежание неправильного отображения цвета, заданного при помощи ключевого слова, лучше указывать его hex-значение.

Также есть возможность задать элементу прозрачность с помощью альфа-канала (форматы RGBA и HSLA). При этом стоит учитывать, что браузер IE8 и его ранние версии не поддерживают форматы RGBA, HSL и HSLA.

В этом уроке мы рассмотрим последний атрибут тега , который задает цвет текста. По умолчанию текст имеет черный цвет, который выводиться на белом фоне. Для того, чтобы изменить цвет текста в html , нужно применить атрибут color тега :