Внешний вид текста на странице сайта влияет на его восприятие, поэтому чтобы сайт производил хорошее впечатление, его шрифты должны сочетаться с дизайном.
Чтобы изменить гарнитуру шрифта текста на сайте необходимо прописать в атрибуте style css свойство font-family и задать в нем название шрифта. Если в названии шрифта есть пробелы, то его нужно взять в одинарные кавычки, если для style используются двойные или, наоборот, взять в двойные кавычки, если style свойства обрамлены одинарными.
Пример, как задать стиль шрифта текста в html: Содержание с измененным <span style="font-family:Tahoma">словом 1 </span> и <span style="font-family:'Trebuchet MS' ">словом 2</span> внутри текста. В данном примере с помощью свойства font-family мы задаем шрифт под названием «Tahoma» и «Trebuchet MS» отдельным словам. Обратите внимание, что шрифт Trebuchet MS в примере обрамлен дополнительными кавычками, т. к. в названии есть пробелы.
У каждого браузера и операционной системы свой набор поддерживаемых шрифтов. Если на устройстве пользователя не установлен шрифт, который вы прописали в свойствах, то он может некорректно отображаться или быть видоизмененным на заданный по умолчанию. Чтобы избежать некорректного отображения:
а.) Используют безопасные шрифты. Безопасными шрифты в css называются потому, что они поддерживаются большинством браузеров и операционных систем, а значит и отображаться, скорее всего, будут корректно. Основные безопасные шрифты приведены ниже.
б.) Указывают несколько шрифтов. В свойстве font-family можно указать несколько шрифтов через запятую, в этом случае вначале будет предпринята попытка найти первый написанный шрифт, если он неизвестен, то будет повторная попытка со следующим, указанным через запятую и так далее, пока шрифт не найдется. Первый найденный шрифт в свойстве font-family и будет использован для отображения. Если ни один из указанных через запятую шрифтов не нашелся, то, скорее всего, будет использован заданный по умолчанию в браузере.
Пример, как задать нескольких шрифтов в css: Содержание с <span style="font-family:Georgia, 'Palatino Linotype'">измененным шрифтом </span> внутри текста. В данном примере с помощью свойства font-family мы задаем шрифт под названием Georgia, и если он не будет найден, то будет попытка поиска шрифта 'Palatino Linotype'. Обратите внимание, что шрифт 'Palatino Linotype' обрамлен одинарными кавычками поскольку в его названии присутствует пробел.
Семейство sans-serif — шрифты без засечек с прямыми и четкими контурами(обычно используются для заголовков и меню).
| Безопасные шрифты | |
| 'Arial Black' | Пример фразы |
| Verdana | Пример фразы |
| 'Lucida Sans Unicode' | Пример фразы |
| 'Comic Sans MS' | Пример фразы |
| Arial | Пример фразы |
| 'Trebuchet MS' | Пример фразы |
| Tahoma | Пример фразы |
| Impact | Пример фразы |
Семейство serif — шрифты с засечками
| Безопасные шрифты | |
| 'Palatino Linotype' | Пример фразы |
| Georgia | Пример фразы |
| Serif | Пример фразы |
Семейство monospace — шрифты с одинаковой шириной всех букв.
| Безопасные шрифты | |
| 'Lucida Console' | Пример фразы |
| Courier | Пример фразы |
Семейство cursive — шрифты, имитирующие почерк.
| Безопасные шрифты | |
| 'Comic Sans MS' | Пример фразы |
Если ни один из написанных выше шрифтов вам не подошел, вы можете сделать надписи в графическом редакторе и сохранить их в виде картинок, которые затем вставить на сайте. На практике данный способ нередко используют для создания редких и оригинальных шрифтов у заголовков, ссылок меню.
В примере выше, показан как изменить гарнитуру шрифта текста на css внутри тега span, но как вы понимаете, задать стиль аналогичным образом можно у любого тега, отображающего текст: div, p, td, h1, h2 и т. п.
