iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

DAY 16
0

★ 地圖西北方峽谷森林 ↓↓↓

傳送卷軸,建議先向 鉄人2号「文本士」收集資料,此章為進階續文。

顯示峽谷森林位置圖

方向感為零摸索前進著。

峽谷森林 [行高怪]
等等!鬼鬼祟祟樣。
我已經聽說了。快跟上吧!

:我還沒? 你?(
等我啊!! 飛奔 )


★★★ 關卡條件 ↓↓↓

行高 (line-height)

屬性設置行框的高度。它通常用於設置文本每行之間的距離。行高在塊框元素上,它指定元素中線框 (line-box) 的最小高度。在未置換的行內元素,它指定用於計算線框的高度。

  • normal:瀏覽器使用相同的預設值,具體取決於元素,約為 1.2 倍。
  • number:使用無單位 <number> 值乘以元素字級尺寸。
  • Ascent + Descent + Leading = line Height (實際行高)

如下方示意圖,中文與歐文通常以上下行基準線之間的距離做為行距的實際定義。但在 CSS 中它打破了人們普遍的看法,行高由元素自身高度決定。(初始值)

line-height

首先我們先來理解各種字型預設值,以下字級尺寸皆設為 100px,而結果卻顯示不同高度。進一步了解 Catamaran 字型在 1000 單位 em-square 中,共使用 1100 (ascent) + 540 (descent) 個單位,當設置 font-size: 100px 時,透過相對單位實際轉換高度為 164px,也就是字型預設內容區域所需高度。

line-height

註 圖片來源:Vincent De Oliveira )

峽谷森林 [行高怪]
這是個很奇妙的屬性,卻是影響文本整體主要關鍵。
要能操控自如,可需要付出相當心力啊。

EM

  • 為一種容器。一個字體定義了它的 em-square。用於繪製每個字符。該方塊使用相對單位,通常設置為 1000 個單位。但它也可以是 10242048 等單位值。
  • 根據其單位,設置字體 (AscentDescentx-height 等) 相關部位。請注意,在某些情況下,設定值可能會超出 em-square 範圍。
  • 在瀏覽器中,透過相對單位可縮放特性,呈現相對應的字級尺寸。

line-box

  • 每個 HTML 元素中,文本內容實際上都是一堆行框。如果知道每個線框的高度,就會知道元素的總高度。
  • 如果行內元素 height 屬性為 auto 值,內容區域嚴格等於 line-height 行高。

leading

經計算出的虛擬區域 (透過增設行高改變初始高度) 和內容區域之間的高度差稱為 leading [註1]。經過平均分配後,其中一半被添加到內容區域的頂部,另一半被添加到底部。

峽谷森林 [行高怪]
因此,內容區域始終位於虛擬區域的中間。

leading

[註1]:在 Typography 中。lead 這個詞,發源自活版印刷。指在一排排鉛字之間塞填充物 (lead),可能是木製的或是金屬材質。設定行距的動作,因此叫做 leading。如沒塞任何鉛角或木條,行距就等於鉛字的高度。


ヽ(・×・´)ゞ
★ 來自遠方勇者傳說:

透過 Vincent De Oliveira 實際測試:Google Web Fonts 的各種字型,1059 種字型(約佔 95%)的預設行高皆大於 1,而所有字型行高值落在 0.6183.378 倍區間。

在大多數情況下,建議使用 無單位數字 為首選。這是設置 line-height 避免由於繼承而導致的意外結果的最佳方法。(保持相對比率)

這樣說來,要發揮最大效用。
還需要靠他呢!!

:黑人問號??

To Be Continued ...


[ 追加經驗值 ]
參考來源 Deep dive CSS: font metrics, line-height and vertical-align
[新手村] 什麼是 leading?
high-logic
關於 MDN 由 Mozilla Contributors 製作,以 CC-BY-SA 2.5 釋出。


上一篇
鉄人28号FX 鉄人15号「間距蟻」letter-spacing, word-spacing, line-height
下一篇
鉄人28号FX 鉄人17号「垂直虎」vertical-align
系列文
鉄人28号FX30

尚未有邦友留言

立即登入留言