Настройка шрифтов

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

1. Определение глобальных шрифтов

Все шрифты в Chakra UI задаются в объекте theme, который создаётся с помощью функции extendTheme из пакета @chakra-ui/react. Основные свойства, отвечающие за шрифты:

  • fonts — объект, где задаются семейства шрифтов для разных категорий.
  • fontSizes — объект с предопределёнными размерами шрифтов.
  • fontWeights — объект с предопределёнными значениями толщины текста.
  • lineHeights — объект с высотой строки.

Пример настройки глобальных шрифтов:

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

const theme = extendTheme({
  fonts: {
    heading: "'Montserrat', sans-serif",
    body: "'Roboto', sans-serif",
    mono: "'Fira Code', monospace",
  },
  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',
    '6xl': '3.75rem',
  },
  fontWeights: {
    normal: 400,
    medium: 500,
    semibold: 600,
    bold: 700,
  },
  lineHeights: {
    normal: 'normal',
    short: 1.25,
    base: 1.5,
    tall: 1.75,
  },
});

export default theme;

Ключевой момент: heading, body и mono используются в компонентах Chakra UI по умолчанию. Например, компонент <Heading> автоматически применяет шрифт из heading, а <Text> — из body.

2. Настройка шрифта для отдельного компонента

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

Пример:

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

function Example() {
  return (
    <>
      <Heading fontFamily="'Lobster', cursive" fontSize="4xl">
        Заголовок с кастомным шрифтом
      </Heading>
      <Text fontFamily="'Open Sans', sans-serif" fontSize="md" fontWeight="medium">
        Абзац с индивидуальной типографикой
      </Text>
    </>
  );
}

Особенности:

  • Использование fontSize со значениями из темы (md, lg, 2xl) обеспечивает согласованность дизайна.
  • Для нестандартных шрифтов необходимо подключить их через CSS или импортировать через Google Fonts.

3. Динамическая типографика через стили

Chakra UI позволяет использовать responsive styles, чтобы шрифты адаптировались к размерам экрана. Формат задаётся массивом или объектом:

<Heading fontSize={['2xl', '3xl', '4xl']}>
  Адаптивный заголовок
</Heading>
  • Первый элемент массива — для маленьких экранов (mobile).
  • Второй — для средних экранов (tablet).
  • Третий — для больших экранов (desktop).

Также можно использовать объектный синтаксис:

<Text fontSize={{ base: 'sm', md: 'md', lg: 'lg' }}>
  Адаптивный текст
</Text>

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

Для подключения нестандартных шрифтов необходимо сначала импортировать их через CSS или ссылку на шрифт. Например, с Google Fonts:

import { ChakraProvider, extendTheme } from '@chakra-ui/react';
import '@fontsource/montserrat/400.css';
import '@fontsource/montserrat/700.css';

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

function App({ children }) {
  return <ChakraProvider theme={theme}>{children}</ChakraProvider>;
}

Совет: подключение шрифтов через @fontsource позволяет точно управлять весами и стилями, без лишних запросов к внешним ресурсам.

5. Переопределение глобальных стилей

В Chakra UI можно задавать шрифты через styles.global для глобальных CSS-свойств:

const theme = extendTheme({
  styles: {
    global: {
      'html, body': {
        fontFamily: "'Roboto', sans-serif",
        lineHeight: 'base',
        fontWeight: 'normal',
      },
      a: {
        textDecoration: 'none',
        _hover: { textDecoration: 'underline' },
      },
    },
  },
});

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

6. Комбинация с системными шрифтами

Для производительности и кроссплатформенной совместимости рекомендуется комбинировать кастомные и системные шрифты:

fonts: {
  heading: "'Montserrat', system-ui, sans-serif",
  body: "'Roboto', system-ui, sans-serif",
}

Преимущества:

  • Ускоряет загрузку текста при недоступности кастомного шрифта.
  • Обеспечивает корректное отображение на всех устройствах.

7. Интеграция с Theme Tokens

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

<Text fontFamily="body" fontSize="lg" fontWeight="semibold">
  Текст через токены темы
</Text>
  • fontFamily="body" — берёт значение из theme.fonts.body.
  • fontWeight="semibold" — берёт значение из theme.fontWeights.semibold.
  • fontSize="lg" — берёт размер из theme.fontSizes.lg.

Использование токенов упрощает поддержку и масштабирование проекта.

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

Оглавление