Свойство CSS font определяет тип шрифта, толщину его линий, размер и стиль.
Разница между шрифтами Serif и Sans-Serif
На рисунке представлены буквы из двух семейств шрифтов: Serif и Sans-Serif. Разницу между ними можно увидеть невооруженным глазом, у шрифта семейства Serif на концах штрихов имеются маленькие засечки. Слово Serif переводится как «засечка», а слово Sans — как «без». Поэтому шрифт sans-serif переводится как «без засечек». При печати лучше использовать шрифты Serif, так как они облегчают чтение. Для компьютерных мониторов лучше использовать шрифты Sans-serif.
Семейства шрифтов CSS
В CSS существует два типа названий семейств шрифтов:
- общие семейства — группа семейств шрифтов, имеющих похожий вид («Serif» или «Monospace»)
- семейство шрифта — конкретный шрифт («Times New Roman» или «Arial»)
| Общее семейство | Семейство шрифтов | Описание |
|---|---|---|
| Serif | Times New Roman Georgia |
Шрифты Serif имеют засечки на концах штрихов символов |
| Sans-serif | Arial Verdana |
«Sans» означает «без» — эти шрифты не имеют засечек |
| Monospace | Courier New Lucida Console |
Символы имеют одинаковую ширину |
Семейство шрифта
Семейство шрифта указывается в свойстве font-family.
Свойство 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 задает размер шрифта.
Возможность управлять размером шрифта очень важна в веб-дизайне. Однако, не стоит изменять размер параграфа, чтобы сделать его похожим на заголовок, и изменять заголовок, чтобы сделать его похожим на параграф.
Используйте правильные теги, например, h1-h6 для заголовков и тег p для параграфов.
Значение свойства font-size можно указать в относительных и абсолютных величинах.
Абсолютные величины:
- Задает абсолютный размер шрифта
- Не дает пользователю возможности изменять размер шрифта
- Абсолютные размеры используются тогда, когда точно известно разрешение устройств, на которых будет отображаться сайт
Относительные величины:
- Размеры шрифта зависят от соседних/родительских элементов
- Дают пользователю возможность изменять размер шрифта в браузере
Если не указать размер шрифта, будет подставлено значение по умолчанию, которое равно (для параграфов) 16px (16px=1em).
Размер шрифта в пикселях
Размер шрифта в пикселях дает вам полный контроль над размером шрифта:
h1 {font-size:40px;} h2 {font-size:30px;}
p {font-size:14px;}
Этот код позволяет изменять размер текста во всех браузерах, кроме Internet Explorer.
Размер текста можно изменить с помощью инструмента масштабирования (при этом меняется размер всей страницы, а не только текста).
Размер шрифта в em
Многие веб-мастера используют em вместо пикселей, чтобы избежать проблем с масштабированием в Internet Explorer.
Размеры в em рекомендуются W3C.
1em равен размеру шрифта по умолчанию. Размер шрифта по умолчанию равен 16 пикселям. Таким образом, 1em равен 16 пикселям.
Размер шрифта в 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 равен размеру текста в пикселях. Однако, этот способ позволяет масштабировать текст во всех браузерах.
К сожалению, в браузере IE можно заметить следующую проблему: при увеличении/уменьшении размера шрифта, он увеличивается/уменьшается больше, чем ожидалось, то есть непропорционально.
Комбинация % и em
Кросс-браузерным решением масштабирования текста является задание размера шрифта по умолчанию для тега body в %:
body {font-size:100%;} h1 {font-size:2.5em;} h2 {font-size:1.875em;}
p {font-size:0.875em;}
Мы получили кросс-браузерный код. Он не только одинаково отображается во всех браузерах, но и позволяет масштабировать текст.
Примеры
Настройка толщины линий шрифта.
Свойство font — краткая запись
Использование краткой записи для определения всех свойств шрифта.
Все свойства шрифта — справка CSS
Число в столбце «CSS» указывает на то, в какой версии CSS появилось соответствующее свойство (CSS1 или CSS2).
| Свойство | Описание | Значения | CSS |
|---|---|---|---|
| font | Все свойства шрифта одной записью | font-style font-variant font-weight font-size/line-height font-familycaption icon menu message-box small-caption status-bar
inherit |
1 |
| font-family | Семейство шрифта | название- семейства общее-семействоinherit | 1 |
| font-size | Размер шрифта | xx-small x-small small medium large x-large xx-large smaller
larger размер %inherit |
1 |
| font-style | Стиль шрифта | normal italic oblique
inherit |
1 |
| font-variant | Трансформация букв шрифта в уменьшенные заглавные буквы | normal small-caps
inherit |
1 |
| font-weight | Ширина линий шрифта («Жирность») | normal bold bolder lighter 100 200 300 400 500 600 700 800 900
inherit |
1 |