我从很多朋友的口中都听到过“网站设计还是用英语比较好”。
当然,这点我不否认,但是既然母语是中文,那还是应该使用中文来做,毕竟看着习惯也喜欢。
那么如何优化中文文字的在网页中显示?

近期我在逛网站的时候,找到了几篇文章。分享并摘录一些里面的重点:
《网站中文字的视觉设计》
1.

字体的单位用em而不用px,尽管12px和0.8em大小差不多。
updete:感谢网友 Dreamcolor 推荐文章 95%的中国网站需要重写CSS ,该文很详细的解释了px和em的差别和原理。这点写之前是我想当然了,没有深入理解em单位。只看到很多用em的视觉效果不好看,现在明白了,是因为没有把em单位和px对上号。结论是应该用em而不是px,但需要把em的值设置好。

2.

在css文件body中的font-family里面保证”宋体”前面有Arial或者verdana,个人推荐这么写:font-family:Helvetica,Georgia,Arial,sans-serif,宋体。这样能保证你界面中的字母、数字、符号看上去美观一些,更重要的是更加易读。

3.

子条 说:12号宋体时,我们一般使用18-20像素的行距。14号宋体通常使用22-24像素的行距。
很赞同,这个行距大小随着单行字数的多少而上下浮动。我认为12px字如果单行字数少的话,17也是可以接受的。

4.

正文一行字数最好不超过50,首页的标题文字以8-20字为佳。
12和14px字相对来说最精致,13px在需要的时候可以做正文字,word里面默认的字的大小相当于网页的13px字。

5.

对于一段文字,尤其是正文部分,保证左右至少有15px的留白,便于用户换行时不受到干扰。
文字和背景对比要足够明显,保证最弱文字的可读性。

《95%的中国网站需要重写CSS》
em vs. px

em是何物?

em指字体高,任意浏览器的默认字体高都是16px。所以未经调整的浏览器都符合: 1em=16px。那么12px=0.75em, 10px=0.625em。为了简化font-size的换算,需要在css中的body选择器中声明Font-size=62.5%,这就使em值变为16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10,然后换上em作为单位就行了。

    em有如下特点:

  1. 1. em的值并不是固定的;
  2. 2. em会继承父级元素的字体大小。

    重写步骤:

  1. 1. body选择器中声明Font-size=62.5%;
  2. 2. 将你的原来的px数值除以10,然后换上em作为单位;

简单吧,如果只需要以上两步就能解决问题的话,可能就没人用px了。经过以上两步,你会发现你的网站字体大得出乎想象。因为em的值不固定,又会继承父级元素的大小,你可能会在content这个div里把字体大小设为1.2em, 也就是12px。然后你又把选择器p的字体大小也设为1.2em,但如果p属于content的子级的话,p的字体大小就不是12px,而是1.2em=1.2 * 12px=14.4px。这是因为content的字体大小被设为1.2em,这个em值继承其父级元素body的大小,也就是16px * 62.5% * 1.2=12px, 而p作为其子级,em则继承content的字体高,也就是12px。所以p的1.2em就不再是12px,而是14.4px。

重新计算那些被放大的字体的em数值。避免字体大小的重复声明,也就是避免以上提到的1.2 * 1.2= 1.44的现象。比如说你在#content中声明了字体大小为1.2em,那么在声明p的字体大小时就只能是1em,而不是1.2em, 因为此em非彼em,它因继承#content的字体高而变为了1em=12px。



无觅相关文章插件,快速提升流量