Изменение свойств шрифта
Очень важно для сайта выбрать правильный шрифт. От этого зависит то, как посетители будут воспринимать ваш сайт. Кроме этого шрифт создает идентичность вашего ресурса.
Шрифт добавляет весомость вашему тексту. Крайне важно использовать шрифт, который легко читать. Также важно выбирать правильный цвет и размер текста.
Стандартные группы шрифтов
В CSS существует пять стандартных групп шрифтов:
- У шрифтов Serif у букв на краях есть небольшие зубцы. Эти шрифты создают ощущение элегантности и формализма.
- Шрифты Sans-serif имеют прямые чистые линии (без каких-либо зубцов). Эти шрифты создают современный и минималистичный вид.
- Буквы шрифтов Monospace имеют одинаковую фиксированную ширину. Эти шрифты создают ощущение работы механического устройства.
- Курсивные шрифты имитируют написание от руки.
- Фэнтезийные шрифты имеют декоративный/игривый вид.
Все различные имена шрифтов принадлежат к одной из стандартных групп шрифтов.
Разница между шрифтами Serif и Sans-serif
Примечание: Считается, что на экране компьютера шрифты sans-serif легче воспринимаются, чем шрифты serif.
Примеры некоторых шрифтов
| Группа шрифтов | Пример имен шрифтов |
|---|---|
| Serif | Times New Roman Georgia Garamond |
| Sans-serif | Arial Verdana Helvetica |
| Monospace | Courier New Lucida Console Monaco |
| Курсивные | Brush Script MT Lucida Handwriting |
| Фэнтезийные | Copperplate Papyrus |
CSS свойство font-family
Свойство font-family позволяет установить шрифт, которым будет отображаться текст веб-страницы, например, Times New Roman, Arial или Verdana.
Внимание! Если имя шрифта состоит из нескольких слов, то его следует заключать в кавычки, например, font-family: «Times New Roman».
Чтобы обеспечить максимальную совместимость между браузерами/операционными системами, в свойстве font-family следует определять несколько имен шрифтов, перечисленных через запятую. Начните с требуемого вам шрифта, а закончите стандартной группой (чтобы браузер самостоятельно подобрал шрифт из стандартной группы, если другие шрифты не доступны).
Определим несколько разных шрифтов для трех параграфов:
.p1 < font-family: "Times New Roman", Times, serif; >.p2 < font-family: Arial, Helvetica, sans-serif; >.p3
Веб-безопасные шрифты
Веб-безопасные шрифты это такие шрифты, которые универсально установлены для всех браузеров и устройств. Поэтому совершенно не разумно использовать редкие и мало известные шрифты, так как они могут отсутствовать на компьютере пользователя.
При этом стоит помнить, что не существует полностью на 100% веб-безопасных шрифтов. Всегда существует вероятность, что шрифт будет отсутствовать, либо установлен не корректно.
Поэтому крайне важно всегда использовать шрифты обратной совместимости.
Это означает, что в свойстве font-family вы должны определять список из похожих «резервных» шрифтов. Это делается для того, чтобы в том случае, когда у пользователя не установлен первый шрифт из определенных в свойстве, то браузер будет искать следующий по списку шрифт, затем следующий, и так до тех пор, пока не будет найден установленный у пользователя шрифт, либо будет достигнут конец списка. Заканчивать такой список всегда нужно именем стандартной группы шрифтов.
В следующем примере определяется три типа шрифта: Tahoma, Verdana и sans-serif. Второй и третий шрифты резервные на тот случай, если первый шрифт не будет найден:
Лучшие веб-безопасные шрифты для HTML и CSS
Список лучших веб-безопасных шрифтов для HTML и CSS:
- Arial (sans-serif)
- Verdana (sans-serif)
- Helvetica (sans-serif)
- Tahoma (sans-serif)
- Trebuchet MS (sans-serif)
- Times New Roman (serif)
- Georgia (serif)
- Garamond (serif)
- Courier New (monospace)
- Brush Script MT (cursive)
Шрифты, используемые в одном списке в качестве основных и резервных
Ниже представлены некоторые шрифты, используемые в одном списке в качестве основных и резервных: