ЛУЧШИЙ САЙТ ДЛЯ ВЕБ-РАЗРАБОТЧИКОВ

CSS Учебник

CSS СТАРТ CSS Введение CSS Синтаксис CSS Селекторы CSS Как подключить CSS Цвета CSS background-color CSS border CSS margin CSS padding CSS height/width CSS Блочная модель CSS Контур CSS Текст CSS Шрифты CSS Иконки CSS Ссылки CSS Списки CSS Таблицы CSS display CSS max-width CSS position CSS overflow CSS float/clear CSS inline-block CSS Выравнивание CSS Комбинаторы CSS Псевдо-классы CSS Псевдо-элементы CSS opacity/transparency CSS Панель навигации CSS Выпадающие списки CSS Галерея изображений CSS Спрайты изображений CSS Селекторы атрибутов CSS Формы CSS Счётчики CSS Макет веб-сайта CSS Единицы CSS Специфичности

CSS Продвинутый

CSS Закругленные углы CSS Границы изображения CSS Фоны CSS Цвета CSS Градиенты CSS Тени CSS Эффекты текста CSS Веб-шрифты CSS 2D Трансформации CSS 3D Трансформации CSS Переходы CSS Анимации CSS Подсказки CSS Стили изображений CSS Подгонка объекта CSS Кнопки CSS Нумерация страниц CSS Несколько столбцов CSS Пользовательский интерфейс CSS Переменные CSS Размеры блоков CSS Флексбокс CSS Медиа-запросы CSS Примеры медиа-запросов

CSS Адаптивный

RWD Введение RWD Область просмотра RWD Вид сетки RWD Медиа-запросы RWD Изображения RWD Видео RWD Фреймворки RWD Шаблоны

CSS Grid (Сетка)

Grid Введение Grid Контейнер Grid Элементы

CSS Примеры

CSS Шаблоны CSS Примеры CSS Викторина CSS Упражнения CSS Сертификат

CSS Справочники

CSS Справочник CSS Селекторы CSS Функции CSS Справочник аудио CSS Безопасные веб-шрифты CSS Анимация CSS Единицы CSS PX-EM Конвертер CSS Цвета CSS Значения цвета CSS Значения по умолчанию CSS Поддержка браузерами

CSS3. Уроки для начинающих

CSS Шрифты


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


Разница между шрифтами с засечками (Serif) и без засечек (Sans-serif)

Serif vs. Sans-serif

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

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

  • generic family (общие шрифты) - группа семейств шрифтов с похожим видом (например "Serif" или "Monospace")
  • font family (семейство шрифтов) - определенное семейство шрифтов (например "Times New Roman" или "Arial")
Общие шрифты Семейство шрифтов Описание
Serif Times New Roman
Georgia
Serif шрифты имеют небольшие линии (засечки) на концах на некоторых символах
Sans-serif Arial
Verdana
"Sans" означает "без" - эти шрифты не имеют линий (засечек) на концах символов
Monospace Courier New
Lucida Console
Все моноширинные (monospace) символы имеют одинаковую ширину

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


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

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

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

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

Примечание: Если название семейства шрифтов содержит более одного слова, оно должно быть в кавычках, например: "Times New Roman".

В списке через запятую указано несколько семейств шрифтов:

Пример

p {
  font-family: "Times New Roman", Times, serif;
}
Попробуйте сами »

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


Font Style - Стиль шрифта

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

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

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

Пример

p.normal {
  font-style: normal;
}

p.italic {
  font-style: italic;
}

p.oblique {
  font-style: oblique;
}
Попробуйте сами »

Font Size - Размер шрифта

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

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

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

Значение размера шрифта может быть абсолютным или относительным размером.

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

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

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

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

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


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

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

Пример

h1 {
  font-size: 40px;
}

h2 {
  font-size: 30px;
}

p {
  font-size: 14px;
}
Попробуйте сами »

Совет: Если вы используете пиксели, вы все равно можете использовать инструмент масштабирования, чтобы изменить размер всей страницы.


Установить размер шрифта с помощью Em

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

Единица размера em рекомендуется W3C.

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

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

Пример

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 */
}
Попробуйте сами »

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

К сожалению, все еще существует проблема со старыми версиями Internet Explorer. Текст становится больше, чем должен, когда он больше, и меньше, чем должен, когда меньше.


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

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

Пример

body {
  font-size: 100%;
}

h1 {
  font-size: 2.5em;
}

h2 {
  font-size: 1.875em;
}

p {
  font-size: 0.875em;
}
Попробуйте сами »

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


Font Weight - Толщина шрифта

Свойство font-weight указывает толщину шрифта:

Example

p.normal {
  font-weight: normal;
}

p.thick {
  font-weight: bold;
}
Попробуйте сами »

Responsive Font Size - Отзывчивый (адаптивный) размер шрифта

Размер текста может быть установлен с помощью единицы vw что означает "ширина области просмотра" - сокращенно от "viewport width".

Таким образом, размер текста будет соответствовать размеру окна браузера:

Hello World

Измените размер окна браузера, чтобы увидеть, как масштабируется размер шрифта.

Пример

<h1 style="font-size:10vw">Hello World</h1>
Попробуйте сами »

Окно просмотра - это размер окна браузера. 1vw = 1% ширины области просмотра. Если ширина области просмотра составляет 50 см, значение 1vw составляет 0,5 см.


Font Variant - Вариант шрифта

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

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

Пример

p.normal {
  font-variant: normal;
}

p.small {
  font-variant: small-caps;
}
Попробуйте сами »

Больше примеров

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



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

Свойство Описание
font Устанавливает все свойства шрифта в одном объявлении
font-family Определяет семейство шрифтов для текста
font-size Определяет размер шрифта текста
font-style Определяет стиль шрифта для текста
font-variant Определяет, должен ли текст отображаться шрифтом с маленькой буквы
font-weight Определяет вес шрифта