帶有真實下劃線的造型鏈接

在討論如何設置下劃線樣式之前，我們先來思考一個問題：我們是否應該使用下劃線？

在平面設計中，下劃線通常被認為不夠精緻。有更好的方法來強調重點、建立層級和區分標題。

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中文網其他相關文章！