[草稿] CSS Reset 中應該處理那些元素呢？

目前前端開發比較趨向於標準化，比如都要處理一下 body 的 padding 和 margin 好讓不同的瀏覽器都達到意向的顯示效果，又比如字型的處理，中文比較多是用雅黑，可是這個不是所有系統都支援的(MacOS 10% 的市場不要了嗎？那也是大概1億左右的使用者呀！Linux？也有2~3千萬的使用者喲)，不同的系統還要設定不同的字型，要讓每個系統都有比較好的表現，字型也是應該要注意的。

本篇文章就來整理一下 CSS 的 Reset 中都有哪些內容，好讓你的開發國際標準化。

1. padding 與 margin

觀察了幾大公司中 CSS 的 reset 內容一般都會處理到這些元素(我把都有涉及到的整理出來):

body,ul,ol,li,p,h1,h2,h3,h4,h5,h6,form,fieldset{margin:0;padding:0;}

其他的設定包括:

div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,blockquote,p{padding:0; margin:0;}

body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; }

body,ol,ul,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,form,fieldset,legend,input,textarea,select{margin:0;padding:0}

看上去涉及到的元素還蠻多的，有人會說為什麼不用 * {margin:0;padding:0;} 呢？這樣不是更加乾淨？這個增加瀏覽器的工作量，所以一般不這麼設定。當然，你懶的時候可以這麼搞下，或者測試的時候，不過實際產品，還是要盡善盡美的。

2. 字型(Font-Family)

字型不僅僅是因為不同系統的相容問題，不同國家可能也有不同的字型標準，除了標準的 Arial 作為英文公用字型外，其他國家，比如中國是雅黑，同一時期日本則推出了類似的字型明瞭體(Meiryo)，所以有跨國業務的網站要注意啦。

我這裡整理了一些一下，如下:

body, html {font-family: 'Microsoft YaHei UI', 'Microsoft YaHei', '黑體', '宋體', 'Hiragino Sans GB', 'Hiragino Sans GB W3', Meiryo, 'Helvetica Neue', Helvetica, 'Lucida Grande', Arial, 'WenQuanYi Micro Hei', sans-serif;}

看不懂？好吧，我來解釋一下:

'Microsoft YaHei UI', 'Microsoft YaHei', '黑體', '宋體'

這幾個是目前流行的中文字型。

Microsoft YaHei UI 是 2011 年推出的補充字型，而 Microsoft YaHei 是 2009 年推出的字型[via]，所以 UI 字型應該優先。

黑體是比較傳統的類似雅黑的字型，最早是在 Window XP 的時候出現的。有一種說法，其實傳統的黑體也是有襯字型(serif, 而不是 san-serif)，不過襯邊不明顯(就帶點小喇叭)，所以歐美人把黑體列為了無襯字型(sans-serif)[via]。那麼比黑體更早之前用什麼字型？就是宋體啦。

'Hiragino Sans GB', 'Hiragino Sans GB W3'

這幾種字型是 MacOS 中使用的亞洲字型(其實漢語字型基本上包含中日韓；日韓字元，也就幾千個而已; 真要學日韓語，也不見得難事，每天看100個字元，1個月就學會了，每天看10個字元，也只需要1年)

Meiryo

日文中的明瞭體，前面說過的，和雅黑同一時期推出的。

'Helvetica Neue', Helvetica, 'Lucida Grande', Arial

'Helvetica Neue', Helvetica 是歐美中類似的黑體，Lucida Grande 是 MacOS X 中的黑體, Arial 是經典的無襯體(換句話說是過時的，不過為了比較好的相容處理，還是要放上去)。

'WenQuanYi Micro Hei'

這個是 Linux 下的中文字型，文泉驛，用這個搞定 2% 的系統市場份額(當然，Linux 下其實都未必有文泉驛的，這個只是主流 Linux 系統上的中文漢字字型，比如 Ubuntu)。

sans-serif

sans-serif 是系統無襯字型，實際上是一個變數，換句話說，如果一個系統中沒有前面提到的字型，那麼就讀取系統中定義好的無襯體。可能有人會說，那麼為什麼不直接用 sans-serif 就好了？其實不直接用 sans-serif 是有原因的。在 Windows 預設下，sans-serif 是 Arial，那麼 Arial 不支援中文漢字呀，所以就用系統預設的 宋體 作為顯示方式，可是這個是 serif 字型呀，這樣介面上的文字就不搭調了。可能有會說，作業系統真夠笨的，為什麼不盡善盡美的設定好一些呢？好吧，這個解釋起來有點長，主要有這幾個原因:

1. 歷史性因素導致的，作業系統剛剛開始的推出時候就是用宋體，就繼續用唄，為什麼要修改呢？萬一出什麼問題(比如客戶抱怨，影響了市場佔有率之類的)，誰來負責呢？

2. 另外畢竟作業系統都是歐美人開發的，他們自然以歐美為中心，為什麼為亞洲人投入那麼多精力？況且他們不一定對亞洲文字有一定的瞭解。

3. 可能是最關鍵的，不像歐美文字就26個字母，亞洲文字都是數千來計算，完整的字元達到數十萬，工作量巨大，自然願意投入的資源和關注度相對也少一些；對他們來說，一想到國際化文書處理就頭大。

話說回來，基本上完成了亞歐的文字相容，全球90%以上的經濟體的部署就搞定了，這麼重大的國際問題，處理起來就這麼簡單。