前端开发之web字体

一般来说，我们做出的页面的样式受三方面影响，一是浏览器的默认样式，二是我们制作页面时所进行的网页的定义样式，三则是用户浏览器所做的自定义样式了。从理论上来说这三方面影响，后者总是大于前者，比如我们程序员所做的网页样式，可以覆盖掉浏览器的默认模式，诸如Css hack的手段层出不穷，而用户的浏览器自定义更能在我们做的页面定义的样式上改变其所见的网页，当然提供这种自定义功能的浏览器并不普及，诸如火狐和chrome中的网页广告拦截程序，勉强也能算是这种自定义。

正因为此，想要成为一个优秀的前端开发程序猿，就得尽量考虑这三方面所带来的影响，并将其负面影响降至最低，使得我们脑中所想的效果，尽量传达给用户。拿网页中的字体来说，各个浏览器中对字体的解析都有所差异，即便是统一浏览器，在不同的不同的屏幕中的表现也会有所差异，这个问题由来已久，因此我们需要寻求一个默认的字体样式，以实现一致的显示效果，保证程序猿们的设计的一致性和前端开发效率。

字体：arial
作为生于天朝的程序猿，我们所做的页面绝大多数都是中文页面，就目前而言网页上最常用和通用的中文显示字体，毫无疑问的是宋体，而宋体在实现英文、数字和英文符号时的表现，相比就不用多说了，说出来的都是血和泪啊。尽管如此，我们在页面开发时，还是会选择宋体，这是因为：
windows和mac系统中基本上都有预装宋体的字体，因此在微软系统横行的天朝（盗版货，大家懂的），宋体很自然的额成为使用最广泛的网页字体！
可能也是因为发展较早的缘故，细心的小朋友们会发现，各大论坛和访问率超高的那些网站，所用的默认字体大致来书哦都是宋体（也许资深视觉设计大婶们认为windows下的tahoma和mac下的helvetica效果会更好，例如淘宝的默认字体样式就是font: 12px/1 Tahoma, Helvetica, Arial, "\5b8b\4f53", sans-serif;），但是谷歌、雅虎、有土鳖、MSN（摸死你），却都不约而同的讲宋体设置为默认字体。
一般情况下设置font-family都会在最后设置通用字体族以保证其安全性，就好像Google的设置为font-family:arial,sans-serif；，但是在非中文版的Win7下，当编码是GBK时，IE8会因sans-serif来渲染宋体，导致字体出现变形，这就是为什么淘宝需要在sans-serif前加上宋体而Google无需这样做的原因。

而中文字体选择较少，这也就使得目前大部分主流浏览器都设置使用宋体来显示中文。百度的首页和其搜索结果页面都是使用宋体，这也说明使用宋体字族的安全性值得信赖。不过可能也有人知道，火狐中国版其中文显示字体确实默认为微软雅黑的，这就是浏览器资深修改了用户自定义样式，并覆盖了程序猿设计的样式。这也正从侧面反映了弹性设计网页的重要性。

而如果你使用英文字体作为第一默认字体，那么妥妥的会导致中英文以及符号混排时的对齐问题。虽然我们可以通过设置行高和hasLayout能解决绝大部分情况，但是都不会很完美，如果把字体改成“宋体”能彻底的解决问题。很明显，这个问题只出现在IE上。所以，如果你的网站很少使用英文、数字和英文符号，那么直接设置{font-family:\5b8b\4f53;}也是很合理的选择。

大小：12px

12px是宋体能显示的极限（再小的话，就会出现各种情况，影响视觉效果），虽然微软雅黑可以显示更小字体，但是就目前而言雅黑的显示应用的环境还差得远。由于宋体基本上是目前显示中文唯一的通用Web字体，所以12px成为最常用的字体大小。当然我们也可以依据产品的实际需要来修改这个默认值（具体问题具体分析，政治课上常听到的嘛）。在Chrome3.0之后的中文版中，字体大小最小值是12px，比如你设置最小字体为10px，最后也变成12px。

行高：1.5倍

1.5倍的行距其实很大程度上是一个经验所得出来的结论，当然不同的产品对这个值要求可能不同，但我们一般会将其设置为默认值。对于中文来说，常用的字体大小12px、14px、16px、18px等偶数大小，在IE6和IE7设置其行高也为偶数能解决一些特殊情况下的字体对其问题。

在IE6和IE7中，行高值必须大于字体的2px才能保证字体的完整显示或当其作为链接时能有效显示下划线。
设置line-height时，注意不要使用单位（包括%），因为子节点会继承经过运算后的line-height值，所以当使用单位后浏览器会把line-height计算成第一次定义的绝对值，而不会随着字体大小的变化而变化，而无单位的数值表示是所在容器的font-size的倍数，所以设置为无单位的数值是最佳选择。 《深入CSS行高》非常有利于理解line-height，值得一读。

性能和效率
大部分平台都有arial，减少浏览器的查找时间。
代码最少，书写方便。arial基本上是名字最短的字体了，可以节约CSS的大小。
所有的字母都小写，目前Google就是这样做的，好处是既可以编写更快也能提升Gzip的压缩效率。
中文最好用unicode。
比如使用宋体是{font-family:\5b8b\4f53;}，使用微软雅黑是{font-family:\5fae\8f6f\96c5\9ed1;}，这样很好的避免编码的问题，同时能得到几乎所有的主流浏览器的支持。

正确的使用字体种类的写法，避免频繁的使用引号，这样可以缩小CSS的大小。中文字体可以按上一条方式来编写。

未来
通过对中英文以及符号混排的测试，微软雅黑还是相当不错的，包括英文数字和英文字符以及在IE6和IE7的显示效果上，但唯一的遗憾是在XP下如果安装了微软雅黑字体的用户没有打开“使用屏幕字体的边缘平滑”选项的话，在Firefox、Safari和Opera、特别是IE6下会非常模糊难以辨认。而且针对这个问题目前并没有很好的解决方案，所以只有等到IE6使用比率非常小的时候才可能正式的使用它。这在XP横行的天朝，真心难啊，或许需要到2014年，XP死掉的时候会好一些。

虽然很早就有了@font-face，但是浏览器的支持、网速和商业问题，导致它很少被应用。最近关于字体的好消息是Firefox3.6将支持Web Open Font Forma。关于Web字体未来的相关信息可以看web字体的未来、《如何保证网页的字体在各平台都尽量显示为最高质量的黑体？》和《浏览器如何渲染文本》都启发良多