Logo Windi CSS

排版

Font Family

用于控制元素 Font Family 的工具类。

sans
serif
mono
CSS
 Customizing 
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'],
      },
    },
  },
}

Font Family 可以是数组或者逗号分隔的字符串:
{
  // Array format:
  "sans": ["Helvetica", "Arial", "sans-serif"],
  // Comma-delimited format:
  "sans": "Helvetica, Arial, sans-serif",
}

注意：Windi CSS 不会为你自动转义 Font Family 名称，如果你使用的 Font Family 包含无效标识符，请使用引号包裹或者转义它。
{
  // Won't work:
  "sans": ["Exo 2", /* ... */],
  // Add quotes:
  "sans": ["\"Exo 2\"", /* ... */],
}

字体大小 
用来控制元素字体大小的工具类。
xs
sm
base
lg
xl
2xl
3xl
4xl
5xl
6xl
7xl
8xl
CSS
 Customizing 
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',
    },
  },
}

你可以在 windi.config.js 文件中为每一个字体大小, 使用元组 [fontSize, lineHeight] 的形式来配置默认行高。
windi.config.js
export default {
  theme: {
    fontSize: {
      sm: ['14px', '20px'],
      base: ['16px', '24px'],
      lg: ['20px', '28px'],
      xl: ['24px', '32px'],
    },
  },
}

你可以在 windi.config.js 文件中为每一个字体大小, 使用元组 [fontSize, {letterSpacing, lineHeight}] 的形式来配置默认行高。
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
 Customizing 
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,
    },
  },
}

Font Variant Numeric 
用来控制元素 Font Variant Numeric 的工具类。
normal-nums
ordinal
slashed-zero
lining-nums
oldstyle-nums
proportional-nums
tabular-nums
diagonal-fractions
stacked-fractions
CSS
连字符 
使用 hyphens 工具类可以指定文本在多行换行时应如何断字。它可以完全防止断字，在文本中手动指定的点断字，或者让浏览器在适当的地方自动插入断字。
none
manual
auto
CSS
字符间距 
用于控制元素字距的工具类。
tighter
tight
normal
wide
wider
widest
0px
2px
0.5em
CSS
 Customizing 
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
 Customizing 
windi.config.js
export default {
  theme: {
    extend: {
      lineHeight: {
        'extra-loose': '2.5',
      },
    },
  },
}

制表符宽度 
用于自定义制表符（U+0009）宽度的工具类。
default
0
2
4
8
7.5px
2rem
CSS
 Customizing 
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
gray-500/50
red-500/50
yellow-500/50
blue-500/50
green-500/50
CSS
 Customizing 
windi.config.js
export default {
  theme: {
    textColor: {
      primary: '#3490dc',
      secondary: '#ffed4a',
      danger: '#e3342f',
    },
  },
}

文本装饰 
用于控制文本装饰的工具类。
文本装饰类型 
用于控制文本装饰类型的工具类。
underline
overline
line-through
no-underline
CSS
文本装饰颜色 
用于控制文本装饰颜色的工具类。
transparent
current
gray-500
red-500
yellow-500
blue-500
green-500
gray-500/50
red-500/50
yellow-500/50
blue-500/50
green-500/50
CSS
 Customizing 
windi.config.js
export default {
  theme: {
    textDecorationColor: {
      primary: '#3490dc',
      secondary: '#ffed4a',
      danger: '#e3342f',
    },
  },
}

文本装饰样式 
用于控制文本装饰样式的工具类。
solid
double
dotted
dashed
wavy
CSS
文本装饰线粗细 
用于控制文本装饰线粗细的工具类。
auto
from-font
0
1
2
3
4
5
6
7
8
0.1rem
3px
0.3em
CSS
 Customizing 
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
 Customizing 
windi.config.js
export default {
  theme: {
    textDecorationOffset: {
      sm: '1px',
      md: '2px',
      lg: '4px',
    },
  },
}

文本装饰不透明度 
用于控制文本装饰颜色的不透明度的工具类。从 WindiCSS v3.4.0 开始作为 文本装饰颜色 的备用选项。
0
5
10
20
25
30
40
50
60
70
75
80
90
95
100
CSS
 Customizing 
windi.config.js
export default {
  theme: {
    extend: {
      textDecorationOpacity: {
        10: '0.1',
        20: '0.2',
        95: '0.95',
      },
    },
  },
}

文本缩进 
用于控制文本缩进的工具类。
default
xs
sm
md
lg
xl
2xl
3xl
1.8rem
2em
1/2
-xs
-1em
CSS
 Customizing 
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
 Customizing 
windi.config.js
export default {
  theme: {
    extend: {
      textOpacity: {
        10: '0.1',
        20: '0.2',
        95: '0.95',
      },
    },
  },
}

文本阴影 
用于控制文本元素阴影的工具类。
default
sm
md
lg
xl
none
CSS
 Customizing 
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
 Customizing 
windi.config.js
export default {
  theme: {
    extend: {
      textStrokeWidth: {
        'xl': '6',
        '2xl': '8',
      },
    },
  },
}

文本描边颜色 
用于控制文本描边颜色的工具类。
transparent
current
gray-500
red-500
yellow-500
blue-500
green-500
gray-500/50
red-500/50
yellow-500/50
blue-500/50
green-500/50
CSS
 Customizing 
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
垂直对齐 
用于控制 inline 或 table-cell 盒元素垂直对齐的工具类。
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 工具类可以设置行内文本字符的方向。它只会在垂直模式对文本产生影响（当 书写模式 不是 水平上下排列 时）。它对于垂直方向的语言文本非常有用，当然也可以用于设置垂直方向的表格标题。
mixed
upright
sideways
CSS