字距与字偶距预览器 - 实时调节CSS letter-spacing

letter-spacing（CSS属性）是对所有字符之间统一增加或减少的间距，无论字符对是什么。它也被称为"tracking"（字轨）。

kerning（字偶距）是字体设计师为特定字符对（如"AV"、"To"、"WA"）手动调整的间距，嵌入在字体文件中。CSS通过font-kerning属性控制是否启用字体内置的字偶距信息。

简单记忆：letter-spacing是全局均匀调整；kerning是特定字符对的微调。在本工具中切换font-kerning开关，使用"AVATAR WAR"等文本可以观察到微妙差异。

• 英文大写标题：全大写字母通常需要增加0.05em–0.15em的字距来提升可读性和高级感。
• 中文正文：适当增加0.02em–0.08em字距可以让文字更透气，减少密集感。
• 小字号文本：极小字号（如10px以下）适当增加字距可提升辨识度。
• 品牌标题/Logo风格：超宽字距（0.2em–0.5em）常用于营造高端、简约的品牌感。
• 紧凑排版：负值字距（-0.02em–-0.08em）可用于海报标题，营造冲击力。

推荐使用 em：因为 letter-spacing 使用 em 单位时，间距会随 font-size 自动缩放，保持比例一致。这是排版中的最佳实践。

px：固定像素值不会随字号变化，在响应式设计中可能导致字号变化时字距失调。但某些设计系统中为了方便也使用 px。

rem：相对于根元素字号，适用于需要全局统一字距的场景。1rem ≈ 16px（默认）。

在本工具中切换单位时，数值会自动转换，保持视觉上的字距一致。

中文字符本身就是方块字，默认间距较为紧凑。在中文排版中：

• 正文通常使用 0–0.05em 的字距，让阅读更舒适。
• 标题可使用 0.05em–0.15em 增加呼吸感。
• 中英文混排时，合适的 letter-spacing 可以改善中文与英文单词之间的视觉协调。
• 注意：font-kerning 对中文字体基本无影响，因为中文字体通常不包含 kerning 表。

负值 letter-spacing 让字符靠得更近，可以营造紧凑、有力的视觉效果，常用于海报标题或艺术字设计。

风险：负值过大（如低于-0.15em）会导致字符重叠，严重影响可读性。在用户生成内容或动态文本中应谨慎使用。

建议：正文避免使用负值字距；标题使用负值时建议在-0.02em到-0.08em范围内。