Как загружаются шрифты если браузер не поддерживает некоторые форматы

Вопрос

Как загружаются шрифты если браузер не поддерживает некоторые форматы

Профессия

Frontend Developer

Что хочет услышать интервьюер

Интервьюер хочет убедиться, что кандидат понимает механизм загрузки шрифтов в браузерах, знает о проблемах совместимости и умеет их решать. Важно показать знание современных форматов (woff2) и подходов к обеспечению кросс-браузерности.

Ключевые тезисы

• Браузер загружает первый поддерживаемый формат из списка в @font-face. Если ни один формат не поддерживается, используется fallback-шрифт из font-family.
• Важно указывать форматы в порядке предпочтения (например, woff2 первым, так как он наиболее современный и сжатый).
• Для максимальной совместимости стоит включать несколько форматов: woff2, woff, ttf.
• Можно использовать инструменты типа Font Squirrel для генерации всех необходимых форматов из исходного файла.

Подробный ответ

Когда браузер встречает правило @font-face, он анализирует список указанных форматов шрифтов в порядке их объявления. Браузер загружает первый формат, который он поддерживает. Например, если указаны woff2, woff, ttf, современный браузер загрузит woff2, а старый — пропустит его и попробует woff или ttf. Если ни один формат не поддерживается, браузер использует fallback-шрифт из указанного font-family.

Важно указывать форматы в порядке предпочтения, начиная с наиболее современных и эффективных (например, woff2), так как он обеспечивает лучшее сжатие и скорость загрузки. woff — это следующий по предпочтению формат, а ttf — универсальный, но менее оптимизированный вариант.

Для максимальной совместимости рекомендуется включать несколько форматов. Современные инструменты, такие как Font Squirrel, позволяют конвертировать исходные шрифты во все необходимые форматы автоматически. Это упрощает процесс и гарантирует, что шрифты будут работать в большинстве браузеров.

Если в @font-face указаны только woff2 и ttf, а браузер поддерживает только woff, шрифт не загрузится, и браузер применит fallback из font-family. Поэтому важно включать все основные форматы (woff2, woff, ttf) для обеспечения кросс-браузерной совместимости.

Практические примеры

Нет данных.

Частые ошибки

• Указание только одного формата шрифта (например, только woff2), что приводит к проблемам в старых браузерах.
• Неправильный порядок форматов (например, ttf перед woff2), из-за чего браузер может выбрать менее оптимальный вариант.
• Отсутствие fallback-шрифта в font-family, что может привести к неожиданному отображению текста.

Связанные темы

• Оптимизация загрузки шрифтов (FOUT/FOIT).
• Использование font-display для контроля отображения шрифтов.
• Динамическая подгрузка шрифтов через JavaScript (например, с помощью FontFace API).

Follow-up вопросы

Какой формат шрифта считается наиболее оптимальным для современных браузеров и почему?

Уровень: basic

WOFF2 — самый оптимальный, так как обеспечивает лучшее сжатие (на 30% меньше размера, чем WOFF) и поддерживается всеми современными браузерами. Он использует алгоритм Brotli для компрессии.

Как можно проверить, какой формат шрифта был загружен в браузере?

Уровень: intermediate

Через DevTools (вкладка Network). Фильтруем по font, смотрим столбец Type или Initiator. Также можно использовать performance.getEntriesByType('resource') в консоли.

Что произойдет, если в @font-face указаны только woff2 и ttf, а браузер поддерживает только woff?

Уровень: basic

Браузер проигнорирует оба формата и использует fallback-шрифт из font-family. Чтобы избежать этого, всегда включайте woff как резервный вариант.

Как реализовать FOUT/FOIT при загрузке кастомных шрифтов?

Уровень: intermediate

FOIT (временная невидимость текста) — поведение по умолчанию. Для FOUT (отображение fallback-шрифта) используйте font-display: swap в @font-face. Это улучшает восприятие контента при медленной загрузке.

Какие есть альтернативы @font-face для динамической подгрузки шрифтов?

Уровень: advanced

API FontFace (JavaScript): позволяет загружать шрифты асинхронно и контролировать процесс. Например, const font = new FontFace('MyFont', 'url(...)'); await font.load(); document.fonts.add(font);.