无需登录 数据私有 本地保存

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

14
0
0
0
em
快捷预设: (基于当前单位自动转换)
字距让文字呼吸 The quick brown fox
生成的 CSS
letter-spacing: 0; font-size: 48px; font-family: 'PingFang SC', 'Microsoft YaHei', 'Helvetica Neue', Arial, sans-serif; line-height: 1.5; font-weight: 400; color: #1a1a2e; text-align: left; font-kerning: auto;
常见问题与知识点

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范围内。