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

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

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

@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:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@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;
}

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

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

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

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

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

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

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

Полезные материалы

1. Правило @font-face в CSS — W3Schools — обучение использованию @font-face.
2. Как использовать @font-face в CSS | CSS-Tricks — пошаговый гайд по @font-face.
3. @font-face — CSS: Каскадные таблицы стилей | MDN — полное руководство от Mozilla.
4. Создайте свои наборы @font-face » Font Squirrel — генератор веб-шрифтов.
5. Могу ли я использовать... Поддержка HTML5, CSS3 и т.д. — проверка совместимости шрифтов.
6. Каталог шрифтов — Google Fonts — библиотека бесплатных шрифтов от Google.
7. Детальное руководство по стратегиям загрузки шрифтов — zachleat.com — стратегии оптимизации загрузки шрифтов.