虚线下划线无法在Chrome中正确呈现

Question

使用Chrome 65，它看起来像text-decoration: underline dotted; 产生一个不雅的结果：

而在Firefox上，我得到了预期的结果：

铬有什么问题？

---

我通过进一步测试扩展了片段。 似乎只有某些字体大小和字体表面失败。 特别是在这里使用Trebuchet MS和18px字体大小。

 span{ text-decoration: underline dotted; font-family: Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif; padding: 1rem; background-color: black; color: white; display: inline-block; margin: 1rem; } 

 <span style="font-size: 12px;"> A 12px button of some sort </span> <span style="font-size: 14px;"> A 14px button of some sort </span> <span style="font-size: 16px;"> A 16px button of some sort </span> <span style="font-size: 18px; background-color: darkRed;"> A 18px button of some sort </span> <span style="font-size: 20px;"> A 20px button of some sort </span> 

Answer 1

使用text-decoration-skip-ink: none （默认值已在https://crrev.com/514104中更改为auto 。）

如果仔细观察，下划线中的间隙对应于字母底部的环，它们非常接近字体的基线。 似乎skip-ink算法选择在此处删除下划线 - 但仅限于虚线和虚线，并且仅限于某些字体大小。

https://crbug.com/808603表明，根本原因是点和短划线是两个像素高。