讓你的字體優雅而突出——給文本添加貫穿線

在設計上，一個文本的表現力決定於許多方面，比如字體、字型大小、顏色和排版等等。而每一部分都能對整個文本的呈現效果產生巨大的影響。而本文要討論的便是如何給文本添加一種優雅而突出的元素——貫穿線。貫穿線並不是一項新鮮事物，但經過不斷的改進和演化，它成為了一種簡單而又高效的設計手法。

一、選擇適合的字體

添加貫穿線時，首先要選擇適合的字體。襯線字體（Serif）在加上貫穿線時往往更有格調，比如 Georgia 或 Times New Roman 都是不錯的選擇。本文以 Georgia 為例：

  
    @import url('https://fonts.googleapis.com/css?family=Georgia&display=swap');
    
    .text {
      font-family: 'Georgia', serif;
      font-size: 36px;
      text-decoration: line-through;
      text-decoration-color: #000;
      text-decoration-thickness: 2px;
    }
  

在上面代碼中，我們通過 Google Fonts 引入了 Georgia 字體；並給 .text 類添加了 text-decoration 屬性以添加貫穿線。接下來可以在 HTML 中將這個樣式應用到文本上：

  
    <p class="text">這是一段測試文本</p>
  

二、調整貫穿線樣式

在上面的例子中，我們還設置了兩個有趣的貫穿線屬性：text-decoration-color 和 text-decoration-thickness。

text-decoration-color 用於設置貫穿線的顏色，可以接受任何 CSS 顏色值，例如：

  
    text-decoration-color: #333; /* 灰色 */
    text-decoration-color: rgb(255, 0, 0); /* 紅色 */
  

而 text-decoration-thickness 則是用來控制貫穿線的粗細度。對於這個屬性，我們通過使用 em 單位來確保貫穿線與所使用的字體的重量相關聯，例如：

  
    text-decoration-thickness: 0.06em;
  

三、在排版中應用貫穿線

通過添加貫穿線，可以幫助我們更好的強調文本的某一部分。除了用在正文中，我們同樣可以在標題和其它排版元素中使用貫穿線。

例如，在標題上添加貫穿線可以使它更加的引人注目且易於閱讀：

  
    <h2 class="headline">
      <span class="headline__content">This is a Headline</span>
    </h2>
  

上面代碼中，在 h2 標題中的 headline__content 元素上應用了貫穿線樣式：

  
    .headline {
      font-size: 54px;
      line-height: 1.2em;
      text-transform: uppercase;
    }
    
    .headline__content {
      text-decoration: line-through;
      text-decoration-color: #000;
      text-decoration-thickness: 0.08em;
    }
  

添加貫穿線是一個簡單而有效的方法，可以讓文本更加具有個性化和獨特性。通過更改字體、顏色和貫穿線屬性，能夠呈現出多種美感和視覺效果。希望在你的下一個設計中也能夠嘗試一下添加貫穿線這一有趣的設計手法！