网页排版几个基本元素

最新推荐文章于 2021-11-29 13:27:34 发布

weixin_34198797

最新推荐文章于 2021-11-29 13:27:34 发布

阅读量584

点赞数

文章标签： python

原文链接：https://my.oschina.net/u/1446867/blog/200590

版权

2019独角兽企业重金招聘Python工程师标准>>>

有以下几个基本元素：

字体、字号

如今随着显示器越来越大，分辨率越来越高，经常会觉得看12px的文字有点吃力，做为设计师也会不自觉的开始大量使用14px的字体，而且越来越多的网站开始使用15、16px甚至18px以上的字号做正文文字。大字号的使用，对英文字体来讲，衬线体的高辨识度和流畅阅读的优势就体现出来了。中文宋体在显示14号以上字体时，单线条大字总是看上去有些单薄不那么协调，特别是这款点阵字在ClearType（http://baike.baidu.com/view/755822.htm）强制平滑显示状态下尤其显得模糊不清。微软雅黑就是微软在这个字体显示问题上的解决方案。

让我们分别对比下中英文的衬线体与非衬线体在不同字号时的显示效果。

英文以Times和Verdanad为例，中文以宋体和微软雅黑为例。

行长

我们随手拿起一本书或者一份报纸，数一数每行的文字，一般情况下都不会超过40个汉字。这是因为如果每行文字过长，读者会不停的转动脖子，感到疲惫的同时也会降低阅读效率；目光从行尾移至下一行首，也很容易串行，影响读者浏览文章的节奏。这点同样适用于网页上的文章阅读。由于显示器是横向的，我们更要注意划分阅读区域。

文本宽度控制在450-700px为宜，此范围内参照字号大小；
英文每行80-100个字母（空格算一个字母）为宜；
中文每行30-40个汉字为宜。

间距

通过设置间距，我们就可以控制文字的密度。如果每行间距太小，与文字过长一样，读者浏览文章时也容易串行；如果行距过宽，阅读时就会感觉文章不够连贯。

间距没有固定的值，通常是根据字体大小来定义的。在word里我们常看到双倍行距、单倍行距和1.5倍行距的选项。网页上行距的单位常用 em来表示，不管是中文网站还是英文网站，大家多喜欢用1.5em－1.8em的行距。以1.6em的行距为例，字号16px的字，行距就是 25.6px。

如（图）所示，1.5-1.8em的行距的确是非常适于阅读的文字密度。

关于段距，我们要考虑一下具体实际情况。比如文章篇幅较短，就不需要很宽的段距；二文章篇幅很长，特别是那些偏学术的比较枯燥的文章，就要多利用段距把握文章的节奏，给阅读者喘息和思考的机会，且使文章更有层次和可读性。

背景

白色是全频光，全放射光对人眼睛的最有刺激，所以很多印刷品读物的纸张都选用乳白色或者淡黄色的纸张。由于显示器本身就发光，所以同是纯白色背景的文字，在电脑上比在纸上阅读会使眼睛更容易疲乏，另有研究表明：在电脑上阅读只有在纸上阅读速度的78%，阅读效率大大减低。因此，为了提高页面浏览的舒适度和效率，越来越多的页面采用浅灰色和淡黄色做为页面背景。

另外，印刷品以文字为主的出版物往往会采用低光泽度的纸张，也是因为光泽度高的纸张反射度高，导致阅读质量下降，容易使人视觉疲劳

技巧

另外下面我还复制了一篇关于排版技巧的文章，希望能作为资料方便大家学习。

网页的排版问题常常被忽视。这挺遗憾的，如果你能改进你的网页排版，那么设计和可读性也就随之改进。在这篇文章中，介绍了10个非常有用的排版技巧，可以使你的网站看起来更好。

1. 设置正确的行高

最常见的网页排版错误之一绝对是错误的行高。行高用来定义文本行的高度，所以它必须要根据字体大小进行设置。

一般来说，当我设置文本行的高度时我总是再给字体大小增加7个像素的行间距（字体大小为12至15个像素）。

Css代码

BODY {
字体大小：14px;
行高：21px; / * 14px + 7px * /
}

2. 设置正确的标题间空白

另一个常见的错误是标题周围的空白。标题是与它下面的段落相关联的，它不是两个段落之间的分隔符。这就是为什么一个标题的上边缘空白应该比下边缘的空白宽。

3. 不要使用太多不同的字体

为了保证网页的可读性和专业性，你不应该使用超过3种不同的字体。使用太多的字体会给读者带来困扰，也会使你的页面看起来杂乱。

另一方面，使用更少的字体，使你的页面看起来整洁和易读。你可以让标题使用一种字体，正文使用一种字体，标语和副标题使用另一种字体。

4. 使用等宽字体来显示代码段

如果你是一个开发人员，你可能想把一些代码片段放在你的博客上。如果是这样，请使用等宽字体显示你的代码片段。那么，什么是等宽字体？这个字体的字母和每个字符占有相同数量的水平空间。

那么，在一个网站上应该用什么字体显示代码片段呢？Courier字体是目前最流行的，但是为什么不尝试使用目前最新的字体，如Consolas 或者 Monaco？如果你想选择更多的字体，你一定要看看这里。

5. 注意对比度

如果你的网站排版很好，那么另外一点要考虑的就是对比度。如果你的页面背景是灰色（#999999），那么不要使用深灰色的文本（#333333），否则你的内容可能难以辨认，尤其是老年人或者视力不好的人。

一般来说，如果你的网站是与黑客、黑帽SEO或哥特摇滚等有关，你应该使用浅色背景和深色的字体形成鲜明的对比，增强你的网站的可读性。

6. 保证有划线的文本可以链接

浏览器的默认链接格式是一个带下划线的蓝色字体文本。尽管蓝色常常会改变为其他颜色，下划线一直是公认的链接格式。这就是为什么有下划线的文本通常被认为是可以链接的，而不是其他的意思。否则，这将会给你的读者带来很大的困扰。

7. 创建一个样式库

让你的网站给读者带来视觉震撼的一个简单而有效的方法是为特定的用户创建特定的风格。例如，创建.warning CSS类向读者显示警告信息。

8. 标题和文本有层次感

为了提高网页的可读性，给标题、简介、段落和正文创建出层次感是非常重要的，这样你的文章非常形象的呈现给读者，他们会迅速找到感兴趣的部分。

9. 不要担忧页面有空白部分

我所知道的最好的排版建议之一是：“不要害怕页面有空白部分”。它可以使你的页面看上去整洁和专业。很多人都喜欢苹果的网站风格，原因是：网页虽然复杂精细，但页面简单并有大量的空白区域。

10. 使用正确的符号

如果你正在寻找方法改善你的排版，很重要的一点是使用正确的符号。例如，可以使用双引号（“”）来代替角秒符号（""）。或者你也可以试试HTML字符编码 &s;ldquo; &bdquo; 。