Перейти к основному содержанию
iotools.cloudiotools.cloud

Генератор интервалов текста CSS

API reference

Создавайте CSS-свойства letter-spacing, word-spacing, line-height, text-indent и tab-size с предпросмотром абзаца в реальном времени. Выбирайте единицы px, em или rem и копируйте CSS и HTML.

Ввод

Используется только для предпросмотра и HTML-фрагмента.

В выбранных единицах (em считается от размера шрифта).

Ширина символа табуляции; заметна в тексте с сохранением пробелов и переносов.

Вывод

Текст с заданными интервалами появится здесь.

Объявления интервалов
CSS
HTML
Это было полезно?

Другие способы использовать этот инструмент

REST API

curl -X POST https://api.iotools.cloud/v1/tool/css-text-spacing-generator \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{}'

Подставьте свой собственный ключ из аккаунта. Поля инструмента — это тело запроса, без обёртки.

Спросите у ИИ-агента

Use the IOTools `css-text-spacing-generator` tool (CSS Text Spacing Generator) on this input:

YOUR_INPUT_HERE

Вставьте это любому агенту, подключённому к MCP-серверу IOTools, и добавьте свой ввод.

Виджет для встраивания

<iframe
  src="https://iotools.cloud/embed/css-text-spacing-generator/"
  width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
  title="Генератор интервалов текста CSS — iotools.cloud"
  sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
  allow="clipboard-write"
  style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>

Вставьте это на свою страницу — бесплатно, без ключа, нужна лишь обратная ссылка.

Стоимость вызова API/MCPОт 5 кредитов
Нужно больше кредитов?Посмотреть тарифы

Также доступно через

ИнтеграцииРасширение для браузераРасширение для VS Code

Руководства

Интервалы делают текст читаемым. В CSS для их управления есть пять свойств: letter-spacing, word-spacing, line-height, text-indent и tab-size. Этот генератор позволяет настроить все пять на живом примере абзаца и скопировать CSS.

Как пользоваться

  1. Вставьте или введите образец текста. Он нужен только для предпросмотра и HTML-фрагмента.
  2. Настройте интервалы между буквами и словами. Небольшие положительные значения делают заголовки и текст в верхнем регистре воздушнее; небольшие отрицательные уплотняют крупный декоративный шрифт.
  3. Задайте межстрочный интервал. Безразмерное значение, например 1.5, масштабируется вместе с размером шрифта. Для основного текста обычно удобнее всего значения от 1.4 до 1.7.
  4. Добавьте отступ первой строки, если нужен вид книжного абзаца.
  5. Выберите единицу. em и rem масштабируются вместе с размером шрифта; px фиксирован.
  6. Скопируйте результат: объявления, полное CSS-правило и соответствующий HTML-фрагмент.

Краткая справка

  • letter-spacing часто называют трекингом. Значения около 0.05em–0.1em подходят для подписей заглавными буквами.
  • word-spacing меняет только промежуток между словами.
  • line-height — это интерлиньяж. Используйте безразмерное число, чтобы вложенные элементы наследовали соотношение, а не вычисленную длину.
  • text-indent сдвигает только первую строку блока.
  • tab-size задаёт ширину символа табуляции в блоках с white-space: pre.

Советы по доступности

Критерий WCAG 1.4.12 требует, чтобы текст оставался работоспособным, когда пользователь задаёт межстрочный интервал не менее 1.5, интервал между абзацами 2× и межбуквенный интервал 0.12em. Избегайте контейнеров фиксированной высоты, которые обрезают текст при увеличении интервалов.

О линиях под и над текстом см. Генератор text-decoration CSS. Для теней попробуйте Генератор текстовой тени CSS.

Конфиденциальность

Всё работает в вашем браузере. Текст и настройки никогда не загружаются на сервер.

letter-spacingword-spacingline-heighttext-indenttab-sizetypographykerningleadingtracking

Нравятся инструменты? Уберите рекламу.

Один платёж навсегда убирает всю рекламу с вашего аккаунта. Без подписки, без слежки.

Убрать рекламу