带有真实下划线的造型链接

在讨论如何设置下划线样式之前，我们先来思考一个问题：我们是否应该使用下划线？

在平面设计中，下划线通常被认为不够精致。有更好的方法来强调重点、建立层级和区分标题。

Butterick 的《实用排版》中对此有明确的建议：

如果你想使用下划线，不如改用粗体或斜体。在特殊情况下，例如标题，你也可以考虑使用全部大写、小型大写或更改字号。仍然不相信吗？我建议你找一本图书、一份报纸或一本杂志看看是否有下划线文本。这种风格主要与超市小报相关联。

但网络环境有所不同。超链接是互联网的定义性特征；从互联网诞生之日起，它们就一直带有下划线。这是一个普遍理解的约定，其含义非常清晰——下划线表示链接。

然而，许多流行的网站已经取消了下划线：例如《纽约时报》、《纽约杂志》、《华盛顿邮报》、彭博社、亚马逊、苹果、GitHub、推特、维基百科。谷歌首席设计师 Jon Wiley 在 2014 年解释说，从搜索结果页面移除下划线可以创造更简洁的外观。值得注意的是，这些网站中的大多数都保留了自网络诞生以来一直作为浏览器默认设置的略微不同的鲜艳蓝色 (#0000EE)。虽然这为大多数用户提供了视觉提示，但可能不足以通过 WCAG 可访问性合规性测试。

颜色不能作为唯一视觉手段来传达信息、指示操作、提示响应或区分视觉元素。 — WCAG 2.1

WCAG 并没有严格规定必须为链接使用下划线，但它确实推荐这样做。色盲用户需要能够识别链接。你可以通过其他方式来区分它们，例如使用粗体字重。或者你可以保留这个长期建立的视觉辅助功能。但如果我们要使用下划线，我们希望它们看起来漂亮。Medium 的设计师 Marcin Wichary 将完美的下划线描述为：

[…] 可见但不过分显眼——让人们意识到哪些内容是可点击的，但不会过分吸引注意力。它应该与文本保持恰当的距离，舒适地位于文本下方，即使下降体也占据相同的空间。

传统上，实现这一点需要一些CSS技巧。

我们过去使用的技巧

这是一个所有开发者都熟悉的一个技巧：border-bottom。通过使用 border-bottom 模拟下划线，我们可以控制颜色和粗细。这些伪下划线有一个问题：与文本的距离过大。它们位于字母下降体的下方。你可以通过使用 line-height 来解决这个问题，但这又会带来自身的问题。类似的技术利用 box-shadow。Marcin Wichary 首创了最复杂的技术，使用 background-image 来模拟下划线。这些都是有用的技巧，但现在已经不再需要了。

设置真正的下划线样式

最终，多亏了两个新的 CSS 属性，我们可以区分链接而不会牺牲样式。

• text-underline-offset 控制下划线的位置。
• text-decoration-thickness 控制下划线、上划线和删除线的粗细。

根据 WebKit 博客：

你也可以为这两个属性指定 from-font，它将从使用的字体文件本身提取相关的度量值。

UX 代理机构 Clearleft 大胆地使用了（伪）下划线，通过多彩的样式清晰地吸引人们注意链接。这是一个伪下划线示例：

<code>a {
  text-decoration: none;
  border-bottom: #EA215A 0.125em solid;
}</code>

请注意，这个伪下划线明显位于字母“y”的下降体下方：

这是相同的段落，使用 DevTools 将相同的样式应用于使用新的 CSS 属性的真正下划线：

<code>a {
  text-decoration-color: #EA215A;
  text-decoration-thickness: .125em;
  text-underline-offset: 1.5px;
}</code>

你会注意到我在示例代码中使用了 em 单位。规范强烈建议使用它而不是像素，以便粗细随字体缩放。

这些属性已经在 Safari 中发布，并将出现在 Firefox 70 中。

随着微软 Edge 浏览器迁移到 Chromium，我们最终将获得对 text-decoration-style 属性的跨浏览器支持，该属性提供以下选项：实线（默认）、双线、点线、虚线和波浪线。组合使用这些新属性，可以打开一系列可能性。

然而，也许网络上对下划线的最大改进是无需开发者做任何事情就能实现的。在过去，下降体会被下划线无情地切断，这远非优雅。开发者过去常常通过应用与背景颜色匹配的文本阴影来解决这个缺点。text-decoration-skip-ink 提供了一种更好的方法来为下降体留出空间。

方便的是，它被设置为下划线的新的默认值；这意味着下划线的外观得到了改进，而大多数 Web 开发者仍然不知道这个属性的存在。如果你希望下划线跨越字形，你可以将此属性设置为 none。

以上是带有真实下划线的造型链接的详细内容。更多信息请关注PHP中文网其他相关文章！