KnowledgeDocs

Шрифты и типографика играют ключевую роль в веб-дизайне, определяя внешний вид текста и общий стиль сайта. Использование пользовательских шрифтов (Custom Fonts), правильный выбор форматов, техники применения и оптимизация шрифтов — всё это влияет на читаемость, производительность и пользовательский опыт.

1. Custom Fonts (Пользовательские шрифты)

Что это?

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

Как подключить?

Шрифты можно подключать через CSS с использованием правила `@font-face`.

Пример:

css

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

body {
  font-family: 'MyCustomFont', sans-serif;
}

Где найти шрифты?

- **Google Fonts**: Бесплатная библиотека веб-шрифтов. - **Adobe Fonts**: Шрифты с лицензией для профессионального использования. - **Custom Design**: Заказ шрифтов у типографических студий.

2. Форматы шрифтов

Основные форматы

1. **WOFF/WOFF2**: - Современные форматы для веба. - Сжаты для лучшей производительности. 2. **TTF (TrueType Font)**: - Подходит для большинства платформ. - Более тяжёлый формат по сравнению с WOFF. 3. **EOT (Embedded OpenType)**: - Используется для совместимости с IE. - Считается устаревшим. 4. **SVG**: - Поддерживает векторные шрифты. - Используется редко.

3. Техники работы с шрифтами

Фолбэк-шрифты

Укажите запасные шрифты на случай, если пользовательский шрифт не загрузится: ```css body { font-family: 'Roboto', Arial, sans-serif; } ```

Классы для разных весов и стилей

Определяйте разные веса и стили с помощью `font-weight` и `font-style`: ```css @font-face { font-family: 'Roboto'; src: url('/fonts/Roboto-Regular.woff2') format('woff2'); font-weight: 400; } @font-face { font-family: 'Roboto'; src: url('/fonts/Roboto-Bold.woff2') format('woff2'); font-weight: 700; } ```

Использование переменных шрифтов

Переменные шрифты позволяют изменять вес, ширину и наклон с помощью CSS: ```css @font-face { font-family: 'RobotoVariable'; src: url('/fonts/RobotoVariable.woff2') format('woff2'); }

h1 { font-variation-settings: 'wght' 700, 'wdth' 75; }

text


---

<h2 id="4-оптимизация-шрифтов">4. Оптимизация шрифтов</h2>

<h3 id="загрузка-шрифтов">Загрузка шрифтов</h3>
- **Preload**: Ускоряет загрузку шрифтов:
  ```html
  <link rel="preload" href="/fonts/MyFont.woff2" as="font" type="font/woff2" crossorigin="anonymous">

Lazy Load: Отложенная загрузка шрифтов для второстепенных частей сайта.

Минимизация файлов

- Используйте только те наборы символов, которые вам нужны (например, только латиницу). - Сжимайте шрифты с помощью инструментов, таких как Font Squirrel.

Оптимизация отображения

- **font-display**: Управляет отображением текста до загрузки шрифта: ```css @font-face { font-family: 'MyFont'; src: url('/fonts/MyFont.woff2') format('woff2'); font-display: swap; } ``` **Разбор:** `swap` отображает текст с запасным шрифтом до загрузки пользовательского.

Снижение количества шрифтов

- Избегайте использования большого количества разных шрифтов на странице. - Выбирайте универсальные шрифты с несколькими вариантами веса и стиля.

5. Антиалиасинг

Антиалиасинг помогает сделать текст более гладким и читаемым, особенно на экранах с низким разрешением.

Как включить антиалиасинг?

CSS предоставляет несколько свойств для управления рендерингом шрифтов: ```css body { -webkit-font-smoothing: antialiased; /* для WebKit-браузеров */ -moz-osx-font-smoothing: grayscale; /* для macOS */ font-smooth: always; /* общий стандарт */ } ```

Преимущества антиалиасинга

- Улучшает читаемость текста. - Делает текст визуально приятнее для пользователя.

6. Шрифты для иконок

Шрифты для иконок (Icon Fonts) позволяют использовать векторные изображения иконок в текстовом формате, что упрощает их стилизацию.

Пример использования шрифтов иконок

HTML: ```html ``` CSS: ```css .fa { font-family: 'FontAwesome'; font-size: 24px; } ```

Преимущества шрифтов для иконок

- Лёгкость стилизации с помощью CSS. - Масштабируемость без потери качества. - Возможность объединения нескольких иконок в один файл шрифта.

Итоговые вопросы для подготовки

1. Чем отличаются WOFF и WOFF2? 2. Как использовать `font-display` для улучшения UX? 3. Что такое переменные шрифты, и как их применять? 4. Как включить антиалиасинг для текста? 5. Какие преимущества дают шрифты для иконок?

Совет: Тестируйте шрифты на производительность и читаемость с использованием DevTools и инструментов Lighthouse.

Шрифты и типографика: Custom Fonts, форматы, техники, оптимизация шрифтов