使用自定义CSS字体时ASCII 32空格字符宽度不一致问题咨询

问题根因 #

你遇到的空格宽度不一致问题，核心出在你使用的自定义字体NewsGothDmBTWXX-Demi本身：

• 要么是字体文件制作/子集化导出时，ASCII空格（U+0020）的宽度度量值设置错误
• 要么是字体本身的设计就对不同上下文的空格做了可变宽度处理，不符合常规网页排版的预期
  你已经排查了字符类型、浏览器差异、基础字体属性，排除了其他可能性，确认是自定义字体本身的问题。

解决方案 #

方案1：修复字体源（最优解） #

1. 优先获取该字体的官方发行版本，重新导出为woff/woff2格式，导出时不要做过度的子集化裁剪，确保空格字符的属性没有被误改
2. 如果没有官方源，可以用FontForge等字体编辑工具打开现有字体文件，定位到U+0020字符，手动将其步进宽度（advance width）设置为固定的统一值，重新导出后替换现有字体文件即可。

方案2：CSS快速修复（无需修改字体，兼容性好） #

可以通过CSS的unicode-range属性，强制让空格字符调用系统无衬线字体渲染，既保留其他字符的自定义字体显示效果，又解决空格宽度不一致问题，在现有代码基础上新增以下CSS即可：

@font-face {
    font-family: "NewsGothDmBTWXX-Demi";
    src: local("Helvetica"), local("Arial"), local("sans-serif");
    unicode-range: U+0020;
}

这段规则会和你原有的@font-face声明合并，只有空格字符会匹配这段规则，使用系统无衬线字体的统一宽度空格，Chrome、Firefox等主流浏览器都支持该特性。

内容的提问来源于stack exchange，提问作者Adam Moore