font-family задаёт шрифт текста и записывается как список через запятую: несколько названий шрифтов плюс обязательно одно общее семейство в конце - serif, sans-serif или monospace. Браузер проверяет шрифты по порядку слева направо и использует первый, который реально есть на компьютере читателя.
В этом уроке
Попробуй прямо сейчас: замени Arial на несуществующее слово вроде Fantastico - текст не сломается, браузер просто перейдёт к следующему по списку sans-serif. А теперь удали и sans-serif тоже - и результат уже будет зависеть от самого браузера, а не от твоего кода.
Зачем нужен запасной вариант шрифта
Шрифт, который ты указал, может быть не установлен на компьютере читателя - и тогда браузер просто пропускает его и берёт следующий из списка. Если запасного варианта нет вообще, браузер подставляет свой собственный шрифт по умолчанию (обычно с засечками, вроде Times New Roman) - и это может совсем не то, что ты задумывал.
font-family: "Open Sans", Arial, sans-serif; - если нет ни Open Sans, ни Arial, текст всё равно останется без засечек благодаря sans-serif в конце.
font-family: "Open Sans"; - без общего семейства в конце: если Open Sans недоступен, браузер уходит в свой дефолт, который у разных читателей может выглядеть по-разному.
Когда название шрифта нужно брать в кавычки
Если в названии шрифта больше одного слова или есть цифры - бери его в кавычки: "Times New Roman", "Courier New". Это самый надёжный способ не ошибиться. Дело не в косметике: без кавычек браузер может не опознать название как одно целое, и тогда сломается не отдельный шрифт, а вся строка font-family целиком.
font-family: "Courier New", monospace; - составное название в кавычках, всё работает.
font-family: Courier New, monospace; без кавычек - для большинства названий сработает и так, но полагаться на это не стоит: некоторые составные имена (например, с цифрой внутри) без кавычек ломают правило целиком, а не просто "не находят" шрифт.
Общие семейства: serif, sans-serif, monospace
Общих семейств пять: serif (с засечками, как Times New Roman), sans-serif (без засечек, как Arial), monospace (все буквы одной ширины, как Courier New), а ещё cursive (рукописный) и fantasy (декоративный). Это служебные слова браузера, а не названия конкретных шрифтов - каждый браузер сам решает, какой именно установленный шрифт показать для каждого семейства.
font-family: Arial, sans-serif; - serif/sans-serif/monospace пишутся без кавычек, это ключевые слова.
font-family: Arial, "sans-serif"; - в кавычках "sans-serif" перестаёт быть служебным словом и превращается в поиск шрифта с таким буквальным именем, которого почти наверняка нет.
Частые ошибки новичков
| Ошибка | Что происходит | Как исправить |
|---|---|---|
| Не указан запасной вариант в конце списка | Если основной шрифт недоступен, браузер подставляет свой собственный дефолт вместо задуманного | Всегда заканчивать список общим семейством: serif, sans-serif или monospace |
| Составное название без кавычек содержит отдельное слово-число (например Goudy Bookletter 1911) | Всё правило font-family становится невалидным целиком - браузер не доходит даже до запасного варианта в этом же списке | Такие названия всегда брать в кавычки: "Goudy Bookletter 1911" |
| Общее семейство взято в кавычки, например "serif" | Браузер ищет шрифт с буквальным именем "serif", а не подставляет системный - обычно такого шрифта нет | Общие семейства пишутся без кавычек: serif, sans-serif, monospace |
| Общее семейство стоит первым или в середине списка | Браузер сразу берёт первое совпадение и не доходит до более конкретных шрифтов дальше по списку | Перечислять от самого желаемого шрифта к самому общему, общее семейство - только в конце |
Шпаргалка
| Правило | Пример |
|---|---|
| Базовый синтаксис | font-family: "Открытый шрифт", Arial, sans-serif; |
| Кавычки для составных названий | Больше одного слова или есть цифры - в кавычки: "Times New Roman" |
| Общие семейства без кавычек | serif, sans-serif, monospace, cursive, fantasy |
| Порядок в списке | Сначала желаемый шрифт(ы), в конце - общее семейство |
| Формы не наследуют шрифт | button/input/textarea по умолчанию используют свой шрифт, не шрифт body |
Коротко: отвечаем на вопросы
Какой шрифт браузер использует по умолчанию, если font-family вообще не указан?
Обычно шрифт с засечками вроде Times New Roman - это дефолт браузера, а не сайта, поэтому на разных устройствах текст без font-family может выглядеть по-разному.
Почему у кнопок и полей ввода шрифт не такой, как у остального текста?
Элементы button, input и textarea не наследуют font-family от родителя по умолчанию - у них свой собственный шрифт из стилей браузера, поэтому для них нужно задавать font-family отдельно.
