深度剖析Baseline設計原理

時間 2019-11-29

標籤深度剖析 baseline 設計原理简体版

原文原文鏈接

前言：Baseline是不少前端人都用過的最基本的CSS屬性之一，乍一看來，彷佛很簡單，但真的深究起來，Baseline能夠算得上CSS最有深度的屬性之一了。不信，那就繼續往下看。css

<p>
    <span style="font-family:Catamaran;font-size:100px;">MO</span>
    //Catamaran就是Google字體庫中的原生
    <br>
    <span style="font-family:Catamaran-special;font-size:100px;">MO</span>
    //Catamaran是在原生的基礎上作了尺寸改動（只改動了佈局，沒改動字體設計風格，你就權當是一種新的字體)，文章會有說明。
</p>複製代碼

這一段代碼中兩個span惟一的不一樣就是font-family不一樣，來看一下他們表現的結果：github

此處，選中文本，你會發現設置了一樣大小的font-size爲何會出現高度不一樣這樣的差別呢？windows

接下來就要去了解vertical-align中的各個參數的值了：（top,text-top,middle,baseline,text-bottom,bottom等）文字太抽象，直接看（參數圖）：bash

這張圖的信息量比較大，咱們一個一個的理解：

首先，當務之急是要理解，爲何font-size都爲100的狀況下會出現高度不一樣的現象：（如圖中：第一個span的文字高度爲164,而第二個高度則爲100呢？）想要搞清楚這個問題，你必需要搞清楚字體是怎麼造出來的。由於字體的設計工做不是咱們今天的主要工做，咱們就直接用別人設計好的字體直接導入字體設計工具。（這裏導入的就是咱們如今用的Catamaran字體。你能夠在google的字體庫中找到這個字體https://github.com/qrpike/Web-Font-Load）less

(2)字體是如何製造出來的

接下來就看一下字體是如何製造出來的，這你要去了解一個工具Fontforge，如何你有興趣研究，能夠參考參考資料（1）快速入門。咱們在這款字體工具中打開M這個字體(O是同樣的)。工具

字體設計時，不出意外都是在上下1000units(font-size)這個單元格之間的範圍內設計。咱們把上面的MO重新放回Fontforge工具中測試一下就這道。佈局

相信看完這張圖，你必定了解了font-size的真正含義了. 可是到目前爲止，你可能還有一個疑問就是：那爲何用了Catamaran字體100px就是164像素高呢？到了這，有人可能就想研究一下fontforge了，因此這邊也貼出詳細的fontforge的使用說明參考：designwithfontforge.com/zh-CN/index…

@font-face {
       		 font-family: 'hhabnormal';
       		 src: url('./fontfamily/Catamaran.ttf') format('truetype');
   		 }複製代碼

咱們仍是接着解決100px邊164像素的問題。接下來咱們把原生的Catamaran也與fontforge工具中的字體對比一下（你能夠用如下代碼在網頁中嘗試本身設計的字體）

對比上下兩張圖你會發現164px比100px，其實就是多出了font-size上下兩個問號的地方。那麼這兩個問號有指代什麼呢？對比上面提到的參數圖，你會發現有這樣的一塊區域,HHead/Win Ascent.這樣的兩個參數一樣是在設計字體的時候就定義好了的。你想經過CSS來修改是不可能的。這裏咱們一樣用圖片進行對比，由於用圖片進行對比能讓你一目瞭然。咱們來看一下，到底對原生的Catamaran字體作了什麼，讓它與原生的Catamaran字體高度上產生如此大的差別。

可能單看參數，很難理解其真實的含義，因此咱們仍是結合實例進行分析。咱們把這些參數挨個的標註到字體中去。

對比着參數圖再看一下上面這張圖是否是很快就明白了爲何設置了相同的font-size,卻表現出不一樣的高度。高出的部分實際上是：

?（圖中上部）=Win/HHead Ascent - Type Ascent.

?（圖中下部）=Win/HHead Descent - Type Descent.

這裏有必要作一個解釋：Win Ascent使用在windows系統中的。HHead Ascent是用在Mac系統中的。基本上設計師在設計的時候二者的值都時同樣的。之因此有兩個，是由於有兩個主流系統，而且他們又不按照同一個標準走，爲了兼容才這樣。

因此，咱們如今算一下font-size:100px;一個高度表現爲164px,一個高度表現爲100px緣由：

164px=Win/HHead Ascent(11px) +Win/HHead Descent(54px);

100px=Win/HHead Ascent(77px) +Win/HHead Descent(23px);

2、Baseline的位置

（1）不一樣display值的Baseline的位置

解決了上述font-size的疑問以後，一個新的疑問又誕生了：是全部的display類型的元素都有Baseline嗎？像inline-block這樣的元素若是有好幾行文字，是按第一行文字的baseline,仍是按第二行文字的基線呢？好比以下圖：

像這樣的一個div盒模型中有兩行文字，那麼它的基線應該是按哪一條呢？爲何要搞清楚這個問題？由於display:inline;display:inline-block;的元素都是按baseline來對齊的。不知道你寫的元素的baseline在哪，也就等於你寫的下一個元素出如今哪一個位置，你根本不知道。來看一張圖你就明白了。

你會發現，但沒有一種對齊標準的時候，物品的擺放將顯得異常的混亂。因此這個時候，理解display:inline:display:inline-block;display:block;的基線在什麼位置就顯得格外的重要了。接下來分狀況考慮：

（一）display:inline的基線

經過上面對字體的學習能夠知道：inline的元素（如：span,label,i,等元素）的基線就是其中的元素的字體的基線。就是在第一節中的各類baseline.幾個不一樣的inline元素放在同一行的時候，就是把幾個的baseline對齊就能夠了，就像上面的不一樣字號的「MO」按基線對齊後的排列是同樣的。

（二）display:inline-block的基線

咱們用一個實例來看一下：

<div style="display:inline-block;width:100px;height:100px;word-wrap:break-word; background-color: hsl(2, 86%, 58%);color:#fff;">
    <span>
        MOMOMOMOMOMOMOOMOM
    </span>
</div>
<span style="color:#fff">MOMO</span>複製代碼

再來看一下運行的結果：

從圖中能夠看出div元素的baseline是以其包含的inline元素的最後一行做爲本身的baseline。下一個同一行中的元素將會把baseline與div的這條基線對齊。那麼全部的display:inline-block;都這樣嗎？像img這種的裏面沒有inline元素的怎麼辦呢？咱們再經過一個實例來看一下。

<img src="http://chuantu.biz/t6/62/1506246890x3752257483.png" alt="" style="background-color:hsl(2, 86%, 58%); height:100px;width:100px;">
<span style="color:#fff">MOMO</span>複製代碼

看一下運行結果：

能夠看出img的baseline是它的最底邊。其實看到這，咱們大概也能得出一些結論了，就是display:inline-block;的元素的baseline。當其中有inline元素是按inline的baseline,當沒inline元素是，按最低邊。這樣總結對嗎？告訴你：基本是對的。不信，咱們來看一下W3C對於inline-block的基線的定義：

The baseline of an 'inline-block' is the baseline of its last line box in the normal flow, unless it has either no in-flow line boxes or if its 'overflow' property has a computed value other than 'visible', in which case the baseline is the bottom margin edge.