当前用户: 游客
请考虑注册为论坛会员

 
搜索讨论区:


 




简单5步:让你的读者阅读更轻松(谈谈博客正文修饰)
—阅读本主题的博客原贴

用户帖子

18:23
08-04-25


央街浪子

管理员

admin

帖子数 93

 
1

我在WordPress主题设计大赛一文中提到,大家使用的大多数是国外现成的主题模板。但是国外现成模板中,预设的字间距,行高,字体大小等并不适合中文。

(1)字间距:
由于英文单词和中文字的构成不同,使得英文主题模板的行高和字间距并不适合中文字。举个例子:英文Hello World和中文“你好”,英文的字间距其实是“字母间距”,为了使一个英文单词的字母间(h, e, l, l, o这5个字母)不过于松散,必须使用较小的字间距,而hello和word这两个单词之间其实是空格分隔的。在中文里“你”和“好”就是两个字,如果采用同样的间距就会非常紧密。

(2)行高:
英文中有些字符的比划是有下坠的,其底部称之底线,为比如g, y, j等等,而中文字符和其他大写字符的底部称为字符的基线,而且在中英文混排的时候,因为字体的选择不同,还会出现底线不对齐的现象,所以中英文的行高和字体选择会有所不同(示例图片来源:IMPark)

fontbase.jpg fontdiff.jpg

(3)字体大小:
英文模板中有时候会以小于10px的字体标识一些如分类,标签等非主题正文信息,但是在中文下,某些小字体在小于10px的时候就会出现点阵缺失的现象(据说微软细明体MingLiU可以到7.5px),中文字一般以12px比较适合阅读。(示例图片来源:偶爱偶家)

fontsmall.jpg

(4)背景颜色、(5)字体颜色:
在大量阅读的今天,采用高对比的黑字白底,长时间阅读会使眼镜非常累。采用淡色背景,并使用深灰代替黑色作为字体的前景色是最近比较流行的做法。

根据这5点,我们来看看IMPark(左图)和AWFlasher(右图)两个友站的差异,为了防止页面布局,周边修饰,颜色等对对比效果的影响,仅截取同样面积的文本段(200×110)作比较显示。全局效果,请点击上述链接访问本尊。

font_l.jpg font_r.jpg

上述的这些问题,只要小小的修改一下模板CSS中的<P>或<body>定义,就可以使你的博客阅读起来更加轻松。

body {
font: normal 12px verdana, arial, helvetica; /*第1步:12px字体*/
color: #333333; /*第2步:深灰色*/
background: #FFFFFF/*第3步:背景缺省一般是白色#FFFFFF,可以根据模板改成淡彩*/
}

p {
line-height: 1.8em; /*第4步:行高可以1em-2em间调整,1em是正常行高,根据需要可以拉高点*/
letter-spacing: 0.1em;/*第5步:字间距可以在0em-1em间调整,0是正常字间距*/
}

ps:对不住IMPark了,被我拿来做反面教材 :mrgreen: ,其实博客本来就是很个性化的东西,博主自己喜欢就好。不过有时候看见尤其是3栏以上的模板,800固宽,再加上字挤作一堆的时候,感觉还不如看RSS reader好些。


—阅读本主题的博客原贴



回复主题: 简单5步:让你的读者阅读更轻松(谈谈博客正文修饰)

游客名字 (必填):

游客邮件地址 (必填):

Guest URL (required)

数学计算 (必填)
9 + 4 之和是多少?       (必填)

主题回复:


 
 

关于 随便说说SBTalk 论坛

当前在线:

3 游客

最高在线人数: 40

讨论区:

讨论组: 3

讨论区: 7

主题数: 79

帖子数: 186

会员数:

有 58 位会员

有 37 位游客


央街浪子 已发表 93 篇帖子

发帖最多:

央街小小 - 11

Rey - 6

misser - 4

idpw.cn - 3

uhlan - 2

讨论区管理员:央街浪子 | 版主:央街浪子, 央街小小


© Simple:Press Forum - 版本 3.1.3 (Build 356)