如何在CSS中馴服線的高度

CSS中的line-height屬性可能是最容易被誤解，卻又最常使用的屬性之一。作為設計師和開發者，當我們想到line-height時，可能會想到印刷設計中的“行距”（leading）概念——有趣的是，這個術語實際上來源於在排版行之間放置鉛塊。

行距（leading）和line-height雖然相似，但有一些重要的區別。要理解這些區別，我們首先需要更多地了解排版知識。

排版術語概述

在傳統的西方字體設計中，一行文本由幾個部分組成：

• 基線(Baseline):這是文本所在的假想線。當你在有格子的筆記本上寫字時，基線就是你寫字的那條線。
• 下沉線(Descender):這條線位於基線下方。一些字符（如小寫字母g、j、q、y 和p）的底部會觸及這條線。
• x 高度(X-height):這是文本中普通小寫字母x 的高度。通常情況下，這是其他小寫字母的高度，儘管有些字母的部分可能會超過x 高度。就所有意圖和目的而言，它代表了小寫字母的感知高度。
• 大寫高度(Cap-height):這是給定一行文本中大多數大寫字母的高度。
• 上伸線(Ascender):一條經常出現在大寫高度上方的線，一些字符（如小寫字母h 或b）可能會超過正常的大寫高度。

上面描述的每個文本部分都是字體本身固有的。字體設計時會考慮到這些部分；但是，排版中有一些部分是由排版員（像你我一樣！）而不是設計師決定的。其中之一就是行距（leading）。

行距（leading）定義為一組字體中兩條基線之間的距離。

CSS 開發人員可能會想：“好的，行距就是line-height ，我們繼續吧。”雖然兩者相關，但在一些非常重要的方面它們也存在差異。

讓我們創建一個空白文檔，並向其中添加一個經典的“CSS重置”：

 * {
  margin: 0;
  padding: 0;
}

這將刪除每個元素的邊距和內邊距。

我們還將使用來自Google Fonts 的Lato 作為我們的字體系列。

我們需要一些內容，所以讓我們創建一個<p></p>標籤，其中包含一些文本，並將line-height設置為一個非常大的值，例如300px。結果是一行文本，在該行文本的上面和下面都有令人驚訝的大量空間。

當瀏覽器遇到line-height屬性時，它實際做的就是取一行文本，並將其放置在一個“行框”的中間，該行框的高度與元素的line-height匹配。我們沒有設置字體的行距，而是得到類似於在行框兩側添加填充的效果。

如上所示，行框圍繞一行文本，行距是通過在一行文本下方和下一行文本上方使用空間來創建的。這意味著對於頁面上的每個文本元素，在一個特定的文本塊中，第一行文本上方和最後一行文本下方將會有行距的一半。

更令人驚訝的是，在一個元素上顯式設置相同值的line-height和font-size ，會在文本上方和下方留下額外的空間。我們可以通過向元素添加背景顏色來查看這一點。

這是因為即使font-size設置為32px，由於生成的間距，實際的文本大小小於該值。

讓CSS 像處理行距一樣處理line-height

如果我們希望CSS 使用更傳統的排版樣式而不是行框，我們希望單行文本在其上方或下方沒有任何空間——但允許多行元素保持其完整的line-height值。

通過一點努力，可以讓CSS 了解行距。 Michael Taranto 發布了一個名為Basekick 的工具，解決了這個問題。它通過對::before偽元素應用負上邊距和對元素本身應用translateY來實現這一點。最終結果是一行文本周圍沒有任何額外空間。

Basekick 公式的最新版本可以在SEEK 的Braid Design System 的源代碼中找到。在下面的示例中，我們正在編寫一個Sass mixin 來完成繁重的工作，但是相同的公式也可以與JavaScript、Less、PostCSS mixin 或任何其他提供此類數學功能的工具一起使用。

 @function calculateTypeOffset($lh, $fontSize, $descenderHeightScale) {
  $lineHeightScale: $lh / $fontSize;
  @return ($lineHeightScale - 1) / 2 $descenderHeightScale;
}

@mixin basekick($typeSizeModifier, $baseFontSize, $descenderHeightScale, $typeRowSpan, $gridRowHeight, $capHeight) {
  $fontSize: $typeSizeModifier * $baseFontSize;
  $lineHeight: $typeRowSpan * $gridRowHeight;
  $typeOffset: calculateTypeOffset($lineHeight, $fontSize, $descenderHeightScale);
  $topSpace: $lineHeight - $capHeight * $fontSize;
  $heightCorrection: 0;

  @if $topSpace > $gridRowHeight {
    $heightCorrection: $topSpace - ($topSpace % $gridRowHeight);
  }

  $preventCollapse: 1;

  font-size: #{$fontSize}px;
  line-height: #{$lineHeight}px;
  transform: translateY(#{$typeOffset}em);
  padding-top: $preventCollapse;

  &::before {
    content: "";
    margin-top: #{-($heightCorrection $preventCollapse)}px;
    display: block;
    height: 0;
  }
}

乍一看，這段代碼肯定像是很多拼湊在一起的魔術數字。但是，通過在特定係統的上下文中考慮它，可以將其分解。讓我們看看我們需要了解的內容：

• $baseFontSize : 這是我們系統中所有其他內容都將圍繞其管理的正常字體大小。我們將使用16px 作為默認值。
• $typeSizeModifier : 這是一個乘數，與基準字體大小一起使用以確定字體大小規則。例如，值為2 與我們的基準字體大小16px 結合使用，將使我們得到font-size: 32px 。
• $descenderHeightScale : 這是以比率表示的字體下沉線的高度。對於Lato，這似乎大約是0.11。
• $capHeight : 這是以比率表示的字體的特定大寫高度。對於Lato，這大約是0.75。
• $gridRowHeight : 佈局通常依賴於默認的垂直節奏來創造一個良好且一致的閱讀體驗。例如，頁面上的所有元素都可能以4 或5 像素的倍數間隔開。我們將使用4 作為值，因為它可以很容易地除以我們的16px 的$baseFontSize 。
• $typeRowSpan : 與$typeSizeModifier類似，此變量用作乘數，與網格行高一起使用以確定規則的行高值。如果我們的默認網格行高為4，而我們的類型行跨度為8，則將得到line-height: 32px 。

現在，我們可以將這些數字代入上面的Basekick 公式（借助SCSS 函數和mixin），這將給我們以下結果。

這正是我們想要的。對於任何一組沒有邊距的文本塊元素，這兩個元素應該彼此緊貼。這樣，在兩個元素之間設置的任何邊距都將是像素完美的，因為它們不會與行框間距衝突。

優化代碼

與其將所有代碼都放入單個SCSS mixin 中，不如更好地組織它。如果我們從系統的角度考慮，我們會注意到我們正在處理三種類型的變量：

從這些方面考慮將幫助我們更容易地擴展我們的系統。讓我們依次查看每個組。

首先，系統級變量可以全局設置，因為這些變量在項目過程中不太可能更改。這將我們的主要mixin 中的變量數量減少到四個：

 $baseFontSize: 16;
$gridRowHeight: 4;

@mixin basekick($typeSizeModifier, $typeRowSpan, $descenderHeightScale, $capHeight) {
  /* Same as above */
}

我們還知道，字體級變量特定於其給定的字體系列。這意味著創建更高階的mixin 來將它們設置為常量很容易：

 @mixin Lato($typeSizeModifier, $typeRowSpan) {
  $latoDescenderHeightScale: 0.11;
  $latoCapHeight: 0.75;

  @include basekick($typeSizeModifier, $typeRowSpan, $latoDescenderHeightScale, $latoCapHeight);
  font-family: Lato;
}

現在，在規則的基礎上，我們可以輕鬆調用Lato mixin：

 .heading--medium {
  @include Lato(2, 10);
}

該輸出給我們的規則使用Lato 字體，字體大小為32px，行高為40px，以及所有相關的轉換和邊距。這使我們能夠編寫簡單的樣式規則並利用設計師在使用Sketch 和Figma 等工具時習慣的網格一致性。

結果，我們可以輕鬆創建像素完美的網頁設計。請查看下面的示例如何與我們的基本4px 網格很好地對齊。 （您可能需要放大才能看到網格。）

這樣做給了我們在創建網站佈局時一種獨特的能力：我們有史以來第一次可以真正創建像素完美的頁面。將此技術與一些基本的佈局組件結合起來，我們可以開始像在設計工具中一樣創建頁面。

朝著標準化邁進

雖然讓CSS 的行為更像我們的設計工具需要一些努力，但未來可能會有好消息。已經有人提議向CSS 規範添加一個附加功能來本地切換此行為。該提案目前的狀態是，將向文本元素添加一個類似於line-height-trim或leading-trim的附加屬性。

網絡語言的驚人之處之一是我們都有參與的能力。如果這看起來是您希望作為CSS 一部分的功能，您可以參與並向該主題添加評論，讓您的聲音被聽到。

以上是如何在CSS中馴服線的高度的詳細內容。更多資訊請關注PHP中文網其他相關文章！