CSS Шрифты
Курс по основам CSS. W3Schools на русском языке. Уроки для начинающих
Свойства шрифта CSS определяют семейство шрифтов, жирность, размер и стиль текста.
Разница между шрифтами с засечками (Serif) и без засечек (Sans-serif)
CSS Font Families - Семейства шрифтов
В CSS есть два типа имен семейств шрифтов:
- generic family (общие шрифты) - группа семейств шрифтов с похожим видом (например "Serif" или "Monospace")
- font family (семейство шрифтов) - определенное семейство шрифтов (например "Times New Roman" или "Arial")
| Generic family | Font family | Описание |
|---|---|---|
| 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".
В списке через запятую указано несколько семейств шрифтов:
Для наиболее часто используемых комбинаций шрифтов ознакомьтесь с нашими Веб-безопасными комбинациями шрифтов.
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).
Установить размер шрифта с пикселями
Установка размера текста в пикселях дает вам полный контроль над размером текста:
Совет: Если вы используете пиксели, вы все равно можете использовать инструмент масштабирования, чтобы изменить размер всей страницы.
Установить размер шрифта с помощью 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 указывает толщину шрифта:
Responsive Font Size - Отзывчивый (адаптивный) размер шрифта
Размер текста может быть установлен с помощью единицы vw что означает "ширина области просмотра" - сокращенно от "viewport width".
Таким образом, размер текста будет соответствовать размеру окна браузера:
Hello World
Измените размер окна браузера, чтобы увидеть, как масштабируется размер шрифта.
Окно просмотра - это размер окна браузера. 1vw = 1% ширины области просмотра. Если ширина области просмотра составляет 50 см, значение 1vw составляет 0,5 см.
Font Variant - Вариант шрифта
Свойство font-variant указывает, должен ли текст отображаться шрифтом с маленькой буквы.
В шрифте с маленькими заглавными буквами все строчные буквы преобразуются в прописные. Однако преобразованные заглавные буквы отображаются шрифтом меньшего размера, чем исходные заглавные буквы в тексте.
Еще пример
Все свойства шрифта в одном объявлении
Этот пример демонстрирует, как использовать сокращенное свойство для установки всех свойств шрифта в одном объявлении.
Проверьте себя с помощью упражнений!
Все CSS свойства шрифта
| Свойство | Описание |
|---|---|
| font | Устанавливает все свойства шрифта в одном объявлении |
| font-family | Определяет семейство шрифтов для текста |
| font-size | Определяет размер шрифта текста |
| font-style | Определяет стиль шрифта для текста |
| font-variant | Определяет, должен ли текст отображаться шрифтом с маленькой буквы |
| font-weight | Определяет вес шрифта |