CSS Шрифт

CSS свойства шрифта определяют семейство шрифта, жирность, размер и стиль текста.

Различия между шрифтами Serif и Sans-serif

На экране компьютера, шрифты sans-serif считаются более удобными для чтения, чем шрифты serif.

Семьи шрифтов CSS

В CSS, есть два типа имен семейств шрифтов:

общии семьи - группа семейств шрифтов похожих по внешнему виду (как "Serif" или "Monospace")
семейство шрифта - конкретное семейство шрифтов (как "Times New Roman" или "Arial")

Общии семьи	Семейство шрифта	Описание
Serif	Times New Roman Georgia	Шрифты Serif имеют маленькие линии на концах на некоторых символах
Sans-serif	Arial Verdana	"Sans" означает без - эти шрифты не имеют линий на концах символов
Моноширинные	Courier New Lucida Console	Все моноширинные символы имеют одинаковую ширину

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

Семейство шрифтов текста задается с помощью свойства font-family.

Свойство font-family должно содержать несколько имен шрифтов, как "резервные" системы. Если браузер не поддерживает первый шрифт, он пытается следующий шрифт.

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

Примечание: Если имя шрифта содержит более чем одно слово, оно должно быть в кавычках, как font-family: "Times New Roman".

Более одного семейства шрифтов указываются в списке разделенном запятыми:

Пример 1

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
     p.serif{ font-family:"Times New Roman",Times,serif; }
     p.sansserif{ font-family:Arial,Helvetica,sans-serif; }
</style>
</head>

<body>
<h1>CSS font-family</h1>
<p class="serif">Этот параграф показан со шрифтом Times New Roman.</p>
<p class="sansserif">Этот параграф показан со шрифтом Arial.</p>
</body>
</html>

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

Попробуйте сами

Для наиболее часто используемых комбинаций шрифтов, посмотрите на наши Безопасные комбинации шрифтов.

Стиль шрифта

Свойство font-style в основном используется для указания текста курсивом.

Это свойство имеет три значения:

normal - текст отображается нормально
italic - текст отображается курсивом
oblique - текст "наклонный" (oblique очень похож на курсив, но менее поддерживается)

Пример 2

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
     p.normal { font-style:normal; }
     p.italic { font-style:italic; }
     p.oblique { font-style:oblique; }
</style>
</head>
<body>
<p class="normal">Этот параграф, normal.</p>
<p class="italic">Этот параграф, italic.</p>
<p class="oblique">Этот параграф, oblique.</p>
</body>
</html>

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

Попробуйте сами

Размер шрифта

Свойство font-size устанавливает размер текста.

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

Всегда используйте надлежащие теги HTML, как <h1> - <h6> для заголовков и <p> для параграфов.

Величина значения font-size может быть абсолютной или относительной.

Абсолютный размер:

Устанавливает текст указанного размера
Не позволяет пользователю изменять размер текста во всех браузерах (плохо по причинам доступности)
Абсолютный размер полезен, когда физический размер известен

Относительный размер:

Устанавливает размер по сравнению с окружающими элементами
Позволяет пользователю изменять размер текста в браузере

Если вы не укажете размер шрифта, размер по умолчанию для обычного текста, как параграфы: 16px (16px=1em).

Установка размера шрифта в пикселях

Настройка размера текста в пикселях, дает вам полный контроль над размером текста:

Пример 3

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
     h1 { font-size:40px; }
     h2 { font-size:30px; }
     p { font-size:14px; }
</style>
</head>
<body>
<h1>Это заголовок 1</h1>
<h2>Это заголовок 2</h2>
<p>Это параграф.</p>
</body>
</html>

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

Попробуйте сами

Пример выше позволяет Firefox, Chrome, и Safari изменять размер текста, но не Internet Explorer.

Текст может быть изменен во всех браузерах c использованием инструмента зум (zoom) (однако, это изменяет всю страницу, а не только текст).

Установка размера шрифта с Em

Чтобы избежать проблем с изменением размера в Internet Explorer, большинство разработчиков использует em вместо пикселей.

Размер единицы em рекомендован в W3C.

1em равен текущему размеру шрифта. Размер текста по умолчанию в браузерах 16px. Так, по умолчанию размер 1em равен 16px.

Размер может быть рассчитан из пикселей в em, используя эту формулу: pixels/16=em

Пример 4

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
     h1 { font-size:2.5em; } /* 40px/16=2.5em */
     h2 { font-size:1.875em; } /* 30px/16=1.875em */
     p { font-size:0.875em; } /* 14px/16=0.875em */
</style>
</head>
<body>
<h1>Это заголовок 1</h1>
<h2>Это заголовок 2</h2>
<p>Это параграф.</p>
</body>
</html>

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

Попробуйте сами

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

К сожалению, есть еще проблема с IE. При изменении размеров текста, он становится больше, чем должен, при увеличении, и меньше, чем должен, при уменьшении.

Использование комбинацию Процентов и Em

Решение, которое работает во всех браузерах, это установить по умолчанию размер шрифта в процентах для элемента body:

Пример 5

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
     body { font-size:100%; }
     h1 { font-size:2.5em; }
     h2 { font-size:1.875em; }
     p { font-size:0.875em; }
</style>
</head>
<body>
<h1>Это заголовок 1</h1>
<h2>Это заголовок 2</h2>
<p>Это параграф.</p>
<p>Определение размера шрифта в процентах и em отображает одинаковый  размер во всех браузерах.</p>
</body>
</html>

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

Попробуйте сами

Наш код теперь прекрасно работает! Он показывает тот же размер текста во всех браузерах, и позволяет всем браузерам, увеличить или уменьшить размер текста!

Еще примеры

Пример 6

Этот пример показывает, как установить жирность шрифта.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
     p.normal { font-weight:normal; }
     p.light { font-weight:lighter; }
     p.thick { font-weight:bold; }
     p.thicker { font-weight:900; }
</style>
</head>
<body>
<p class="normal">Это параграф.</p>
<p class="light">Это параграф.</p>
<p class="thick">Это параграф.</p>
<p class="thicker">Это параграф.</p>
</body>
</html>

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

Попробуйте сами

Пример 7

Этот пример показывает, как установить вариант шрифта.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
     p.normal { font-variant:normal; }
     p.small { font-variant:small-caps; }
</style>
</head>
<body>
<p class="normal">Меня зовут Константин Котенко.</p>
<p class="small">Меня зовут Константин Котенко.</p>
</body>
</html>

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

Попробуйте сами

Пример 8

Этот пример демонстрирует, как использовать сокращенное свойство для установки всех свойств шрифта в одной декларации.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
     p.ex1 { font:15px arial,sans-serif; }
     p.ex2 { font:italic bold 12px/30px Georgia,serif; }
</style>
</head>
<body>
<p class="ex1">Это параграф. Это параграф. Это параграф. Это параграф. Это параграф. Это параграф. Это параграф. Это параграф. Это параграф. Это параграф. Это параграф. Это параграф. Это параграф. Это параграф. </p>
<p class="ex2">Это параграф. Это параграф. Это параграф. Это параграф. Это параграф. Это параграф. Это параграф. Это параграф. Это параграф. Это параграф. Это параграф. Это параграф. Это параграф. Это параграф. </p>
</body>
</html>

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

Попробуйте сами

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

Номер в колонке "CSS" указывает, в какой версии CSS свойство определено (CSS1 или CSS2).

Свойство	Описание	Значения	CSS
font	Устанавливает все свойства шрифта в одной декларации	font-style font-variant font-weight font-size/line-height font-family caption icon menu message-box small-caption status-bar inherit	1
font-family	Определяет семейство шрифта для текста	family-name generic-family inherit	1
font-size	Определяет размер шрифта текста	xx-small x-small small medium large x-large xx-large smaller larger length % inherit	1
font-style	Определяет стиль шрифта для текста	normal italic oblique inherit	1
font-variant	Определяет, должен ли текст отображаться в капители шрифта	normal small-caps inherit	1
font-weight	Определяет вес шрифта	normal bold bolder lighter 100 200 300 400 500 600 700 800 900 inherit	1

Была ли эта информация полезной?

Да Нет

CSS Шрифт

Различия между шрифтами Serif и Sans-serif

Семьи шрифтов CSS

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

Пример 1

Стиль шрифта

Пример 2

Размер шрифта

Установка размера шрифта в пикселях

Пример 3

Установка размера шрифта с Em

Пример 4

Использование комбинацию Процентов и Em

Пример 5

Пример 6

Пример 7

Пример 8

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

Комментарии