Web标准设计中常用字体介绍及选用原则

浏览器中展示网页文字内容时，文字字体都会按照设计师在css中定义的字体族的顺序来进行显示。

什么是字体族？字体族就是你在css代码中看到“font-family”的代码内的一类字体名称，例如下面这行代码：

font-family:"Comic Sans MS","幼圆","黑体",sans-serif;

按照W3C标准，浏览器在解析一行代码时首先会在系统中查找Comic Sans MS字体，如果系统内存在这个字体那么浏览器就会使用Comic Sans MS字体，如果没有的话就接着查找幼圆字体，以此类推直到浏览器可以表达系统存在的字体为止。

注意了，“sans-serif”不是某个字体的名称，而是一种在前面叙述的字体都无效时而最终选用的字体，称为浏览器通用字体，它取决于你所用的浏览器默认的通用字体是什么，可能是“Arial”，也有可能是“Helvetica”。(sans-是法语前缀“没有”的意思，意思是“无衬线字体”，无衬线字体我们接下来会有介绍)。这种情况是设计师应当尽量避免的，设计者应该尽可能给出齐全的字体设定(font set),以最大限度覆盖所有系统是为上策。

那么，你可能会问了，万一系统中都没有浏览器想要表达的字体时，怎么办？

那么浏览器会显示该字体的缺字符，缺字符是字体中的特殊字符，通常显示为一个方块，所以有时候小编看到网页上都是方块时感到很囧。请注意，还有一种情况浏览器也会显示方块，那就是有某种字体A系统中存在，而恰好也被浏览器采纳了，但是字体A中有个字符B是该字体中不存在的，那么浏览器也会以缺字符取代字符B的位置，表示空缺(浏览器表示压力很大)。

字体的css命名规则叫做“font-family”，但不等同于印刷意义上的font-family，实质上应该称作font set，印刷上的font-family是指一系列相同字样的不同强度组合，例如Lucida Family、Arial Family等。

字母“M”中上下方突出的短横线就是所谓的衬线，同理，“y、F、K”的上下方都用短横线进行了突出显示，为了弥补短横线的僵硬感又对曲折部分进行了园角加强处理，所有这类末端进行了加强的字体均称为衬线字体。我们经常在印刷出版物中看到这种字体，因为它们显示得很小，但可读性依然非常好，所以在印刷行业中被普遍使用，以降低成本。

在这里总结了几套实用、简单的字体族以供大家参考：

Tahoma系的中性字体，推荐在13px以上的环境中实用，Tahoma字体是小编最常用的字体，它的清爽在Windows系统中的默认字体里无可替代。

font-family:"Tahoma","Helvetica","Arial","Sans-serif;

Verdana系的款扁字体，推荐在11px以下的环境中实用，也只有老外的网站会使用，中文字体都不适合在11px下使用。

font-family:"Trebuchet MS","Verdana","Helvetica","Arial",sans-serif;

衬线字体的不二之选。

font-family:"Geogia","Times New Roman","Times",Serif;

等宽字体系列，适合写代码时使用。

font-family:"Lucida Console","Monaco","Courier","mono","monospace";

这里的字体都加上了引号，实际情况下不加引号浏览器也可以解析，但不排除个别浏览器不支持识别字体中的空格而导致错误发生的可能性。

我们可以用“黑体”来表达使用黑体的含义，这是因为浏览器支持GB2312编码，但有的系统不支持，所以尽量还是写成“Simhei”，同时也可以避免相同字体，但不同版本之间浏览器渲染效果的区别。