关于网站设计中字体设定——front-family标签

今日在别人博客看见了一款西文字体，”Comic Sans MS”，字母和数字显示的是手写体，而且这款文字在windows和MAC下都是系统内置有，所以在这两个平台上都可以显示出来。我的css关于字体原先定义是这样的：

font-family: “Lucida Grande”, Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif ;

其中Lucida Grande 是一套无衬线字体，它是用在苹果系统下的西文字体。苹果系统和微软视窗系统在文字渲染反面是截然不同的，这也就诞生了DPI和TrueType。传统衬线字体因在原先的平板显示器上的优良表现而大行其道，但是进入液晶时代，衬线字体因其字形笔画末端的装饰细节部分过于繁琐而显得发虚，尤其是在苹果系统上，于是苹果系统默认使用了华文黑体（简），微软也委托方正开发了雅黑，现在windows7雅黑版本也到了6.0。为什么不直接用黑体定义苹果系统下显示，因为要保证网页在其他语言的苹果系统中也能正常解析。后面的Verdana，Lucida，Arial等也都是无衬线字体，然后到了宋体，这个就是定义汉字的网页显示了。其实这个css就是说浏览器解析网页的时候，如果是英文字体，就按照css中定义的这个顺序，系统中有哪种字体就优先显示哪种。前面几种都是英文字体，中文字体则直接到了宋体，所有的windows中都有宋体，所以网页中的汉字就以宋体输出了。但是有一个问题，苹果系统下显示的却不是宋体，而是黑体。这个是因为一个前面几种字体虽然只包含西文字体信息，但是在苹果系统下可能包含显示系统默认汉字字体的信息，所以当苹果系统识别出Lucida Grande后，因为字体中不包含中文字体，所以中文字体就按照默认黑体显示了。而windows系统则是有什么显示什么。

正是因为如此，当我直接将Comic Sans MS添加到css中时，变成这样：

font-family: “Comic Sans MS”,”Lucida Grande”, Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif ;

在windows下一切正常，但是当我用苹果系统上的safari时，发现整个页面中文字体变成了楷体，非常怪异。但是苹果系统上的opera和火狐就不会，中文还是按照黑体输出。这可能就是Safari的单独问题了。这是这个怎么解决呢？css hack也不能用。想了半天，既然是苹果系统上的问题，那就再找一款西文字题，但是显示中文按照黑体输出的字体，于是发现了与Comic Sans MS相似的Chalkboard。于是加入css：

font-family: “Chalkboard”,”Comic Sans MS”,”Lucida Grande”, Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif ;

这下，Safari下显示终于正常了。但是当我用IE6浏览时，发现字体变大了，至少比默认大了两个PX。我查找原因，发现是添加的Comic Sans MS字体使怪，现在有两个解决办法，一是用hack单独定义IE6字体大小，使其与其他浏览器一致。二是单独定义ie6字体样式。显然后者容易。于是，css再变：

font-family: “Chalkboard”,”Comic Sans MS”,”Lucida Grande”, Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif !important;font-family:”Lucida Grande”, Verdana, Lucida, Arial, Helvetica,宋体,sans-serif;

用到了一个 !important hack。这下子，正常了，只是IE6下字母还是一般字体，不是Comic Sans MS了。说到IE6，很窝火，啥都得单独设置，hack，hack，还是hack。至今我的这个博客在IE6下还有几个很重大的显示错误，但是我没有修补的打算。