Font-family, font-size, color и другие свойства css для задания параметров шрифта. Задаем цвет текста

Результат данного примера показан на рис. 1.

Рис. 1. Изменение вида текста

Примечание

Для изменения цвета текста предназначено стилевое свойство color , семейство шрифта задаётся свойством font-family , а размер текста через свойство font-size .

Первое слово этого предложения написано шрифтом Arial, выделено красным цветом и увеличено в размерах.

Браузеры

В таблице браузеров применяются следующие обозначения.

• - элемент полностью поддерживается браузером;
• - элемент браузером не воспринимается и игнорируется;
• - при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.

Число указывает версию браузреа, начиная с которой элемент поддерживается.

Здравствуйте, уважаемые читатели блога сайт. В сегодняшней статье речь пойдет о свойствах каскадных таблиц стилей, которые отвечают за параметры шрифта элементов web-страниц. Рассмотрим способы их использования и посмотрим как они работают. Если вы впервые слышите о понятии стилевое оформление страницы и ничего не знаете о CSS, то советую вам начать со статьи « ».

Font-family — задаем имя шрифта в CSS

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

font-family: <список имен шрифтов разделенных запятыми>

Список имен шрифтов задается в виде их названий (например Arial, Verdana или Times New Roman). Если имя шрифта содержит пробелы, то его необходимо взять в кавычки. Можно указать несколько наименований шрифтов, разделив их запятыми. В этом случае браузер сначала будет искать первый из указанных шрифтов, в случае неудачного поиска - второй, третий и так далее:

p { font-family: Arial, Verdana, "Times New Roman", san-serif; }

В данном примере браузер сначала будет искать на компьютере пользователя шрифт Arial и если найдет, то отобразит все элементы p этим же шрифтом. Если же Arial на компьютере пользователя не найдется, тогда браузер будет искать Verdana, затем, в случае неудачи - Times New Roman, и так далее. Последним в списке имен шрифтов в данном примере идет не имя конкретного шрифта, а имя целого семейства шрифтов , представляющего целые наборы аналогичных шрифтов.

Таким образом можно задавать целые семейства шрифтов. Таких семейств всего пять:

• serif — шрифты с засечками;
• sans-serif -шрифты без засечек;
• cursive — шрифты, имитирующие рукописный текст;
• fantasy — декоративные шрифты;
• monospace — моноширинные шрифты.

Кроме имен шрифтов, свойству font-family можно задать особое значение inherit , которое говорит браузеру, что текст данного элемента нужно отображать таким же шрифтом, как и текст родительского элемента.

Font-size — задаем размер шрифта с помощью CSS

Свойство стиля font-size определяет размер шрифта для какого-либо элемента в html-коде. Синтаксис применения:

font-size: <размер>|xx-small|x-small|small|medium|large|x-large|xx-large|larger|smaller|inherit

Давайте теперь рассмотрим подробнее способы применения данного свойства.

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

• px — пиксели;
• pt — пункты;
• in — дюймы;
• cm — сантиметры;
• mm — миллиметры;
• pc — пики.

Обозначение единицы измерения указывают после самого значения. Например:

p { font-size: 10px; }
strong { font-size: 12pt; }

При использовании этих стилей, текст во всех элементах p на странице будет размером 10 пикселей, а элементов strong 12 пунктов.

Для задания относительных размеров шрифта используются следующие обозначения:

• em — размер буквы «m» текущего шрифта;
• ex — размер буквы «x» текущего шрифта;
• % — проценты от размера шрифта родительского элемента.

Например:

h1 { font-size: 3em; }
em { font-size: 150%; }

В этом примере заголовок h1 будет нарисован шрифтом в три раза большего размера, чем тот, который использовался бы по умолчанию. А элементы em в полтора раза большего размера.

Кроме числовых значений, свойству font-size можно задавать одно из семи символьных значений: xx-small, x-small, small, medium, large, x-large или xx-large, — которые задают определенные размеры шрифта от самого маленького до самого большого:

Ну, и последний способ это использование значений «larger» и «smaller», которые позволяют увеличивать и уменьшать размер шрифта относительно унаследованного. Например, если для родительского элемента определен шрифт размера small, то значение larger установит для текущего элемента размер шрифта medium.

Свойство color — задаем цвет текста

Атрибут стиля color задает цвет текста. Синтаксис:

Цвет можно задать с помощью RGB-кода, который записывается в формате:

#<доля красного цвета><доля зеленого цвета><доля синего цвета>

Все доли записываются в формате шестнадцатеричных чисел от 00 до FF. Например, чтобы все заголовки h2 на странице выводились красным цветом, необходимо написать такой код CSS:

h2 { color: #ff0000; }

Также возможно задавать цвет с помощью имен. Красный цвет будет red, черный — black, белый — white. Например:

h2 { color: red; }

Свойства font-weight, font-style, text-decoration и другие

С помощью свойства стилей font-weight задают «жирность» шрифта. Синтаксис:

font-weight: normal|bold|bolder|lighter|100|200|300|400|500|600|700|800|900

В качестве значения свойства может использоваться одно из семи числовых значений от 100 до 900, либо одно из именованных normal, bold, bolder, lighter. Значение normal соответствует 400, а bold — 7000. Но на практике большинство браузеров не поддерживают атрибут font-weight в полной мере. Поэтому все значения, которые меньше 400 будут соответствовать normal, а все, что больше bold. Причем значения bolder и lighter не работают.

Пример использования:

em { font-weight: bold; }

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

С помощью свойства text-decoration можно задавать различные украшательства тексту, такие как подчеркивание текста или зачеркивание :

text-decoration: none|underline|overline|line-through|blink

Для этого атрибута доступны пять значений:

• none — отменяет все эффекты, в том числе отменяет подчеркивание у ссылок , которое задано по умолчанию;
• underline — устанавливает подчеркнутые текст;
• overline — «надчеркивает» текст, то есть проводит линию над текстом;
• line-through — зачеркивает текст;
• blink — устанавливает мигающий текст. Такой текст периодически, примерно раз в секунду исчезает, потом вновь появляется на прежнем месте. Это значение в настоящее время не поддерживается браузерами и осуждается в CSS3.

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

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

Нюансом свойства text-decoration является то, что для него можно указать сразу несколько значений:

text-decoration:underline overline line-through;

Результат будет такой:

перечеркнутый подчеркнутый и надчеркнутый текст!

Свойство стиля text-transform позволяет задавать регистр символов текста :

text-transform: capitalize|uppercase|lowercase|none

Свойство может иметь одно из четырех значений:

• capitalize — преобразовывает к верхнему регистру первую букву каждого слова;
• uppercase — текст в верхнем регистре;
• lowercase — текст в нижнем регистре;
• none — не меняет регистр символов.

Для увеличения и уменьшения расстояния между строками текста используется атрибут line-height . В качестве значения можно задавать как абсолютную так и относительную величину расстояния, указав соответствующую единицу измерения (px, pt, em и др.). В случае отсутствия единицы измерения указанное значение воспринимается браузером как множитель. Например, значение 1.5 устанавливает полуторный междустрочный интервал:

p { line-height: 1.5 }

Для управления расстоянием между символами текста существует свойство letter-spacing . Оно позволяет задавать дополнительное расстояние между буквами, которое будет прибавляться к изначальному. В качестве значений принимаются любые единицы длины, принятые в CSS - пиксели (px), пункты (pt) и др. Допустимо использовать отрицательные значения. В этом случае расстояние между символами уменьшится:

em { letter-spacing: 5px; }

Аналогичный атрибут word-spacing задает дополнительное расстояние между словами текста:

h1 { word-spacing: 5px }

Ну и напоследок необходимо рассмотреть свойство стиля font , позволяющее задавать сразу несколько параметров для шрифта . Синтаксис:

font: font-size font-family

Обязательными параметрами являются только размер шрифта и его имя, остальные параметры могут отсутствовать.

Например, чтобы задать для текста абзацев шрифт «Times New Roman» размером 10 пунктов, достаточно написать следующее правило CSS:

p { font: 10pt «Times New Roman» }

А если мы захотим выводить текст заголовков первого уровня рубленым шрифтом размером 15 пикселей и курсивным начертанием, то подойдет такое правило:

p { font: italic 12px sans-serif }

На этом рассказывать о свойствах CSS отвечающих за отображение текста на html-страницах я закончу. Чтобы узнать больше о каскадных таблицах стилей не забудьте подписаться на обновления блога и читайте статьи из раздела « ». До новых встреч!

Тег представляет собой контейнер для изменения характеристик шрифта, таких как размер, цвет и гарнитура. Хотя этот тег до сих пор поддерживается всеми браузерами, он считается устаревшим и от его использования рекомендуется отказаться в пользу стилей.