Money-rails Gem在部分设备上出现货币符号与数值重叠问题

该问题属于跨设备字体渲染兼容性问题，并非money-rails工具逻辑错误：

• humanized_money_with_symbol默认输出的货币符号和数值之间没有显式空格
• 你使用的Source Sans Pro字体在部分旧系统/旧设备的渲染引擎中，对¥、€这类窄货币符号的自动字距计算存在偏差，最终导致重叠
• 新款设备的系统字体渲染引擎做了适配优化，会自动给货币符号和数值添加最小间距，因此不会出现异常

方案1：全局配置money-rails强制添加空格（最推荐） #

直接从输出内容层面加入固定空格，完全避免渲染问题：

• 打开config/initializers/money.rb（不存在则新建该文件）
• 添加以下配置：

Money.configure do |config|
  # 货币符号前置场景使用该格式，%u为货币符号，%n为数值，中间加空格
  config.format = "%u %n"
  # 若业务需要货币符号后置，替换为以下配置即可：
  # config.format = "%n %u"
end

配置生效后，humanized_money_with_symbol输出的所有货币文本都会自动带空格，兼容所有设备。

方案2：CSS字符间距控制 #

如果不想修改全局货币格式规则，可给包裹货币文本的DOM元素添加专属样式：

.money-content {
  /* 禁用自动字距调整，避免旧设备计算异常 */
  font-kerning: none;
  /* 添加极细字符间距，视觉无感知且可避免重叠 */
  letter-spacing: 0.5px;
  /* 防止货币符号和数值被折行拆分 */
  white-space: nowrap;
}

调用时用标签包裹即可：

<span class="money-content">
  <%= humanized_money_with_symbol product.price %>
</span>

方案3：单场景临时适配 #

如果仅部分页面出现该问题，可以直接对输出结果做正则替换插入空格：

p = humanized_money_with_symbol(product.price).gsub(/(\p{Sc})(\d)/, '\1 \2')

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