CSS font
CSS свойство font задает шрифту, утолшение, размер и стиль текста.
Разница между Serif и Sans-serif
CSS Семейства шрифтов
В CSS, существует два типа имен семейства шрифтов:
- Стандартные семейства - группа семейств шрифтов с похожим видом
"Serif"или"Monospace" - Семейства шрифтов - конкретный шрифт
"Times New Roman"или"Arial"
| Стандартные семейства | Семейства шрифтов | Описание |
|---|---|---|
| Serif | Times New Roman Georgia |
Шрифты с засечками имеют небольшие линии на концах некоторых букв |
| Sans-serif | Arial Verdana |
"Sans" без засечек - шрифты не имеют засечки на концах букв |
| Monospace | Courier New Lucida Console |
Моноширинный шрифт все буквы имеют одинаковую ширину |
Примечание: На экранах компьютеров, без засечек шрифты легче читать, чем шрифты с засечками.
Семейство шрифтов
Семейство шрифта текста определяется свойством font-family.
Свойство font-family следует установить несколько названий шрифтов в качестве "запасного варианта" для системы. Если браузер не поддерживает первый шрифт, он пробует следующий шрифт и так далее.
Начнем с шрифтов, которые Вы хотите установить, стандартные семейства, чтобы разрешить браузеру подобрать похожий шрифт в стандартные семейства, если нет доступных других шрифтов.
Примечание: Если название семейства шрифта более одного слова, оно должно быть в кавычках: "Times New Roman".
Более одного семейства шрифтов указывать через запятую:
Для часто используемых сочетаний шрифта, посмотрите на наши Безопасные Комбинации Веб Шрифтов.
Стиль шрифта
Свойство font-style в основном используется для установки курсивного текста.
Свойство имеет три значения:
- normal - Текст отображается нормально
- italic - Текст отображается курсивом
- oblique - Текст отображается наклонным, он очень похож на курсив, но менее поддерживается браузерами
Пример
p.normal {
font-style: normal;
}
p.italic {
font-style: italic;
}
p.oblique {
font-style: oblique;
}
Редактор кода »
Размер шрифта
Свойство font-size устанавливает размер шрифта текста.
Имея возможность управлять размером текста важно в веб-дизайне. Однако, Вы не должны использовать регулировку размера шрифта, чтобы параграфы выглядели как заголовки, а заголовки были похожи на параграфы.
Всегда используйте правильные теги HTML, для заголовка <h1> - <h6>
и <p> для параграфа.
Значение свойства font-size может быть размер абсолютный или относительный
Абсолютный размер:
- Задает указанный размер текста
- Не позволяет пользователю менять размер шрифта во всех браузерах (плохо по соображениям доступности)
- Абсолютные величины полезны, когда известен результат физического размера
Относительный размер:
- Задает размер относительно окружающих элементов
- Позволяет пользователю менять размер шрифта в браузерах
Примечание: Если не указать размер шрифта, размер по умолчанию будет как обычный текст параграфа
16px (16px=1em) .
Размер шрифта в процентах
Настройка размера текста с пикселями дает Вам полный контроль над размером текста:
Совет: Если Вы используете пиксели, тогда можете использовать инструмент масштабирования, чтобы изменить размер всей страницы.
Размер шрифта в em
Чтобы разрешить пользователям изменять размер текста (в меню браузера), многие разработчики используют em вместо пикселей.
Размер в em рекомендуется консорциумом W3C.
1em равен текущему размеру шрифта.
Размер текста по умолчанию в браузерах 16 пикселей. Значит, размер по умолчанию 1em
составляет 16px.
Размер может быть вычислен из пикселей в em, используя эту формулу: px / 16 = em
Пример
h2 {
font-size: 2.5em; /* 40px/16=2.5em */
}
h3 {
font-size: 1.875em; /* 30px/16=1.875em */
}
p {
font-size: 0.875em; /* 14px/16=0.875em */
}
Редактор кода »
В приведенном выше примере размер текста в em такой же,
как и в предыдущем примере в пикселях. Однако, размер текста можно регулировать во всех браузерах.
К сожалению, есть еще проблема с более старыми версиями IE. Текст становится не предсказуемым, больше или меньше, чем надо.
Используйте сочетание % и em
Решение, которое работает во всех браузерах, установит размер шрифта по умолчанию в процентах для елемента
<body>:
Пример
body {
font-size: 100%;
}
h2 {
font-size: 2.5em;
}
h3 {
font-size: 1.875em;
}
p {
font-size: 0.875em;
}
Редактор кода »
Наш код теперь работает отлично! Показывает тот же самый размер текста во всех браузерах и все браузера позволяют увеличить или изменить размер текста!
Полнота шрифта
Свойство font-weight задает полноту шрифта:
Варианты шрифта
Свойство font-variant указывает, должен ли текст отображаться в малом прописном шрифте.
Значение шрифта small-caps, устанавливает все строчные буквы в большом прописном шрифте.
Тем не менее, заглавные буквы будут выглядеть на размер больше, тем оригинальней будут выглядеть заглавные буквы в тексте.
Еще примеры
Все свойства шрифта в одном объявлении
В этом примере показано, как использовать свойство сокращения для установки всех свойств шрифта в одном объявлении.
Проверьте себя с помощью упражнений!
Все CSS свойства шрифтов
| Свойство | Описание |
|---|---|
| font | Устанавливает все свойства шрифта в одном объявлении |
| font-family | Устанавливает шрифт для текста |
| font-size | Устанавливает размер шрифта текста |
| font-style | Устанавливает стиль шрифта для текста |
| font-variant | Указывает, должен ли текст должен отображаться в малым прописным шрифтом |
| font-weight | Устанавливает полноту шрифта |
