# Карточка предпросмотра сочетания шрифтов

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

> Каноническая страница: https://elysiatools.com/ru/tools/font-pairing-preview-card

- **Категория:** Design

- **Ключевые слова:** сочетание шрифтов, типографика, предпросмотр шрифта, CSS

## Обзор

Карточка использует введённые названия как CSS-стеки и не скачивает файлы шрифтов. Результат детерминирован и работает офлайн; вид зависит от шрифтов хост-страницы.

## Входные данные

- **Стек шрифта заголовка** (text): Fraunces, Georgia, serif
- **Стек шрифта текста** (text): Inter, system-ui, sans-serif
- **Пример текста** (textarea): A thoughtful interface starts with readable type.
- **Набор символов** (select)
- **Размер заголовка (px)** (number)
- **Размер текста (px)** (number)
- **Насыщенность заголовка** (number)
- **Насыщенность текста** (number)
- **Интерлиньяж заголовка** (number)
- **Интерлиньяж текста** (number)

## Когда использовать

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

## Как это работает

- Введите CSS-стек шрифта заголовка и CSS-стек шрифта основного текста.
- Добавьте пример текста и выберите набор символов.
- Настройте размеры, насыщенность и интерлиньяж для заголовка и текста.
- Инструмент создаст HTML-карточку предпросмотра на основе указанных параметров.

## Сценарии использования

- Дизайнеры сравнивают редакционные антиквы и нейтральные гротески для интерфейсов и контентных страниц.
- Команды продуктов проверяют читаемость кириллицы перед выбором шрифтов.
- Разработчики получают готовое визуальное представление CSS-стеков с заданными типографическими параметрами.

## Частые вопросы

### Скачивает ли инструмент файлы шрифтов?

Нет. Он использует введённые названия как CSS-стеки.

### От чего зависит внешний вид предпросмотра?

От шрифтов, установленных или загруженных на странице хоста.

### Можно ли использовать резервные шрифты?

Да. Добавьте в стек варианты вроде serif, sans-serif или system-ui.

### Какие параметры можно настроить?

Размер, насыщенность и интерлиньяж заголовка и основного текста.

### Какой результат создаёт инструмент?

HTML-карточку с предпросмотром выбранного сочетания шрифтов.

## Связанные инструменты

- [Объяснитель BFV, CKKS, LWE: бюджет шума, рelineаризация и бутстраппинг FHE](https://elysiatools.com/ru/tools/bfv-ckks-lwe-fhe-ciphertext-noise-budget-relin-and-bootstrapping-explainer): Запускает настоящую мини-схему BFV/CKKS над Z_q\[x\]/(xⁿ+1): точные бюджеты инвариантного шума в битах, умножение с рelineаризацией, смену модуля, SIMD-упаковку слотов и обновление бутстраппингом.
- [Аудитор стилевой согласованности рукописи](https://elysiatools.com/ru/tools/manuscript-style-consistency-auditor): Проверяет числа, даты, единицы, кавычки, тире, уровни заголовков и имена; создаёт style sheet
- [Регулятор Прозрачности Цвета](https://elysiatools.com/ru/tools/color-opacity-adjuster): Регулировка прозрачности/альфа-канала цвета с предпросмотром в реальном времени и пакетной обработкой
- [Экстрактор токенов темы ECharts](https://elysiatools.com/ru/tools/echarts-theme-token-extractor): Извлекает дизайн-токены — цвета, числа, размеры шрифтов и строки — из JSON темы ECharts и экспортирует их прямо в вашу дизайн-систему. Вставьте объект темы (тот, что регистрируется и передаётся в echarts.init(dom, themeName)) — инструмент обойдёт каждый лист, пометит каждый цвет (с опциональной нормализацией имя/rgb → hex), числовой отступ, размер шрифта и строку, затем выдаст чистые CSS-переменные, конфиг theme.extend для Tailwind, tokens.json Style Dictionary или SCSS-переменные. Мост между темой визуализации ECharts и дизайн-токенами Figma/CSS/Tailwind без копирования каждого значения вручную.
- [Карточка спеков Figma iOS Android pt dp sp (адаптивный дизайн)](https://elysiatools.com/ru/tools/figma-ios-android-pt-dp-sp-responsive-design-spec-card): Переводит px из Figma в правильные платформенные единицы и генерирует спеку для разработчиков: iOS pt (@1x/@2x/@3x с рендером px на каждый масштаб), Android dp/sp (таблица рендера mdpi…xxxhdpi и масштаб шрифта), web rem/vw со сниппетом clamp(); аудит минимальных сенсорных целей (44pt iOS / 48dp Android / 44px и 24px WCAG) с пометкой классов окон Material и брейкпоинтов Tailwind.
- [Инспектор файлов шрифтов (TTF / OTF / WOFF / WOFF2)](https://elysiatools.com/ru/tools/font-file-inspector): Загрузите шрифт TTF, OTF, WOFF или WOFF2 (WOFF2 автоматически распаковывается) и изучите все метаданные: семейство/подсемейство/дизайнер/копирайт/версия, число глифов, unitsPerEm, насыщенность и ширину, угол наклона, флаги стиля и bounding box; тепловую карту покрытия по блокам Юникода; SVG-предпросмотр глифов (свой текст, автосбор для иконочных шрифтов); лигатуры liga и возможности OpenType; оси fvar и именованные экземпляры вариативных шрифтов.
- [Лаборатория Типографики PDF](https://elysiatools.com/ru/tools/pdf-typography-playground): Экспериментируйте с настройками типографики: межстрочный интервал, отступы, выравнивание
- [Удаление дубликатов строк](https://elysiatools.com/ru/tools/remove-duplicate-lines): Убирает повторяющиеся строки в списке или блоке текста. Оставляет первое или последнее вхождение, с настройками учёта регистра, обрезки пробелов и игнорирования пустых строк.

## Примеры

- [Примеры кредитных карт](https://elysiatools.com/ru/samples/credit-card): Тестовые номера карт для различных платежных систем (Visa, MasterCard, Amex и др.)
- [Примеры Переменных Шрифтов](https://elysiatools.com/ru/samples/variable-font-samples): Файлы переменных шрифтов с осями fvar для инспектора осей/экземпляров и CSS-конструктора
- [MP3 Аудио Образцы Без Авторских Прав](https://elysiatools.com/ru/samples/mp3-samples): Коллекция аудио образцов без авторских прав для тестирования и разработки, включая звуки природы, медитативную музыку и фоновое аудио
- [SVG Примеры](https://elysiatools.com/ru/samples/svg-samples): Примеры масштабируемой векторной графики (SVG) демонстрирующие различные возможности и техники SVG