CSS HTML шрифты, цвет и размер текста
Свойства шрифта CSS определяют семейство шрифтов, смелость, размер и стиль текста.
Разница между засечками и шрифтами без засечек
Семейства шрифтов CSS
В CSS существует два типа имен семейств шрифтов:
- родовое семейство — группа семейств шрифтов с похожим видом (например, «засечка» или «однодисковая»)
- семейство шрифтов — конкретная семья шрифтов (например, «Times New Roman» или «Arial»)
Generic family | Font family | Описание |
---|---|---|
Serif | Times New Roman Georgia |
Шрифты с засечками имеют небольшие линии на концах на некоторых символах |
Sans-serif | Arial Verdana |
"Sans" означает без-эти шрифты не имеют линий на концах символов |
Monospace | Courier New Lucida Console |
Все одноместные символы имеют одинаковую ширину |
Примечание: На компьютерных экранах шрифты без засечек считаются более удобными для чтения, чем шрифты с засечками.
Семейство шрифтов
Семейство шрифтов текста задается с помощью свойства font-family
.
Свойство font-family
должно содержать несколько имен шрифтов в качестве "резервной" системы.
Если обозреватель не поддерживает первый шрифт, он пытается следующий шрифт и т. д.
Начните с нужного шрифта и заканчивайте родовым семейством, чтобы позволить обозревателю выбрать аналогичный шрифт в родовом семействе, если другие шрифты недоступны.
Примечание: Если имя семейства шрифтов больше одного слова, оно должно быть в кавычках, например: «Times New Roman».
В списке, разделенном запятыми, указано несколько семейств шрифтов:
Пример
p {
font-family: "Times New Roman", Times, serif;
}
Для часто используемых комбинаций шрифтов, посмотрите наши безопасные сочетания шрифтов.
Стиль шрифта
Свойство 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 > для абзацев.
Значение размера шрифта может быть абсолютным или относительным размером.
Абсолютный размер:
- Устанавливает заданный размер текста
- Не позволяет пользователю изменять размер шрифта во всех браузерах (плохо для специальных возможностей)
- Абсолютный размер полезен, когда известен физический размер выходных данных
Относительный размер:
- Устанавливает размер относительно окружающих элементов
- Позволяет пользователю изменять размер текста в обозревателях
Примечание: Если размер шрифта не указан, по умолчанию для обычного текста, как и для абзацев, используется 16px (16px = 1em).
Задать размер шрифта с пикселями
Установка размера текста с пикселями дает полный контроль над размером текста:
Пример
h1 {
font-size: 40px;
}
h2 {
font-size: 30px;
}
p {
font-size: 14px;
}
Совет: При использовании пикселов можно по-прежнему использовать инструмент «Масштаб» для изменения размера всей страницы.
Установить размер шрифта с em
Чтобы разрешить пользователям изменять размер текста (в меню обозревателя), многие разработчики используют EM вместо пикселов.
Единица измерения размера em рекомендуется консорциумом W3C.
1em равен текущему размеру шрифта. Размер шрифта по умолчанию в обозревателях — 16px. Таким образом, по умолчанию размер 1em является 16px.
Размер можно вычислить от пикселов к EM использующ эту формулу: пикселы/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, можно настроить размер текста во всех браузерах.
К сожалению, есть еще проблема с более старыми версиями IE. Текст становится больше, чем он должен, когда сделал больше, и меньше, чем он должен, когда сделал меньше.
Используйте комбинацию процентов и EM
Решение, которое работает во всех браузерах, заключается в том, чтобы задать размер шрифта по умолчанию в процентах для элемента <BODY>:
Пример
body {
font-size: 100%;
}
h1 {
font-size: 2.5em;
}
h2 {
font-size: 1.875em;
}
p {
font-size: 0.875em;
}
Наш код теперь отлично работает! Он показывает тот же размер текста во всех браузерах, и позволяет всем браузерам, чтобы увеличить или изменить размер текста!
Вес шрифта
Свойство font-weight
задает вес шрифта:
Пример
p.normal {
font-weight: normal;
}
p.thick {
font-weight: bold;
}
Отзывчивый размер шрифта
Размер текста может быть установлен с помощью vw
единицы, что означает "ширина видового экрана".
Таким образом размер текста будет следовать размеру окна браузера:
Hello World
Измените размер окна обозревателя, чтобы увидеть, как масштабируется размер шрифта.
Пример
<h1 style="font-size:10vw">Hello World</h1>
Видовой экран — это размер окна обозревателя. 1ВВ = 1% ширины видового экрана. Если видовой экран шириной 50 см, 1ВВ составляет 0.5 cm.
Шрифт вариант
Свойство 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 | Определяет вес шрифта |