目前前端开发比较趋向于标准化,比如都要处理一下 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%以上的经济体的部署就搞定了,这么重大的国际问题,处理起来就这么简单。