Chrome 中的 CSS 下划线太细且太低

我在 Chrome 中测试新的 CSS text-decoration-thickness 和 text-underline-offset 属性时遇到了两个错误，我想在这篇文章中与您分享这些错误。

目录

• 默认下划线不一致
• 幸运的是，我们可以覆盖浏览器的默认设置
• Chrome 错误 1：macOS 上的下划线太细
• Chrome 错误 2：下划线太低
• 帮助优先处理 Chrome 错误

首先，让我们承认一件事

默认下划线不一致

让我们在普通网页中添加一个文本链接，将其 font-family 设置为 Arial，并比较不同浏览器和操作系统上的下划线。

如您所见，默认下划线在不同浏览器之间不一致。 每个浏览器都会选择自己的默认下划线粗细和垂直位置（相对于基线的偏移）。 这与 CSS 文本装饰模块 一致，该模块指定以下默认行为（auto 值）

用户代理会选择文本装饰线条的适当粗细。 […] 用户代理会选择下划线的适当偏移。

幸运的是，我们可以覆盖浏览器的默认设置

有两个新的、广泛支持的 CSS 属性，允许我们精确地定义下划线的粗细和偏移

• text-decoration-thickness
• text-underline-offset

使用这些属性，我们即使在两个截然不同的浏览器（如基于 Gecko 的 Android Firefox 和基于 WebKit 的 macOS Safari）之间也能创建一致的下划线。

h1 {
  text-decoration: underline;
  text-decoration-thickness: 0.04em;
  text-underline-offset: 0.03em;
}

注意：text-decoration-thickness 属性还有一个特殊的 from-font 值，指示浏览器使用字体的首选下划线宽度（如果有）。 我 测试 了几个不同字体的这个值，但下划线不一致。

好的，现在让我们继续讨论我前面提到的两个 Chrome 错误。

Chrome 错误 1：macOS 上的下划线太细

如果您将 text-decoration-thickness 属性设置为一个计算结果为非整数像素值的字体相对长度值，Chrome 会将该值“向下取整”，而不是将其舍入到最接近的整数。 例如，如果声明的粗细为 0.06em，并且计算结果为 1.92px，Chrome 会绘制 1px 的粗细，而不是 2px。 此问题仅限于 macOS。

a {
  font-size: 2em; /* computes to 32px */
  text-decoration-thickness: 0.06em; /* computes to 1.92px */
}

在下面的屏幕截图中，请注意 Chrome（第三行）中的文本装饰线条比 Safari 和 Firefox 中的线条细两倍。

有关此错误的更多信息，请参见 Chromium 问题 #1255280。

Chrome 错误 2：下划线太低

text-underline-offset 属性允许我们精确地设置字母基线和下划线之间的距离（下划线相对于基线的偏移）。 不幸的是，此功能目前在 Chrome 中未正确实现，因此下划线的位置太低。

h1 {
  text-decoration: underline;
  text-decoration-color: #f707;

  /* disable “skip ink” */
  -webkit-text-decoration-skip: none; /* Safari */
  text-decoration-skip-ink: none;

  /* cover the entire descender */
  text-decoration-thickness: 0.175em; /* descender height */
  text-underline-offset: 0; /* no offset from baseline */
}

由于此错误，无法将下划线向上移动到基线。 Chrome 中。

有关此错误的更多信息，请参见 Chromium 问题 #1172623。

注意：正如您从上面的图像中可能注意到的，Safari 会在下行字符的顶部而不是底部绘制下划线。 这是一个 WebKit 错误，最近已修复。 该修复程序应在下一个版本的 Safari 中发布。

帮助优先处理 Chrome 错误

用于设置下划线样式的两个新 CSS 属性是 CSS 的一项受欢迎的补充。 希望与这两个错误相关的两个 Chrome 错误能够尽快修复。 如果这些 CSS 功能对您很重要，请通过在 Chromium 的错误跟踪器中为错误加星来表达您的意见。