字体系统
1. 字体系列
// tailwind.config.js 默认字体配置
module.exports = {
theme: {
fontFamily: {
'sans': ['ui-sans-serif', 'system-ui', '-apple-system', 'BlinkMacSystemFont'],
'serif': ['ui-serif', 'Georgia'],
'mono': ['ui-monospace', 'SFMono-Regular'],
// 自定义字体
'display': ['Oswald'],
'body': ['Open Sans'],
}
}
}
2. 字体使用
系统无衬线字体
衬线字体
等宽字体
展示型标题
正文内容
文本样式
1. 字体大小
超大标题
大标题
中标题
小标题
正文文本
小号文本
超小文本
2. 字重控制
极细体 100
细体 300
常规体 400
中等体 500
半粗体 600
粗体 700
特粗体 800
黑体 900
3. 文本对齐
左对齐文本
居中文本
右对齐文本
两端对齐文本
4. 文本装饰
下划线文本
上划线文本
删除线文本
无装饰文本
自定义下划线
高级排版特性
1. 行高控制
紧凑行高
较紧行高
正常行高
宽松行高
超宽行高
2rem 行高
2. 字间距
较紧字间距
正常字间距
宽字间距
Word
Spacing
Example
3. 文本溢出处理
这是一段很长的文本，将会被截断并显示省略号...
这是一段很长的多行文本，超过两行的部分将被截断并显示省略号...
响应式排版
1. 断点适配
响应式标题
响应式行高文本
2. 文本对齐响应式
在不同屏幕尺寸下改变对齐方式的文本
富文本排版
1. 使用 @apply
/* 富文本样式 */
.prose h1 {
@apply text-3xl font-bold mb-4;
}
.prose p {
@apply text-gray-700 leading-relaxed mb-4;
}
.prose a {
@apply text-blue-600 hover:text-blue-800 underline;
}
2. 列表样式
- 第一项
- 第二项
- 第三项
- 项目一
- 项目二
- 项目三
特殊效果
1. 渐变文本
渐变文本效果
2. 文本阴影
带阴影的文本
最佳实践
1. 排版规范
- 建立清晰的标题层级
- 保持一致的行高和间距
- 确保文本可读性
2. 响应式策略
- 使用相对单位
- 设置合适的断点
- 考虑移动设备可读性
3. 性能优化
- 合理使用字体加载
- 避免过多字体变体
- 优化文本渲染
总结
Tailwind CSS 的排版和文本样式系统提供了：
- 完整的字体控制
- 丰富的文本样式
- 灵活的响应式设计
- 强大的特效支持
通过合理运用这些特性，我们可以：
- 创建专业的排版效果
- 确保跨设备的可读性
- 提升用户体验
- 保持设计的一致性
在实际开发中，应该建立统一的排版规范，并在保证可读性的前提下，灵活运用各种排版特性。