CSS字间距预览
在线CSS字间距预览工具，支持letter-spacing实时调节、字号联动预览与CSS代码复制。
已就绪，修改参数后将实时更新预览。
参数设置
快捷预设
实时预览
代码输出
工具说明
CSS字间距预览用于快速调节 letter-spacing 并观察排版变化，帮助你在标题设计、正文可读性优化和组件样式开发中更快找到合适字距。
什么是 Letter Spacing
Letter Spacing（字间距）是 CSS 中用于控制字符间距的属性。合理的字距可以提升阅读舒适度，也能强化标题风格和界面层级。
核心功能
- 支持 letter-spacing 数值实时调节与输入校验，范围覆盖常见排版场景。
- 支持快捷预设对比字距效果，便于快速选择紧凑或宽松风格。
- 支持字号联动预览，可同时评估字距与字号组合的视觉表现。
- 支持一键复制 CSS 代码，便于直接应用到项目样式文件。
使用步骤
- 设置字间距数值，或点击快捷预设快速切换。
- 调整字号并观察文本在不同密度下的可读性变化。
- 修改预览文本，模拟你的真实内容场景。
- 确认效果后复制 CSS 代码并应用到页面。
常见问题
为什么字间距推荐使用 em 单位？
em 会随字号同比缩放，在响应式布局和不同文本层级中更容易保持一致的视觉比例。
什么时候适合使用负字间距？
需要紧凑标题、品牌字样或窄空间展示时可少量使用负值，但过大负值会降低可读性。
中英文混排时如何更稳妥？
建议先以正文可读性为基线，通常从 0 到 0.03em 起步，再针对标题或英文片段单独微调。
使用建议
- 正文优先保证可读性，标题再根据视觉风格做适度夸张。
- 移动端字号较小时建议减少字间距，避免字符过散。
- 发布前在不同设备上复核，确认中英文和数字混排都稳定。
隐私说明
本工具不会上传文本或样式数据，所有字距计算、预览与代码生成都在浏览器本地完成。