С какими проблемами вы сталкивались при подключении кастомных шрифтов?

Кроссбраузерная совместимость форматов шрифтов (woff, woff2, eot, ttf, svg).

Короткий ответ

Что ответить на собеседовании

Кроссбраузерная совместимость форматов шрифтов (woff, woff2, eot, ttf, svg). Проблемы с отображением на разных операционных системах и устройствах (например, сглаживание). Некорректное отображение символов (например, кириллицы) или отсутствие нужных глифов. Задержка загрузки страницы из-за большого размера файлов шрифтов или проблем с производительностью сети. FOUT (Flash of Unstyled Text) или FOIT (Flash of Invisible Text) при загрузке шрифтов. Проблемы с лицензированием и правами использования шрифтов. Ошибки CORS при загрузке шрифтов с других доменов.

Подробный разбор

Ответ с пояснениями

  • Кроссбраузерная совместимость форматов шрифтов (woff, woff2, eot, ttf, svg).
  • Проблемы с отображением на разных операционных системах и устройствах (например, сглаживание).
  • Некорректное отображение символов (например, кириллицы) или отсутствие нужных глифов.
  • Задержка загрузки страницы из-за большого размера файлов шрифтов или проблем с производительностью сети.
  • FOUT (Flash of Unstyled Text) или FOIT (Flash of Invisible Text) при загрузке шрифтов.
  • Проблемы с лицензированием и правами использования шрифтов.
  • Ошибки CORS при загрузке шрифтов с других доменов.
@font-face {
  font-family: 'MyCustomFont'; /* Название шрифта */
  src: url('mycustomfont.woff2') format('woff2'), /* Формат woff2 для современных браузеров */
       url('mycustomfont.woff') format('woff'), /* Формат woff для широкой совместимости */
       url('mycustomfont.ttf') format('truetype'); /* Формат ttf для мобильных устройств */
  font-weight: normal; /* Вес шрифта */
  font-style: normal; /* Стиль шрифта */
  font-display: swap; /* Поведение загрузки шрифта, чтобы избежать FOIT */
}

body {
  font-family: 'MyCustomFont', sans-serif; /* Использование шрифта */
}

ИИ-помощник для собеседований

Хочешь уверенно проходить собеседования?

Попробуй ИИ-помощник для собеседований: слышит вас и собеседника, анализирует экран, подсказывает ответы в реальном времени, работает без VPN и не попадает в захват экрана.

Подробнее