就修改博客样式 说一说前端的文字段落样式设计

申请本博客的时候选用了一个名叫 WorldOfElegance 的模板。选择这个模板只有两个原因：简单、不难看。没错，我现在只能把要求降到这个程度。

这个模板年代久远，存在有很多问题。经过调教现在看起来舒服多了。（在IE6、IE7下页头有些许错位，不过我觉得现在还用IE6、IE7的人是不会在意这点错位的）调教工作除了修复错位、调整各元素大小间隙以外，还有一个比较重要但很多刚开始做前端的人都不重视的地方，那就是文字段落的样式。

文字段落的样式除了字体以外，也就剩下这几个样式了：

1. 文字大小
2. 文字颜色
3. 行高
4. 段前端后间距
5. 标题样式

1. 文字大小

其实文字大小背后还有一个问题要确定，那就是内容宽度。内容宽度很重要：宽了，浏览时目光横向移动跨度大，会比较吃力；窄了，一行放不下多少字，目光要不断的换行，阅读起来不连贯。通常来讲内容宽度上限不宽于 850px，下限别窄于本博客的正文宽度，也就是 530px 吧（因为模板图片素材限制，本博客的内容宽度没法增加，其实增加到 600px 以上比较合适）。

确定了段落宽度以后就可以确认文字大小了。一般来说每行 40 个中文字符左右比较合适的，跟段落宽度类似，文字密了，阅读吃力；文字疏了，阅读不连贯。在调整文字大小时要结合用的字体给人的疏密印象反复试验，基本上试两三次就能确定了。

本博客的内容宽度是 530px，我设置的正文文字大小是15px，每行大约35个字符。

2. 文字颜色

文字颜色只有一点要注意：永远不要用纯黑色。

但是选择多大的灰度是需要根据整体风格而定的。

3. 行高

最常见的行高是 1.75em，当然可以根据情况适当增减，本博客采用的行高是1.7em。

4. 段前端后间距

一般情况下别低于1em。

5. 标题样式

除了字体大小以外其他样式基本跟普通正文段落相同即可，因为 em 是个相对单位。

再说一点，关于留白

有边框的设计下，文字与边框相距多少合适？一般来说不能低于1em，宽度越宽留白就要越宽，至于有没有计算公式还不是很清楚。