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

Question

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

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

chrome 怎么了？

我通过进一步测试扩展了代码段。它似乎只对某些字体大小和字体失败。特别是这里使用 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 表明根本原因是点和破折号是两个像素高。

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

Dotted underlines don't render properly in Chrome

css

google-chrome

underline

text-decorations