CSS Шрифт

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

Разница между шрифтами с засечками и без засечек

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

Шрифт CSS

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

• Обобщённые семейства шрифтов- Группа семейств шрифтов со схожим внешним видом (например, "Serif" или "Monospace")
• Конкретные семейства шрифтов- Конкретное семейство шрифтов (например, "Times" или "Courier")

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

Свойство font-family задаёт семейство шрифтов текста.

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

ПримечаниеЕсли название семейства шрифтов состоит более чем из одного слова, его необходимо заключать в кавычки, например: font-family: "SimSun".

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

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

Стиль шрифта

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

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

• Normal — отображает текст обычным образом
• Italic — отображает текст курсивом
• Oblique — текст наклоняется в одну сторону (очень похоже на курсив, но поддерживается реже)

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

Свойство font-size задаёт размер текста.

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

Обязательно используйте правильные HTML-теги, например <h1> - <h6> для заголовков и <p> для абзацев:

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

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

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

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

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

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

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

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

В приведённом выше примере можно регулировать размер текста, масштабируя браузер в Internet Explorer 9, Firefox, Chrome, Opera и Safari.

Хотя размер текста можно изменить с помощью инструмента масштабирования браузера, это изменение применяется ко всей странице, а не только к тексту.

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

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

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

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

Следовательно, размер 1em по умолчанию равен 16px. Вы можете преобразовать пиксели в em, используя следующую формулу:px/16=em

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

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

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

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

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

Другие примеры

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

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

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

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