网站字体选择研究

雨无形 — Fri, 13 Feb 2009 05:32:40 +0000

昨天换了这个主题，跟我想要的感觉很像，就不自己重新做了，但是由于此主题是从wordpress移植过来的，在字体设置方面是按英文网站的样式来做的，做中文站点有很多不足之处，于是就自己修改了下CSS。

主要修改的地方有：

1、将所有11px 10px的字全部改成了12px，因为在中文显示里，12px是能清晰显示汉字的最小字体。

2、将正文的文字由12px改成了14px行距150%，让文章更容易阅读。

3、将标题改为20px黑体normal。改这个位置的时候发现问题了，原字体设置为：

我最先改成

测试发现，在FF和chrome下显示比较正常，英文用的Verdana字体，中文使用的黑体，但是在IE下则英文是Verdana中文是宋体，但是换个写法

则在所有浏览器中中英文都显示的黑体，虽然实现了效果，但是黑体的中英文混排不是很好看，而且这样写后面的Verdana,"BitStream vera Sans"相当于多余的了，于是乎上网搜索资料终于让我找到了一篇关于网页设计文字应用的强文，如下：

通读4篇文章，对网页设计的字体应用已经初步有了系统的了解，也明白了产生这个问题的具体原因。因为各浏览器的渲染机制不同对文字渲染又有着各式各样的问题，所以只能采取折中的办法来解决问题，同时通过几篇文章对字体应用了解的增加，最后将字体写成这样：

2月16日根据本站情况修改为：

.post h2 {
font-size:24px;
font-weight:normal;
font-family:‘Microsoft YaHei’,‘微软雅黑’,‘Microsoft JhengHei’,‘华文黑体’,STHeiti,Georgia,‘Times New Roman’,Times,serif;
}

通过HACK来在FF和chrome中正常显示，在IE6 7中中英文都用黑体显示。

总结：在日常网页设计中，如果只是需要用到系统默认字体，如XP下的宋体，VISTA下的微软雅黑，则只需要写成：

即可，系统会自动将中文以默认字体显示。

如果需要用到特殊字体，如前面的黑体，那么可以像最好那样通过HACK来解决，在IE下用黑体，FF和chrome下中文是黑体英文是其它所设置的英文字体。

最后贴上修改后在不同浏览器下的显示效果。

IE6

IE7

FIREFOX3

CHROME

您可能也喜欢：
帮太和服饰做的网站售前页面	CSS3 Columns属性研究	51凤凰游记	20 个漂亮的 Ajax + CSS 表格	flash中用attachMovie复制元件置于舞台的方法
无觅

雨无形的BLOG » 字体