CSS какие шрифты

css какие шрифты — этот вопрос обычно означает: какие названия можно писать в свойстве font-family, что реально отобразится у пользователя и как не сломать вёрстку из-за отсутствующего файла шрифта.

В CSS нет «списка разрешённых шрифтов» как такового. Браузер может показать любой шрифт, который установлен в системе, подключён через @font-face или доступен через сервис шрифтов. Поэтому корректный ответ всегда зависит от задачи: нужен ли предсказуемый вид, поддержка кириллицы, быстрая загрузка или похожесть на печатный макет.

Какие шрифты можно указывать в CSS

В свойстве font-family допускаются любые названия семейства шрифтов, но браузер применит их только если шрифт найден. Обычно используют несколько вариантов через запятую: сначала желаемый шрифт, затем запасные, а в конце общий тип семейства.

• Системные шрифты: Arial, Times New Roman, Georgia, Verdana, Trebuchet MS, Courier New и другие, если они есть в ОС.
• Веб-шрифты: файлы, подключённые через @font-face, например из форматов woff2 и woff.
• Шрифты по умолчанию: serif, sans-serif, monospace, cursive, fantasy, system-ui.

Практический смысл такой: вы не перечисляете «все шрифты CSS», а задаёте стек с запасом. Например, если первый вариант недоступен, браузер подставит следующий. Это особенно важно для русскоязычных интерфейсов, где не каждый шрифт имеет полный набор кириллических глифов.

Как выбрать шрифты без сюрпризов

Если нужен безопасный и быстрый вариант, лучше опираться на системные семейства. Они не требуют загрузки файла, поэтому текст появляется сразу и не даёт лишней задержки. Но внешний вид будет зависеть от платформы: один и тот же стек на Windows, macOS, Linux и Android может выглядеть по-разному.

Для интерфейсов обычно берут нейтральный sans-serif. Для длинных текстов часто удобнее шрифт с хорошей читаемостью и заметным различием букв, например с однородной высотой знаков и не слишком тонкими штрихами. Для кода и таблиц уместен monospace, потому что одинаковая ширина символов облегчает выравнивание.

Полезно заранее проверить три вещи:

1. Есть ли у шрифта кириллица и нужные символы.
2. Не слишком ли тонкий он на маленьких размерах.
3. Есть ли у него несколько начертаний: normal, bold, italic.

Запасные варианты и подключение

Когда требуется точный дизайн, font-family обычно строится от конкретного шрифта к запасным. Если первый не загрузится, пользователь хотя бы увидит близкий по стилю вариант. Например, для текста можно указать не один шрифт, а цепочку из нескольких семейств и общий тип в конце.

body {
  font-family: "Inter", "Segoe UI", Arial, sans-serif;
}

Такой подход помогает в ситуации, когда пользователь отключил загрузку шрифтов, сеть медленная или файл не поддерживается. Если нужен собственный шрифт, его подключают через @font-face и обязательно указывают несколько форматов, совместимых с браузерами, которые вы поддерживаете.

Но стоит помнить: слишком много веб-шрифтов замедляет страницу, а слишком декоративные гарнитуры ухудшают читаемость. Поэтому css какие шрифты — это не только вопрос вкуса, но и вопрос производительности, контраста и доступности.

Что брать для типичных задач

Если нужен универсальный ответ, ориентируйтесь на задачу:

• Для интерфейса: системный sans-serif или аккуратный веб-шрифт с запасом.
• Для статьи: спокойный шрифт с хорошей читаемостью на малом и среднем кегле.
• Для кода: monospace.
• Для брендинга: фирменный шрифт, но с продуманным fallback.

Проверять результат лучше прямо в браузере: меняйте размер текста, открывайте страницу на нескольких устройствах и смотрите, не «плывут» ли строки, не сдвигаются ли блоки и не заменяется ли шрифт неожиданно на другой. Если вид меняется слишком сильно, значит запасной стек подобран неудачно.

Итог простой: css какие шрифты — это любые семейства, которые умеет показать браузер, но надёжнее всего использовать цепочку из основного шрифта, нескольких запасных и общего семейства в конце, чтобы текст оставался читаемым в любых условиях.