常見空格一覽

最近在寫CSS的時候遇到了一個問題，有一個高度屬性值不合法：

從肉眼看沒什麼不妥，根據以往經驗，這應該是有特殊的空格致使，把它endcode一下，果不其然：

查了一下，這是一個發寬空格，Unicode編碼爲U+200A。故藉此把常見的普通和特殊空格整理一翻。

（1）普通空格（U+0020）

這是最經常使用的空格，拉丁文的空格，ASCII編碼0x20。在英文輸入法（和中文輸入法半角狀態）下，由鍵盤空格鍵直接輸出。這個空格的寬度會受到所使用的字體的影響：

例如在上圖所示的這個字體，空格的寬度爲69（這個是相對於em來講的，這個字體的em大小爲256），咱們能夠把它改大一點，而後生成一個新的字體，使用這個新的字體，空格被渲染出來的寬度便會變大。

（2）不間斷空格（U+00A0， ）

在HTML裏面這應該算是第二經常使用的空格了，它的HTML實體爲「 」（No-Break SPace）。當HTML有多個連續的普通空格時，瀏覽器在渲染時只會渲染一個空格，而使用這個不間斷空格，能夠禁止瀏覽器合併空格。經常使用於富文本編輯器之中，當咱們在富文本編輯器連續敲下多個空格時，最後輸出的內容便會帶有不少不間斷空格。以下圖所示，實際表現爲一個普通空格加一個不間斷空格連續交替：

在Mac電腦上經過Alt + Space能夠打出一個不間斷空格。

（3）零寬空格（U+0200B，​）

相信很多人在這個零寬空格上摔過跤，特別是當從一些網頁拷了一些東西到代碼裏面去的時候，而後再作一些字符串處理出現了一些神奇的事情，以下圖所示：

爲何明明只有4個字符，長度倒是5呢？咱們把它encode一下就會發現，其實字符串裏面帶了一個零寬字符：

零寬空格的UTF-8編碼便爲0xE2808A。

零寬空格普遍使用於第三方的富文本編輯器裏面，經常使用於格式隔斷，例如當你在一個富文本編輯器裏面選中一段文字加粗後，若是啥也不幹，接着在這選中的文字後面鍵入的文字便會自動加粗，爲了把格式隔斷，能夠在加粗後的文字後面手動插入一個零寬空格，這樣用戶在接着日後輸時便不會自動延續格式了。

因爲網頁上有至關多的內容是經過富文本的編輯器產出的（例如WordPress和這篇博文），因此當咱們在一個網站上拷貝內容的時候很容易就拷到一個零寬空格。

HTML的<wbr>標籤的做用也至關於一個零寬空格，可用於隔斷英文單詞進行換行。如MDN舉的一個例子：

這個標籤和上面使用HTML實體的區別在於，這個標籤是沒法被拷到純文本里面的，而HTML實例或者使用JS字符串的方式是能夠的，由於它自己就是純文本的一部分（Unicode），標籤則不是。

ESLint有一條禁止不規則的空白 (no-irregular-whitespace)的規則，防止代碼裏面誤拷貝了一些諸如零寬空格類的空格，以避免形成一些誤導。

（4）全寬空格（U+3000，　）

普通的U+0020是半角空格，與此相對還有一個全角空格，也叫全寬空格，即一個em大小，在fontforge裏面能夠看到當前字體的em大小：

這個字體的em爲256，一個全寬的字符就是1em，全部的漢字和標點符號的寬度每每被設計成1em。因此全寬空格就和一個漢字同寬。

一個EM方塊（EM Square）以下圖紅框所示：

一個字體在設計的時候不必定是在EM方塊裏的，看設計師的想法，有可能會超出，如上面的「@」符號，超出的效果是會致使設置font-size的時候實際渲染的高度會比設置的值會更大，例如設置font-size爲100px，若是沒有超出，那麼當前文字高度便爲100px，反之會變大。實際看的是ascent和descent的設置：

在這個例子裏面渲染出來的高度應爲229 + 66 = 295，100 * (295 / 256) = 110px。

因此使用不一樣的字體設置相同的字號，但實際的大小卻不同，即是這個緣由。高度超出的比較常見，寬度超出的較少，特別是中文，通常不會超出寬度，因此一個全寬空格寬度便和一個普通漢字的寬度同樣大。

（5）半寬空格（U+2002， ）

全寬用em表示，半寬則用en表示，爲em的一半。半寬空格可用於一些對齊的目的，如三個漢字和四個漢字的兩邊對齊：

注意全寬和半寬字符理論上不會受到字體影響，若是字體有這兩個符號的話，那麼應當遵循規範，將這兩個字符的寬度分別置爲1em和0.5em，不然直接讓這兩個字符缺失便可，如：

在fontforge裏面打叉就表示符號缺失。

除了半寬，還有三分之一寬（U+2004）、四分之一寬（U+2005）和六分之一寬（U+2006）

（6）發寬空格（U+200A， ）

零寬空格的前一個便爲發寬空格（hair space），網上關於這個空格的介紹幾乎沒有，只是說它是一個最窄寬度的空格（像頭髮同樣窄，因此叫發寬）。這個也是開篇提到的空格類型，是從Mac的文件夾裏的文件信息窗口裏拷的：

爲何Mac要用這個空格呢？可能出於Mac的設計審美，普通空白寬度過大，而用發寬空白可能恰好。

除了以上提到的空格外，還有專門用於數學的空格、在德語裏用來隔開連詞的空格，等等，更多類型空格可見維基百科《空格》。