Наверх

Оформление шрифтов в CSS

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

Рассмотрим доступные свойства.

font-family

Позволяет определить, каким шрифтом будет написан текст. Для группировки шрифтов в CSS используется два типа имён: generic-family и family-name.

generic-family содержит пять базовых семейств шрифтов, которые можно найти практически на любом компьютере.

  • sans-serif — шрифты без засечек. Написанный ими текст воспринимается лучше других.
  • serif — шрифты с засечками.
  • monospace — шрифты, символы которых имеют фиксированную ширину. Их принято использовать для отображения программного кода.
  • cursive — рукописные шрифты.
  • fantasy — декоративные (художественные) шрифты.

family-name определяет не семейство, а один шрифт: “Arial Black”, Verdana.

В качестве значений свойства font-family семейства и шрифты перечисляются через запятую. Браузер определяет, установлен ли на ПК пользователя первый в списке шрифт, и если да, то отображает текст им, если нет — переходит к следующему и т. д. Если имя шрифта содержит спецсимволы или состоит из нескольких слов (содержит пробел), то его надо брать в кавычки.

h1 {font-family: Arial, sans-serif;}
h2 { font-family: "Times New Roman", serif; }

font-style

Задаёт курсивное (значение italic), наклонное (oblique) или стандартное (normal) начертание текста.

Код:

<!DOCTYPE html>
<html>
<head>
    <title>font-style</title>
    <style type="text/css">
    h1 { font-style: oblique; }
    h2 { font-style: italic; }
    h3 { font-style: normal; }
    </style>
</head>
<body>
   <h1>Текст с наклонным начертанием.</h1>
   <h2>Курсивный текст.</h2>
   <h3>Обычное начертание текста.</h3>
</body>
</html>

Создаёт такую страницу:

Виды шрифтов

font-size

Важное свойство, которое определяет размер шрифта. Его можно задавать разными способами.

  • Пиксели (px). Используются довольно часто, потому что позволяют указать размер максимально точно. По умолчанию браузер отображает текст размером 16 пикселей.
p { font-size: 12px; }

Обратите внимание: между числом и единицами измерения пробела быть не должно.

  • Проценты (%). Высчитываются от размера шрифта родительского элемента. Если у родителя он установлен по умолчанию, то можно вспомнить про 16 пикселей и принять их за 100%.
p { font-size: 120%; }
  • Пункты (pt). Тоже используются очень часто. Более того, когда вы выбираете число, выставляя размер шрифта в текстовых редакторах (Word, Блокнот, Notepad и т. д.), то также используете пункты.
p { font-size: 15pt; }
  • Относительная высота шрифта (em). Высота шрифта родителя принимается за единицу, и относительно него устанавливается высота шрифта текущего элемента.
p { font-size: 1.2em; }
  • Константы. Считается, что значения xx-small, x-small, small, medium, large, x-large, xx-large (от меньшего к большему) задают абсолютный размер шрифта, хотя на самом деле при их использовании размер всё равно будет зависеть от настроек операционной системы и браузера. Есть также и относительные константы: smaller (меньший) и larger (больший), которые уменьшают или увеличивают шрифт относительно элемента-родителя.
p { font-size: x-large; }
  • Другие единицы измерения. Для установки шрифта можно использовать всё, что доступно в CSS: миллиметры (mm), сантиметры (cm), дюймы (in), пики (pc, 1 pc = 12 pt), размер символа x (ex).
p { font-size: 1.5pc; }

font-variant

Предлагает два значения:

  • small-caps. Строчные буквы меняются на прописные малого размера.
  • normal. Обычный текст.

Чтобы понять, разницу лучше один раз увидеть:

h1 { font-variant: small-caps; }
h2 { font-variant: normal; }
Варианты заголовков

font-weight

Влияет на насыщенность (жирность) шрифта. Значения могут быть такими:

  • Числа от 100 до 900 с шагом в сотню. С их помощью можно задать жирность точнее всего. Насыщенность нормального шрифта, который вы обычно видите на страницах, равна значению 400, полужирного — 700. Проблема в том, что многие браузеры не поддерживают весь этот ассортимент, и поэтому использование числовых значений часто бывает бессмысленным.
  • normal. Обычный шрифт.
  • bold. Устанавливает полужирное начертание.
div { font-weight: bold; }
  • bolder и lighter. Делает шрифт соответственно жирнее или тоньше шрифта текста родителя.

color

Определяет цвет шрифта. Может задаваться следующими способами

  • По названию. Используются зарезервированные слова, обозначающие имена цветов (например, blue — синий, yellow — жёлтый). Самый простой, но вместе с тем и самый ограниченный метод, потому что поддерживает только 140 цветов, хотя обычно и их хватает.
p { color: red; }
  • По шестнадцатеричному коду (HEX). Шестнадцатеричная система счисления включает в себя 16 цифр, последние шесть из которых обозначаются буквами латинского алфавита от A до F, причём десятичное число 255 в этой системе записывается как FF. Как известно, все цвета создаются путём смешивания всего трёх: красного, зелёного и синего. Степень присутствия каждого из них и задаётся числами от 0 до 255, записанными в шестнадцатеричной системе. Перед числом ставится символ «решётка (#). Белый цвет — #000000, чёрный — #ffffff.

Пример ниже задаёт абзацу серый цвет:

p { color: #808080; }
  • В системе RGB. Всё те же красный, зелёный и синий (red, green, blue), но задающиеся уже числами от 0 до 255 через запятую. Присутствие каждого из трёх цветов можно обозначать и в процентах. Тогда 100% будет соответствовать числу 255.
a {color: rgb(0,128,201);}
  • RGBA. Всё, как в RGB, только в конце прибавляется ещё одно число от 0 до 1 — альфа-канал, задающий тексту прозрачность.
a {color: rgba(0,128,201,0.5);}
  • HSL. Значение в этом формате задаётся тремя параметрами через запятую.

1. H (hue — оттенок). Определяется в градусах от 0 до 359° в зависимости от цвета на цветовом круге (рисунок ниже).

Руссификация шаблона

2. S (Saturate — оттенок). Указывается в процентах. Понятно, что от 0 до 100%, и понятно, что чем больше процент, тем насыщеннее цвет.

3. L (lightness — яркость). Так же, как и насыщенность, устанавливается в процентах.

Зададим ссылкам насыщенный красный цвет

a {color: hsl(0,100%,100%);}
  • HSLA. То же, что и HSL, но с добавлением альфа-канала (как RGBA).
a {color: hsla(0,100%,100%,0.7);}

font

Позволяет объединить все свойства шрифта в одной строке и может тем самым сильно сократить код. Имеет следующую структуру:

font: font-style font-variant font-weight font-size/line-height font-family

Свойства должны записываться именно в такой последовательности (чтобы не задавать значение, его можно просто пропустить).

Вот пример:

div {font: oblique small-caps 12pt/1.2 Arial, sans-serif;}
You must have Javascript enabled to use this form.