Logo Windi CSS

Типография

Семейство шрифтов

Утилиты для управления семейством шрифтов элемента.

sans
serif
mono
CSS
 Персонализация 
export default {
  theme: {
    extend: {
      fontFamily: {
        sans: ['ui-sans-serif', 'system-ui'],
        serif: ['ui-serif', 'Georgia'],
        mono: ['ui-monospace', 'SFMono-Regular'],
        display: ['Oswald'],
        body: ['Open Sans'],
      },
    },
  },
}

Семейства шрифтов можно указать как массив или как простую строку с разделителями-запятыми:
{
  // Формат массива:
  "sans": ["Helvetica", "Arial", "sans-serif"],
  // Формат с разделителями-запятыми:
  "sans": "Helvetica, Arial, sans-serif",
}

Обратите внимание, что Windi CSS не экранирует имена шрифтов автоматически. Если вы используете шрифт, содержащий недопустимый идентификатор, заключите его в кавычки или экранируйте недопустимые символы.
{
  // Не будет работать:
  "sans": ["Exo 2", /* ... */],
  // Добавить кавычки:
  "sans": ["\"Exo 2\"", /* ... */],
}

Размер шрифта 
Утилиты для управления размером шрифта элемента.
xs
sm
base
lg
xl
2xl
3xl
4xl
5xl
6xl
7xl
8xl
CSS
 Персонализация 
windi.config.js
export default {
  theme: {
    fontSize: {
      'xs': '.75rem',
      'sm': '.875rem',
      'tiny': '.875rem',
      'base': '1rem',
      'lg': '1.125rem',
      'xl': '1.25rem',
      '2xl': '1.5rem',
      '3xl': '1.875rem',
      '4xl': '2.25rem',
      '5xl': '3rem',
      '6xl': '4rem',
      '7xl': '5rem',
    },
  },
}

Вы можете указать высоту строки по умолчанию для каждого размера шрифта, используя кортеж формы [fontSize, lineHeight] в файле windi.config.js.
windi.config.js
export default {
  theme: {
    fontSize: {
      sm: ['14px', '20px'],
      base: ['16px', '24px'],
      lg: ['20px', '28px'],
      xl: ['24px', '32px'],
    },
  },
}

Если вы также хотите указать значение межбуквенного интервала по умолчанию для размера шрифта, вы можете сделать это, используя кортеж вида [fontSize, { letterSpacing, lineHeight }] в вашем файле windi.config.js.
windi.config.js
export default {
  theme: {
    fontSize: {
      '2xl': ['24px', {
        letterSpacing: '-0.01em',
      }],
      // Or with a default line-height as well
      '3xl': ['32px', {
        letterSpacing: '-0.02em',
        lineHeight: '40px',
      }],
    },
  },
}

Сглаживание шрифтов 
Утилиты для управления сглаживанием шрифта элемента.
antialiased
subpixel-antialiased
CSS
Стиль шрифта 
Утилиты для управления стилем текста.
italic
not-italic
CSS
Толщина шрифта 
Утилиты для управления жирностью шрифта элемента.
thin
extralight
light
normal
medium
semibold
bold
extrabold
black
400
600
CSS
 Персонализация 
windi.config.js
export default {
  theme: {
    fontWeight: {
      'hairline': 100,
      'extra-light': 100,
      'thin': 200,
      'light': 300,
      'normal': 400,
      'medium': 500,
      'semibold': 600,
      'bold': 700,
      'extrabold': 800,
      'extra-bold': 800,
      'black': 900,
    },
  },
}

Числовой вариант шрифта 
Утилиты для управления вариантом чисел.
normal-nums
ordinal
slashed-zero
lining-nums
oldstyle-nums
proportional-nums
tabular-nums
diagonal-fractions
stacked-fractions
CSS
Дефисы 
Утилиты дефисов определяют, как слова должны быть расставлены через дефис, когда текст переносится на несколько строк. Он может полностью предотвратить расстановку переносов, переносить перенос в заданные вручную места в тексте или позволить браузеру автоматически вставлять переносы там, где это необходимо.
none
manual
auto
CSS
Межбуквенное расстояние 
Утилиты для управления отслеживанием (межбуквенным интервалом) элемента.
tighter
tight
normal
wide
wider
widest
0px
2px
0.5em
CSS
 Персонализация 
windi.config.js
export default {
  theme: {
    letterSpacing: {
      tightest: '-.075em',
      tighter: '-.05em',
      tight: '-.025em',
      normal: '0',
      wide: '.025em',
      wider: '.05em',
      widest: '.25em',
    },
  },
}

Высота строки 
Утилиты для управления интерлиньяжем (высотой строки) элемента.
none
tight
snug
normal
relaxed
loose
0
1
2
3
4
5
6
CSS
 Персонализация 
windi.config.js
export default {
  theme: {
    extend: {
      lineHeight: {
        'extra-loose': '2.5',
      },
    },
  },
}

Размер табуляции 
Утилиты размера табуляции используются для настройки ширины символов табуляции (U+0009).
default
0
2
4
8
7.5px
2rem
CSS
 Персонализация 
windi.config.js
export default {
  theme: {
    tabSize: {
      sm: '2',
      md: '4',
      lg: '8',
    },
  },
}

Выравнивание текста 
Утилиты для контроля выравнивания текста.
left
center
right
justify
CSS
Цвет текста 
Утилиты для управления цветом текста элемента.
transparent
current
gray-500
red-500
yellow-500
blue-500
green-500
CSS
 Персонализация 
windi.config.js
export default {
  theme: {
    textColor: {
      primary: '#3490dc',
      secondary: '#ffed4a',
      danger: '#e3342f',
    },
  },
}

Оформление текста 
Утилиты для управления оформлением текста.
Тип оформления текста 
Утилиты для управления типом оформления текста.
underline
line-through
no-underline
CSS
Стиль оформления текста 
Утилиты для управления стилем оформления текста.
solid
double
dotted
dashed
CSS
Цвет оформления текста 
Утилиты для управления цветом оформления текста.
transparent
current
gray-500
red-500
yellow-500
blue-500
green-500
CSS
 Персонализация 
windi.config.js
export default {
  theme: {
    textDecorationColor: {
      primary: '#3490dc',
      secondary: '#ffed4a',
      danger: '#e3342f',
    },
  },
}

Прозрачность оформления текста 
Утилиты для управления непрозрачностью цвета оформления элемента.
0
5
10
20
25
30
40
50
60
70
75
80
90
95
100
CSS
 Персонализация 
windi.config.js
export default {
  theme: {
    extend: {
      textDecorationOpacity: {
        10: '0.1',
        20: '0.2',
        95: '0.95',
      },
    },
  },
}

Длина оформления текста 
Утилиты для управления длиной оформления текста.
auto
0
1
2
3
4
5
6
7
8
0.1rem
3px
0.3em
CSS
 Персонализация 
windi.config.js
export default {
  theme: {
    extend: {
      textDecorationLength: {
        sm: '1px',
        md: '2px',
        lg: '4px',
      },
    },
  },
}

Смещение оформления текста 
Утилиты для управления смещением оформления текста.
auto
1
2
3
4
5
6
7
8
0.6rem
8.5px
0.5em
CSS
 Персонализация 
windi.config.js
export default {
  theme: {
    textDecorationOffset: {
      sm: '1px',
      md: '2px',
      lg: '4px',
    },
  },
}

Отступ текста 
Утилиты для управления отступом текста.
default
xs
sm
md
lg
xl
2xl
3xl
1.8rem
2em
1/2
-xs
-1em
CSS
 Персонализация 
windi.config.js
export default {
  theme: {
    extend: {
      textIndent: {
        '4xl': '5rem',
        '5xl': '6rem',
      },
    },
  },
}

Непрозрачность текста 
Утилиты для управления непрозрачностью цвета текста элемента.
0
5
10
20
25
30
40
50
60
70
75
80
90
95
100
CSS
 Персонализация 
windi.config.js
export default {
  theme: {
    extend: {
      textOpacity: {
        10: '0.1',
        20: '0.2',
        95: '0.95',
      },
    },
  },
}

Тень текста 
Утилиты для управления тенью текстового элемента.
default
sm
md
lg
xl
none
CSS
 Персонализация 
windi.config.js
export default {
  theme: {
    textShadow: {
      'DEFAULT': '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)', // If a DEFAULT shadow is provided, it will be used for the non-suffixed shadow utility.
      '2xl': '0 25px 50px -12px rgba(0, 0, 0, 0.25)',
      '3xl': '0 35px 60px -15px rgba(0, 0, 0, 0.3)',
    },
  },
}

Обводка текста 
Утилиты для управления обводкой текстового элемента.
Ширина обводки текста 
Утилиты для управления шириной обводки текста.
default
none
sm
md
lg
0
1
2
3
4
5
6
7
8
0.1rem
3px
0.3em
CSS
 Персонализация 
windi.config.js
export default {
  theme: {
    extend: {
      textStrokeWidth: {
        'xl': '6',
        '2xl': '8',
      },
    },
  },
}

Цвет обводки текста 
Утилиты для управления цветом обводки текста.
transparent
current
gray-500
red-500
yellow-500
blue-500
green-500
CSS
 Персонализация 
windi.config.js
export default {
  theme: {
    textStrokeColor: {
      primary: '#3490dc',
      secondary: '#ffed4a',
      danger: '#e3342f',
    },
  },
}

Преобразование текста 
Утилиты для управления преобразованием текста.
uppercase
lowercase
capitalize
normal-case
CSS
Переполнение текста 
Утилиты для управления переполнением текста в элементе.
truncate
overflow-ellipsis
overflow-clip
CSS
Вертикальное выравнивание 
Утилиты для управления вертикальным выравниванием встроенного поля или поля таблицы-ячейки.
baseline
top
middle
bottom
text-top
text-bottom
CSS
Пробел 
Утилиты для управления свойством пустого пространства элемента.
normal
nowrap
pre
pre-line
pre-wrap
CSS
Перенос слов 
Утилиты для управления разрывами слов в элементе.
normal
words
all
CSS
Режим записи 
Утилита writing-mode устанавливает, будут ли строки текста располагаться по горизонтали или вертикали, а также направление, в котором происходит прогресс блоков. При установке для всего документа он должен быть установлен в корневом элементе (элемент html для документов HTML).
normal
vertical-right
vertical-left
CSS
Ориентация записи 
Утилита writing-orientation устанавливает ориентацию текстовых символов в строке. Это влияет только на текст в вертикальном режиме (когда writing-mode не horizontal-tb). Это полезно для управления отображением языков, использующих вертикальный сценарий, а также для создания заголовков вертикальных таблиц.
mixed
upright
sideways
CSS