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

Question

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

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

铬有什么问题？

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

＆＃13;

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

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

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

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