Font-family, font-size, color и другие свойства css для задания параметров шрифта. Использование Комбинации Процентов и Em. Font-size — задаем размер шрифта с помощью CSS

Рис. 5.23. Корректировка шрифта Times

Изображение на рис. 5.23 было обработано в Photoshop, по скольку на момент написания данной книги свойство font size adjust поддерживается очень небольшим количеством веб бро узеров.

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

Свойство font

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

h1 {font family: Verdana, Helvetica, Arial, sans serif; font size: 30px; font weight: 900; font style: italic; font variant: small caps;}

h2 {font family: Verdana, Helvetica, Arial, sans serif; font size: 24px; font weight: bold; font style: italic; font variant: normal;}

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

Вообще говоря, в объявлении font могут задаваться любые значения каждого из перечисленных свойств шрифта или значение «системный шрифт» (описанное в разделе «Применение системных шрифтов»). Та ким образом, предыдущий пример можно было бы сократить следую щим образом:

h1 {font: italic 900 small caps 30px Verdana, Helvetica, Arial, sans serif;} h2 {font: bold normal italic 24px Verdana, Helvetica, Arial, sans serif;}

и получить точно такой же результат (рис. 5.24).

Рис. 5.24. Обычные правила оформления шрифта

Я говорю, что запись стилей «можно было бы» сократить таким обра зом, потому что существуют еще некоторые другие возможности, обу словленные относительной свободой записи свойства font. Вниматель но рассмотрев предыдущий пример, можно увидеть, что порядок зада ния первых трех значений различен. В правиле для h1 первые три зна чения – font style, font weight и font variant – размещены в указанной последовательности, тогда как во втором правиле они упорядочены так: font weight, font variant и font style. Здесь нет ошибки, потому что эти три свойства могут быть записаны в произвольном порядке. Более того, если значение любого из них равно normal, оно может быть совсем опущено. Поэтому следующие правила эквивалентны предыду щему примеру:

h1 {font: italic 900 small caps 30px Verdana, Helvetica, Arial, sans serif;} h2 {font: bold italic 24px Verdana, Helvetica, Arial, sans serif;}

В этом примере значение normal в правиле для h2 было пропущено, но результат совершенно аналогичен предыдущему примеру.

Однако важно понимать, что такая свобода касается только первых трех значений свойства font. Поведение двух последних подчиняется намного более строгим правилам. Значения font size и font family не только должны быть расположены в установленном порядке, но и обя заны всегда присутствовать в объявлении font. И точка, никаких вари антов. Если какое либо из них будет пропущено, все правило будет признано недействительным, и, скорее всего, агент пользователя его

Рис. 5.25. Необходимость наличия и размера, и семейства

проигнорирует. Таким образом, следующие правила обеспечат резуль тат, приведенный на рис. 5.25:

Установка высоты строки

До настоящего времени мы рассматривали свойство font так, как буд то оно имеет всего пять значений, что не совсем верно. Существует еще возможность задания высоты строки с помощью свойства font, несмот ря на то, что line height – это свойство текста, а не шрифта. Высота строки задается как дополнение к значению font size, отделенное от него прямым слэшем (/):

body {font size: 12px;}

h2 {font: bold italic 200%/1.2 Verdana, Helvetica, Arial, sans serif;}

Эти правила, проиллюстрированные на рис. 5.26, задают для всех эле ментов h2 полужирное курсивное начертание (применяя гарнитуру од ного из семейства рубленых шрифтов), свойству font size – значение 24px (вдвое больше размера элемента body), а свойству line height – зна чение 30px.

Рис. 5.26. Введение высоты строки

Значение line height можно не указывать, как и первые три значения свойства font. Включив все таки line height, помните, что значение font size всегда предшествует line height, и эти два значения всегда разделяются наклонной чертой.

Возможно, я повторюсь, но это одна из самых распространенных оши бок авторов, использующих CSS, поэтому говорю еще раз: значения font size и font family свойства font являются обязательными, указы ваться они должны именно в этом порядке. Все остальные значения абсолютно необязательны.

Свойство line height обсуждается в следующей главе.

Как правильно использовать сокращенную запись свойств

Важно помнить, что свойство font, поддерживая возможность записи в сокращенном виде, может демонстрировать неожиданные результа ты в случае небрежного его применения. Рассмотрим следующие пра вила, которые проиллюстрированы на рис. 5.27:

h1, h2, h3 {font: italic small caps 250% sans serif;} h2 {font: 200% sans serif;}

h3 {font size: 150%;}

This is an h1 element

This is an h2 element

This is an h3 element

Текст элемента h2 не стал ни курсивом, ни капителью, и ни один из элементов не выделен полужирным шрифтом? И это правильно. При использовании сокращенной записи свойства font любым опущенным величинам присваиваются значения по умолчанию. Таким образом, предыдущий пример мог бы быть записан следующим образом, что аб солютно эквивалентно:

h1, h2, h3 {font: italic normal small caps 250% sans serif;} h2 {font: normal normal normal 200% sans serif;}

h3 {font size: 150%;}

Рис. 5.27. Краткая запись свойств

Здравствуйте, уважаемые читатели блога сайт. В сегодняшней статье речь пойдет о свойствах каскадных таблиц стилей, которые отвечают за параметры шрифта элементов 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-страницах я закончу. Чтобы узнать больше о каскадных таблицах стилей не забудьте подписаться на обновления блога и читайте статьи из раздела « ». До новых встреч!

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 свойства, которые позволяют изменить цвет текста, добавить к нему тень, выровнять его и добавить к нему подчеркивание, надчеркивание или вовсе его зачеркнуть. В этой главе будет рассмотрено как изменить шрифт текста, какой можно выбрать для него стиль и напоследок мы рассмотрим, как поменять размер текста, установленный по умолчанию.

Разница между семействами шрифтов Sans-serif и Serif

Семейства шрифтов в CSS

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

• sans-serif - шрифты без засечек, считается что они лучше читаются на экране компьютера, чем шрифты семейства serif.
• serif - семейство шрифтов с засечками. У многих людей они ассоциируются с газетными статьями. Засечки - декоративные штрихи и черточки по краям букв.
• monospace - семейство, состоящее из шрифтов, символы которых имеют одинаковую фиксированную ширину. Такие шрифты используются в основном для отображения примеров кода программы.
• cursive - шрифты, имитирующие рукописный текст.
• fantasy - художественные и декоративные шрифты. Они не очень широко распространены, доступны не на всех компьютерах и редко используются в веб-дизайне.

Свойство font представляет собой свойство-сокращение, в котором можно использовать следующие свойства CSS: font-size , font-style , font-weight , line-height , font-family , font-variant .

Синтаксис

Свойства font-style , font-variant , font-weight можно переставлять в любом порядке.

Обязательными свойствами являются font-size и font-family , остальные можно опускать, сохраняя порядок.

Свойство line-height пишется через слеш после свойства font-size .

Селектор { font: font-size font-family; }

Селектор { font: italic 16px/20px Arial; }

Примеры

Пример

P { font: italic 13px/27px Arial; }

Результат выполнения кода:

Пример

Так как название шрифта Times New Roman из нескольких слов, то берем его в кавычки, несколько шрифтов пишем через запятую:

P { font: bold 15px/20px "Times New Roman", Georgia, serif; }

Результат выполнения кода:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a dapibus magna, ac interdum nisl. Suspendisse eget fringilla nibh, eu commodo arcu. Donec lacinia tempor velit sed tincidunt. Aliquam porttitor nulla purus, vel vulputate ipsum faucibus sed. Phasellus sodales, lorem vel cursus vehicula, ante purus lacinia dui, interdum fringilla massa eros ut dui.