字体系统

1. 字体系列

  1. // tailwind.config.js 默认字体配置
  2. module.exports = {
  3.     theme: {
  4.         fontFamily: {
  5.             'sans': ['ui-sans-serif', 'system-ui', '-apple-system', 'BlinkMacSystemFont'],
  6.             'serif': ['ui-serif', 'Georgia'],
  7.             'mono': ['ui-monospace', 'SFMono-Regular'],
  8. // 自定义字体
  9.             'display': ['Oswald'],
  10.             'body': ['Open Sans'],
  11.         }
  12.     }
  13. }

2. 字体使用

  1. <!-- 基础字体应用 -->
  2. <div class="font-sans">系统无衬线字体</div>
  3. <div class="font-serif">衬线字体</div>
  4. <div class="font-mono">等宽字体</div>
  6. <!-- 自定义字体 -->
  7. <h1 class="font-display">展示型标题</h1>
  8. <p class="font-body">正文内容</p>

文本样式

1. 字体大小

  1. <!-- 预设字体大小 -->
  2. <h1 class="text-4xl">超大标题</h1>
  3. <h2 class="text-3xl">大标题</h2>
  4. <h3 class="text-2xl">中标题</h3>
  5. <h4 class="text-xl">小标题</h4>
  6. <p class="text-base">正文文本</p>
  7. <span class="text-sm">小号文本</span>
  8. <span class="text-xs">超小文本</span>

2. 字重控制

  1. <!-- 字重变化 -->
  2. <p class="font-thin">极细体 100</p>
  3. <p class="font-light">细体 300</p>
  4. <p class="font-normal">常规体 400</p>
  5. <p class="font-medium">中等体 500</p>
  6. <p class="font-semibold">半粗体 600</p>
  7. <p class="font-bold">粗体 700</p>
  8. <p class="font-extrabold">特粗体 800</p>
  9. <p class="font-black">黑体 900</p>

3. 文本对齐

  1. <!-- 对齐方式 -->
  2. <p class="text-left">左对齐文本</p>
  3. <p class="text-center">居中文本</p>
  4. <p class="text-right">右对齐文本</p>
  5. <p class="text-justify">两端对齐文本</p>

4. 文本装饰

  1. <!-- 文本装饰 -->
  2. <p class="underline">下划线文本</p>
  3. <p class="overline">上划线文本</p>
  4. <p class="line-through">删除线文本</p>
  5. <p class="no-underline">无装饰文本</p>
  7. <!-- 组合使用 -->
  8. <a class="underline decoration-2 decoration-blue-500 hover:decoration-blue-700">
  9.     自定义下划线
  10. </a>

高级排版特性

1. 行高控制

  1. <!-- 行高设置 -->
  2. <p class="leading-none">紧凑行高</p>
  3. <p class="leading-tight">较紧行高</p>
  4. <p class="leading-normal">正常行高</p>
  5. <p class="leading-relaxed">宽松行高</p>
  6. <p class="leading-loose">超宽行高</p>
  8. <!-- 具体行高值 -->
  9. <p class="leading-8">2rem 行高</p>

2. 字间距

  1. <!-- 字母间距 -->
  2. <p class="tracking-tighter">较紧字间距</p>
  3. <p class="tracking-normal">正常字间距</p>
  4. <p class="tracking-wide">宽字间距</p>
  6. <!-- 单词间距 -->
  7. <p class="space-x-4">
  8.     <span>Word</span>
  9.     <span>Spacing</span>
  10.     <span>Example</span>
  11. </p>

3. 文本溢出处理

  1. <!-- 单行文本溢出 -->
  2. <p class="truncate">
  3.     这是一段很长的文本，将会被截断并显示省略号...
  4. </p>
  6. <!-- 多行文本溢出 -->
  7. <p class="line-clamp-2">
  8.     这是一段很长的多行文本，超过两行的部分将被截断并显示省略号...
  9. </p>

响应式排版

1. 断点适配

  1. <!-- 响应式字体大小 -->
  2. <h1 class="text-2xl md:text-3xl lg:text-4xl">
  3.     响应式标题
  4. </h1>
  6. <!-- 响应式行高 -->
  7. <p class="leading-normal md:leading-relaxed lg:leading-loose">
  8.     响应式行高文本
  9. </p>

2. 文本对齐响应式

  1. <!-- 响应式文本对齐 -->
  2. <p class="text-left md:text-center lg:text-right">
  3.     在不同屏幕尺寸下改变对齐方式的文本
  4. </p>

富文本排版

1. 使用 @apply

  1. /* 富文本样式 */
  2. .prose h1 {
  3.     @apply text-3xl font-bold mb-4;
  4. }
  6. .prose p {
  7.     @apply text-gray-700 leading-relaxed mb-4;
  8. }
  10. .prose a {
  11.     @apply text-blue-600 hover:text-blue-800 underline;
  12. }

2. 列表样式

  1. <!-- 有序列表 -->
  2. <ol class="list-decimal list-inside">
  3.     <li>第一项</li>
  4.     <li>第二项</li>
  5.     <li>第三项</li>
  6. </ol>
  8. <!-- 无序列表 -->
  9. <ul class="list-disc list-inside">
  10.     <li>项目一</li>
  11.     <li>项目二</li>
  12.     <li>项目三</li>
  13. </ul>

特殊效果

1. 渐变文本

  1. <!-- 文本渐变 -->
  2. <h1 class="bg-clip-text text-transparent bg-gradient-to-r from-blue-500 to-purple-500">
  3.     渐变文本效果
  4. </h1>

2. 文本阴影

  1. <!-- 文字阴影 -->
  2. <h2 class="text-4xl font-bold text-white text-shadow">
  3.     带阴影的文本
  4. </h2>

最佳实践

1. 排版规范

  • 建立清晰的标题层级
  • 保持一致的行高和间距
  • 确保文本可读性

2. 响应式策略

  • 使用相对单位
  • 设置合适的断点
  • 考虑移动设备可读性

3. 性能优化

  • 合理使用字体加载
  • 避免过多字体变体
  • 优化文本渲染

总结

Tailwind CSS 的排版和文本样式系统提供了：

  1. 完整的字体控制
  2. 丰富的文本样式
  3. 灵活的响应式设计
  4. 强大的特效支持

通过合理运用这些特性，我们可以：

  1. 创建专业的排版效果
  2. 确保跨设备的可读性
  3. 提升用户体验
  4. 保持设计的一致性

在实际开发中，应该建立统一的排版规范，并在保证可读性的前提下，灵活运用各种排版特性。