Работа с веб-шрифтами

В Chakra UI управление шрифтами осуществляется через тему (theme). Библиотека предоставляет гибкий механизм для интеграции как стандартных системных шрифтов, так и кастомных веб-шрифтов. Центральным объектом для настройки является extendTheme, который позволяет переопределять базовые параметры темы и создавать собственные типографические стили.

import { extendTheme } from "@chakra-ui/react";

const theme = extendTheme({
  fonts: {
    heading: "'Roboto', sans-serif",
    body: "'Open Sans', sans-serif",
  },
});

В этом примере указаны два ключевых свойства: heading — для заголовков, и body — для основного текста. Chakra UI автоматически применяет эти шрифты к компонентам Heading и Text, а также ко всем элементам, использующим системные типографические стили.

Импорт веб-шрифтов

Для интеграции веб-шрифтов чаще всего используются Google Fonts, локальные файлы .woff или .ttf. Импорт шрифтов через Google Fonts можно выполнять несколькими способами:

1. Через <link> в HTML:

<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">

2. Через @import в CSS:

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600&display=swap');

3. Через npm-пакеты:

npm install @fontsource/roboto
import "@fontsource/roboto/400.css";
import "@fontsource/roboto/700.css";

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

Настройка типографики в теме

Chakra UI позволяет создавать детализированные типографические системы, включая размеры, веса и межстрочные интервалы:

const theme = extendTheme({
  fonts: {
    heading: "'Roboto', sans-serif",
    body: "'Open Sans', sans-serif",
  },
  fontSizes: {
    xs: "0.75rem",
    sm: "0.875rem",
    md: "1rem",
    lg: "1.125rem",
    xl: "1.25rem",
    "2xl": "1.5rem",
    "3xl": "1.875rem",
    "4xl": "2.25rem",
    "5xl": "3rem",
  },
  fontWeights: {
    normal: 400,
    medium: 500,
    bold: 700,
  },
  lineHeights: {
    normal: "1.5",
    short: "1.25",
    tall: "1.75",
  },
});

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

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

Шрифты, подключенные через тему, применяются автоматически к компонентам Chakra UI. Например:

import { Heading, Text } from "@chakra-ui/react";

<Heading fontSize="3xl">Заголовок с Roboto</Heading>
<Text fontSize="md">Текст с Open Sans</Text>

Для отдельных компонентов можно переопределять шрифт через свойство fontFamily:

<Text fontFamily="'Courier New', monospace" fontSize="lg">
  Моноширинный текст
</Text>

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

Оптимизация веб-шрифтов

Использование веб-шрифтов может влиять на производительность, особенно при подключении большого количества весов и стилей. Для минимизации нагрузки рекомендуется:

  • Выбирать только необходимые веса и стили.
  • Использовать font-display: swap для ускорения рендеринга текста.
  • Кешировать шрифты через CDN или локальные файлы.
  • Применять системные запасные шрифты (sans-serif, serif) для обеспечения корректного отображения до загрузки веб-шрифта.
const theme = extendTheme({
  fonts: {
    heading: "'Roboto', sans-serif",
    body: "'Open Sans', system-ui, sans-serif",
  },
});

Сочетание кастомных и системных шрифтов повышает стабильность визуализации и предотвращает «мигание» текста при загрузке шрифта.

Расширенные возможности типографики

Chakra UI поддерживает кастомные стили текста через TextStyle и LayerStyle. Например, можно создавать повторно используемые текстовые стили с заданными шрифтами, размерами и цветами:

const theme = extendTheme({
  textStyles: {
    headingStyle: {
      fontFamily: "'Roboto', sans-serif",
      fontWeight: "bold",
      fontSize: "4xl",
      lineHeight: "short",
    },
    bodyStyle: {
      fontFamily: "'Open Sans', sans-serif",
      fontSize: "md",
      lineHeight: "tall",
    },
  },
});

Применение стилей:

<Text textStyle="bodyStyle">Обычный текст</Text>
<Heading textStyle="headingStyle">Кастомный заголовок</Heading>

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

Итог

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

Оглавление