Применение нескольких @font-face правил в CSS: пример и решение

Пройдите тест, узнайте какой профессии подходите и получите бесплатную карьерную консультацию

В конце подарим скидку до 55% на обучение

Я предпочитаю

Работать самостоятельно и не зависеть от других

Работать в команде и рассчитывать на помощь коллег

Организовывать и контролировать процесс работы

Быстрый ответ

Чтобы подключить различные стили одного шрифтового семейства, используйте несколько директив @font-face в CSS. Укажите одинаковое имя с помощью font-family и определите уникальные характеристики, такие как font-weight и font-style, для каждого стиля. В src укажите соответствующий источник для каждого шрифта.

CSS

Скопировать код

@font-face {
  font-family: 'CustomFont';
  src: url('font.woff2') format('woff2');
}

@font-face {
  font-family: 'CustomFont';
  src: url('font-bold.woff2') format('woff2');
  font-weight: bold;
}

@font-face {
  font-family: 'CustomFont';
  src: url('font-italic.woff2') format('woff2');
  font-style: italic;
}

С использованием свойств font-weight и font-style вы можете выбирать необходимый стиль в CSS:

CSS

Скопировать код

.normal { font-family: 'CustomFont'; }
.bold { font-family: 'CustomFont'; font-weight: bold; }
.italic { font-family: 'CustomFont'; font-style: italic; }

Каждый стиль будет загружаться по мере необходимости, что положительно влияет на производительность и точность отображения.

Пройдите тест и узнайте подходит ли вам сфера IT

Пройти тест

Достижение кроссплатформенной совместимости и высокопроизводительности

Совместимость с браузерами и форматы файлов

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

CSS

Скопировать код

@font-face {
  font-family: 'OptimizedFont';
  src: url('optimized-font.woff2') format('woff2'),
       url('optimized-font.woff') format('woff');
}

Оптимизация загрузки шрифтов

Чтобы оптимизировать загрузку шрифтов, используйте создание подмножеств шрифтов и API для управления шрифтами. Свойство font-display помогает минимизировать "вспышки" неотформатированного и невидимого текста.

Запасные шрифты

При оформлении CSS всегда должны быть указаны запасные универсальные веб-шрифты на случай, если основной шрифт не загрузится.

CSS

Скопировать код

.body-text {
  font-family: 'CustomFont', Arial, sans-serif;
}

Адаптивный дизайн

Производите тестирование и контроль читаемости текста на различных устройствах, используя адаптивные CSS-единицы (em, rem, %), что облегчает масштабирование шрифтов.

Эффективное управление вариациями шрифтов

Использование `font-weight` и `style` для систематизации

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

CSS

Скопировать код

@font-face {
  font-family: 'VariationFont';
  src: url('variation-font-regular.woff2') format('woff2');
}

@font-face {
  font-family: 'VariationFont';
  src: url('variation-font-thin.woff2') format('woff2');
  font-weight: 100;
}

Назначение определенных шрифтов для элементов пользовательского интерфейса

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

CSS

Скопировать код

#branding { font-family: 'VariationFont', sans-serif; font-weight: 300; }
.article-content { font-family: 'VariationFont', serif; font-weight: normal; }

Тестирование и валидация

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

Визуализация

Вы можете считать правила @font-face своего рода 'костюмами' для символов на вашем маскараде – каждое правило создает уникальный образ для вашего текста.