文字间距异常变宽源于CSS字体渲染与PSD默认行为差异，需重置letter-spacing为0、禁用font-feature-settings干扰、设text-rendering为optimizeSpeed、确保font-family可靠回退、精确控制line-height和vertical-align。
如果您将PSD设计稿切图并转换为HTML5页面后发现文字间距异常变宽，这通常源于CSS中字体渲染机制与设计软件默认行为的差异，特别是letter-spacing、font-feature-settings、text-rendering等属性未被显式控制。以下是针对性调整方案：
一、重置letter-spacing属性
PSD中文字默认无额外字间距，但浏览器可能继承父级或用户代理样式中的letter-spacing值，导致视觉变宽。需在全局或文本选择器中显式设为0。
1、在CSS文件中定位到对应文字容器的选择器，例如.title或p。
2、添加声明：letter-spacing: 0;。
立即学习“前端免费学习笔记（深入）”；
3、若使用通用重置，可在CSS开头加入：* { letter-spacing: 0 !important; }（仅限调试阶段，生产环境建议精准作用于文本元素）。
二、禁用OpenType特性干扰
某些字体（尤其是Adobe系列或Web Font）在启用font-feature-settings时会激活kerning（字距调整）或liga（连字）等OpenType特性，造成实际字间距偏离PSD测量值。
1、查找CSS中含font-feature-settings的规则。
2、将其值改为：font-feature-settings: "kern" 0, "liga" 0, "clig" 0;。
3、或直接移除该声明，改用更稳妥的写法：font-feature-settings: normal;。
三、统一text-rendering策略
Chrome与Firefox对text-rendering的默认处理不同，auto或optimizeLegibility可能触发浏览器自动字距优化，使间距不可控。
1、在body或根元素上添加CSS规则。
2、设置为：text-rendering: optimizeSpeed;。
3、避免使用optimizeLegibility，因其强制启用字距与连字，易导致PSD对齐失准。
四、检查font-family fallback链中的字体替换
当首选字体加载失败，后备字体（如sans-serif）的内置字距参数与PSD所用字体差异显著，会放大视觉间距偏差。
1、确认CSS中font-family声明是否包含明确且可稳定加载的字体，例如：font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;。
2、移除不可靠的web font引用，或确保@font-face已正确加载且font-display设为swap。
3、在开发者工具中选中文本元素，查看Computed面板下的font-family实际生效值，验证是否发生意外替换。
五、覆盖line-height与vertical-align叠加影响
line-height过大或inline元素的vertical-align非baseline，会导致行内文字基线偏移，间接拉大字符间视觉空隙，尤其在多行文本或混排图标时明显。
1、针对文字所在元素，设置：line-height: 1.2;（根据PSD行高数值精确设定，如18px/14px=1.2857→取1.29）。
2、若文字为inline或inline-block，添加：vertical-align: baseline;。
3、禁用所有未声明的vertical-align值，防止继承父级导致错位。
