Логотип YeaHub

База вопросов

Собеседования

Тренажёр

База ресурсов

Обучение

Навыки

Войти

Выбери, каким будет IT завтра — вместе c нами!

YeaHub — это полностью открытый проект, призванный объединить и улучшить IT-сферу. Наш исходный код доступен для просмотра на GitHub. Дизайн проекта также открыт для ознакомления в Figma.

© 2026 YeaHub

Документы

Медиа

Назад
Вопрос про CSS: css, font

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

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

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

Для обеспечения кроссбраузерной совместимости шрифтов можно использовать несколько форматов, таких как WOFF, WOFF2, и TTF. Формат WOFF2 имеет лучшую сжатость, а TTF совместим с более старыми браузерами. Подключение шрифтов осуществляется через директиву @font-face, указывая все необходимые форматы.

Длинный ответ

Для кроссбраузерного подключения шрифтов обычно используется директива @font-face, где указываются пути к разным форматам шрифтов. Вот пример, как это может быть реализовано:

@font-face {
	font-family: 'MyFont';
	src: url('/fonts/myfont.woff2') format('woff2'),
		url('/fonts/myfont.woff') format('woff'),
		url('/fonts/myfont.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
} 

При таком подходе браузер выберет наиболее подходящий формат, обеспечивая лучшую производительность. Формат WOFF2 считается предпочтительным для современных браузеров благодаря его эффективности.

Уровень

  • Рейтинг:

    2

  • Сложность:

    2

Навыки

  • CSS

    CSS

Ключевые слова

#css

#font

Подпишись на React Developer в телеграм