存档

‘用户体验’ 分类的存档

网站字体选择研究

2009年2月13日 雨无形 没有评论

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

主要修改的地方有：

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

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

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

  1. .post h2 {   
  2.     font-family:Verdana,"BitStream vera Sans";   
  3. }  

我最先改成

  1. .post h2 {   
  2.     font-family:Verdana,"BitStream vera Sans","黑体";   
  3. }  

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

  1. .post h2 {   
  2.     font-family:"黑体",Verdana,"BitStream vera Sans";   
  3. }  

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

[教程] 谈谈网页设计中的字体应用 (1) Font Set

[教程] 谈谈网页设计中的字体应用 (2) serif 和 sans-serif

[教程] 谈谈网页设计中的字体应用 (3) 实战应用篇·上

[教程] 谈谈网页设计中的字体应用 (4) 实战应用篇·下

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

  1. .post h2 {   
  2.     font-family:Tahoma,Helvetica,"黑体",Sans-serif;   
  3.     *font-family:"黑体";   
  4. }  

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

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

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

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

  1. body {   
  2.     font-family:Tahoma,Helvetica,Sans-serif;     
  3. }  

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

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

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

  

IE6

 

IE7

 

FIREFOX3

 

CHROME

分类: 用户体验, 网页设计 标签:

《网页设计技巧》系列之一 浅谈文本排版

2008年3月2日 雨无形 没有评论

本文转载自毅博客

我们在做网页的时候自己画的图也不错，自己做的布局也很精致，做的图标也很漂亮，第一眼看起来也觉得很漂亮，但是看看就觉得不舒服。也不清楚为什么，这里我告诉你，也许就是你的排版出现问题了。由于排版的不合理，所产生的视觉效果会对读者的眼睛产生一定的疲劳影响，基本的毛病在于“字间距太挤或太宽”、“行距太小或太大”、“段距太少或太多”、“每行字数太多或太少”等这几个常见因素。下面的内容可以从图示中看出效果来，同时我会给大家一个相对比较好的参数供大家参考。当然设计本来就不要太过拘泥，我所提供的都是一般性的提议，不同网站不同对待，不要过于拘泥我所给大家的一些参数。

 

大家看到上图，前三个是行距的问题：

第一个太挤了，都粘在一起了，这样眼睛在看这个文本的时候会需要花点时间去分辨，这样的排版会让读者看得很累。很不舒服。大家看一下自己手头上所做文本的是不是太挤了，如果是那就改一下吧！第二个是比较适中的，由于每行分得很清楚，这样看起来有很强的识别性。第三个是比较宽的，松了一点，这样看起来也很清楚，但是当你的文章不是一两行而是十几行与几十行的时候你就会觉得文章的连贯性产生了很严重的脱节，一般排版不会越过两个字体高度（2em）

下面两个就是字数的问题了，第四个每行文字太长，这样看起来头要摇来摇去，这样读者更容易显得很累。因为要不断的转动头，或是让眼球不断的左右摆动。最舒服的方式就是读者一眼看上去就能把一行看完，不然从行末到下一行行首也会形成断裂感。而下面的又太扁了，这样看起来也不是很舒服。由于在不断的换行阅读，眼球也会觉得不舒服。而推荐的最好的字数是： 不大于45个字母，不大于30个汉字。

上面的图是关于段距的，第一个是比较合适的，这样的把段落分开了，让读者觉得文章并不是很多很难读，而如果不把段落当一回事，任其自然那么就会如下面一样，两段成为一段，这里是两段还好，如果是几十段，那么这个文章就很少有人能读下去了！

在经典论坛中的行距已经重新设定过了，现在发布长篇的文章就不会觉得糊在一起了，并且在链接上加了下划钱，对于色盲或色弱的朋友也容易识别，更为人性化了！

分类: 用户体验, 网页设计 标签: