CSS中的line-height屬性可能是最容易被誤解，卻又最常使用的屬性之一。作為設(shè)計(jì)師和開(kāi)發(fā)者，當(dāng)我們想到line-height時(shí)，可能會(huì)想到印刷設(shè)計(jì)中的“行距”（leading）概念——有趣的是，這個(gè)術(shù)語(yǔ)實(shí)際上來(lái)源於在排版行之間放置鉛塊。

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

排版術(shù)語(yǔ)概述

在傳統(tǒng)的西方字體設(shè)計(jì)中，一行文本由幾個(gè)部分組成：

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

上面描述的每個(gè)文本部分都是字體本身固有的。字體設(shè)計(jì)時(shí)會(huì)考慮到這些部分；但是，排版中有一些部分是由排版員（像你我一樣?。┒皇窃O(shè)計(jì)師決定的。其中之一就是行距（leading）。

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

CSS 開(kāi)發(fā)人員可能會(huì)想：“好的，行距就是line-height ，我們繼續(xù)吧?！彪m然兩者相關(guān)，但在一些非常重要的方面它們也存在差異。

讓我們創(chuàng)建一個(gè)空白文檔，並向其中添加一個(gè)經(jīng)典的“CSS重置”：

 * {
  margin: 0;
  padding: 0;
}

這將刪除每個(gè)元素的邊距和內(nèi)邊距。

我們還將使用來(lái)自Google Fonts 的Lato 作為我們的字體系列。

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

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

如上所示，行框圍繞一行文本，行距是通過(guò)在一行文本下方和下一行文本上方使用空間來(lái)創(chuàng)建的。這意味著對(duì)於頁(yè)面上的每個(gè)文本元素，在一個(gè)特定的文本塊中，第一行文本上方和最後一行文本下方將會(huì)有行距的一半。

更令人驚訝的是，在一個(gè)元素上顯式設(shè)置相同值的line-height和font-size ，會(huì)在文本上方和下方留下額外的空間。我們可以通過(guò)向元素添加背景顏色來(lái)查看這一點(diǎn)。

這是因?yàn)榧词?code>font-size設(shè)置為32px，由於生成的間距，實(shí)際的文本大小小於該值。

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

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

通過(guò)一點(diǎn)努力，可以讓CSS 了解行距。 Michael Taranto 發(fā)布了一個(gè)名為Basekick 的工具，解決了這個(gè)問(wèn)題。它通過(guò)對(duì)::before偽元素應(yīng)用負(fù)上邊距和對(duì)元素本身應(yīng)用translateY來(lái)實(shí)現(xiàn)這一點(diǎn)。最終結(jié)果是一行文本周?chē)鷽](méi)有任何額外空間。

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

 @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;
  }
}

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

• $baseFontSize : 這是我們系統(tǒng)中所有其他內(nèi)容都將圍繞其管理的正常字體大小。我們將使用16px 作為默認(rèn)值。
• $typeSizeModifier : 這是一個(gè)乘數(shù)，與基準(zhǔn)字體大小一起使用以確定字體大小規(guī)則。例如，值為2 與我們的基準(zhǔn)字體大小16px 結(jié)合使用，將使我們得到font-size: 32px 。
• $descenderHeightScale : 這是以比率表示的字體下沉線的高度。對(duì)於Lato，這似乎大約是0.11。
• $capHeight : 這是以比率表示的字體的特定大寫(xiě)高度。對(duì)於Lato，這大約是0.75。
• $gridRowHeight : 佈局通常依賴於默認(rèn)的垂直節(jié)奏來(lái)創(chuàng)造一個(gè)良好且一致的閱讀體驗(yàn)。例如，頁(yè)面上的所有元素都可能以4 或5 像素的倍數(shù)間隔開(kāi)。我們將使用4 作為值，因?yàn)樗梢院苋菀椎爻晕覀兊?6px 的$baseFontSize 。
• $typeRowSpan : 與$typeSizeModifier類(lèi)似，此變量用作乘數(shù)，與網(wǎng)格行高一起使用以確定規(guī)則的行高值。如果我們的默認(rèn)網(wǎng)格行高為4，而我們的類(lèi)型行跨度為8，則將得到line-height: 32px 。

現(xiàn)在，我們可以將這些數(shù)字代入上面的Basekick 公式（借助SCSS 函數(shù)和mixin），這將給我們以下結(jié)果。

這正是我們想要的。對(duì)於任何一組沒(méi)有邊距的文本塊元素，這兩個(gè)元素應(yīng)該彼此緊貼。這樣，在兩個(gè)元素之間設(shè)置的任何邊距都將是像素完美的，因?yàn)樗鼈儾粫?huì)與行框間距衝突。

優(yōu)化代碼

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

從這些方面考慮將幫助我們更容易地?cái)U(kuò)展我們的系統(tǒng)。讓我們依次查看每個(gè)組。

首先，系統(tǒng)級(jí)變量可以全局設(shè)置，因?yàn)檫@些變量在項(xiàng)目過(guò)程中不太可能更改。這將我們的主要mixin 中的變量數(shù)量減少到四個(gè)：

 $baseFontSize: 16;
$gridRowHeight: 4;

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

我們還知道，字體級(jí)變量特定於其給定的字體系列。這意味著創(chuàng)建更高階的mixin 來(lái)將它們?cè)O(shè)置為常量很容易：

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

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

現(xiàn)在，在規(guī)則的基礎(chǔ)上，我們可以輕鬆調(diào)用Lato mixin：

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

該輸出給我們的規(guī)則使用Lato 字體，字體大小為32px，行高為40px，以及所有相關(guān)的轉(zhuǎn)換和邊距。這使我們能夠編寫(xiě)簡(jiǎn)單的樣式規(guī)則並利用設(shè)計(jì)師在使用Sketch 和Figma 等工具時(shí)習(xí)慣的網(wǎng)格一致性。

結(jié)果，我們可以輕鬆創(chuàng)建像素完美的網(wǎng)頁(yè)設(shè)計(jì)。請(qǐng)查看下面的示例如何與我們的基本4px 網(wǎng)格很好地對(duì)齊。 （您可能需要放大才能看到網(wǎng)格。）

這樣做給了我們?cè)趧?chuàng)建網(wǎng)站佈局時(shí)一種獨(dú)特的能力：我們有史以來(lái)第一次可以真正創(chuàng)建像素完美的頁(yè)面。將此技術(shù)與一些基本的佈局組件結(jié)合起來(lái)，我們可以開(kāi)始像在設(shè)計(jì)工具中一樣創(chuàng)建頁(yè)面。

朝著標(biāo)準(zhǔn)化邁進(jìn)

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

網(wǎng)絡(luò)語(yǔ)言的驚人之處之一是我們都有參與的能力。如果這看起來(lái)是您希望作為CSS 一部分的功能，您可以參與並向該主題添加評(píng)論，讓您的聲音被聽(tīng)到。

以上是如何在CSS中馴服線的高度的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！