Chrome 65特定字体字号下text-decoration虚线下划线渲染异常求助

这个问题其实是浏览器渲染引擎差异+特定字体度量适配+旧版本bug共同导致的，具体拆解如下：

核心原因 #

• Blink与Gecko的下划线实现逻辑不同
  Chrome基于Blink引擎，Firefox则用Gecko引擎。对于text-decoration: underline dotted，Chrome会严格遵循字体文件自带的下划线度量参数（如下划线高度、偏移量）来计算虚线的点大小和间距；而Firefox会在字体参数不合理时自动做自适应调整，不会完全被字体度量绑定，因此能显示正常的虚线。

• Trebuchet MS字体的特殊度量适配问题
  Trebuchet MS字体的内部下划线相关参数，在18px字号下刚好和Chrome 65的虚线渲染逻辑冲突——比如字体定义的下划线高度过小，Chrome计算出的虚线点会被挤压变形，要么连在一起，要么显示得断断续续很怪异；而Firefox会忽略这个不合理的高度，用更通用的规则生成虚线，所以效果符合预期。

• Chrome 65的版本局限性
  这是Chrome旧版本的专属bug，后续Chrome版本（比如70+之后）已经针对这类字体与text-decoration的适配问题做了修复，升级到新版本后该问题基本会消失。

临时解决办法 #

如果暂时无法升级浏览器，或必须使用Trebuchet MS 18px，可以试试这些方案：

• 用border-bottom模拟下划线：放弃原生的text-decoration，用边框模拟下划线，能在所有浏览器中得到一致效果：

span {
  font-family: Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif;
  padding: 1rem;
  padding-bottom: 0.9rem; /* 调整该值控制下划线与文字的间距 */
  border-bottom: 1px dotted #000; /* 颜色可按需修改 */
  background: /* 你的背景色 */;
}

• 微调字号或更换字体：比如把字号改成17px/19px，或者替换为Tahoma这类相近字体，也能避开兼容性问题。

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