admin 管理员组

文章数量: 1184232


2023年12月22日发(作者:vba提取指定的数据到指定的地方)

排版如何提高网页阅读舒适性的小技巧

最常见的网页布局错误之一是定义了不正确的行高。行高是定义一行文本的高度,所以我们必需根据文本字体大小来设定行高。

一般来说,在设置文本行高的时候,我常常在字体大小的基础上加上7个像素(对12-17像素的字体而言)

body{ font-size:14px; line-height:21px; /* 14px + 7px */ }

2、订正标题margin值

另外一个常见的错误是标题四周不正确的margin值。标题其实是与它下面的段落是相关联的,而不仅仅是两个段落的分 割符。这就是为什么标题的margin-top比margin-bottom要宽。

3、不要使用过多的字体

为了确保可读性和专业性,你的网页上不应当使用超过3种字体。使用过多的字体会干扰你的用户而且让你的网站看起 来很乱。相反,较少的字体让你的'网站显得洁净易读。你可以标题使用一种字体,正文使用一种字体,最终 logo或副标题使用另外的字体。

4、代码部分使用等宽字体

假如你是一位开发者(就像大部分读这篇博客的人)你可能想贴一些代码在你的博客里。假如是这样,请使用等宽字体。 那么,什么是等宽字体?它就是字母和字符占相同水平宽度的字体。

5、关注对比

即使你的网站有很好的排版了,另一个需要留意的是对比。假如你的页面背景是中灰色(#999999),那么不要使用深灰色(#333333)

第 1 页

的文本,否则你的内容很难看清,尤其是对一些年纪比较大的或视力差的人。

总之,除非你的网站是关于骇客、黑帽seo或哥特摇滚的,不然你应当使用浅色背景和深色字体来保证清楚的对比度增加你网站的可读性。

6、只给链接的文本加下划线

在我上网的12年中,扫瞄器用在链接的默认样式始终是蓝色文本加下划线。虽然这个蓝色常常被改成另外的颜色,但下划线始终被当做是链接的常规样式。这就是为什么除了链接你不要给其他的东西加上下划线的缘由。否则,这可能对你的用户造成很大的困惑。

7、创建样式库

让你的网站产生视觉震撼的一个简洁高效的方法是给特别的页面创建特别的样式。例如,创建一个.warning的CSS类来向 你的用户显示“警告”。

8、按级别来排列标题和文本

为了增加可读性,给标题、介绍段落和常规文本创建标签层级是很重要的,这样你的用户可以看清你的文章结构并能很 快的找到他们感爱好的部分。

9、大胆留白

我认为最重要的排版技巧之一是“大胆留白”。留白是指空白区或没有使用的空间,它会使你的设计整齐而专业。很多人 喜爱苹果网站的缘由是:它尽管简洁但很精致,而且有许多留白。

第 2 页

10、正确使用标点符号

假如你想提升你的排版水平不容忽视的一点是正确使用标点符号。例如,引号常常用双撇符号代替(译者注:我想要表达的意思应当是全角符号和半角符号的区分,就像中文的引号和英文的引号不同一样)。

留意区分双撇符号:

He said Hello.

同样的文本,使用引号:

He said “Hello”.

这样更好,不是吗?假如你是WordPress用户,你可能很愿意知道你最喜爱的博客平台自动将双撇号转换为智能的引号 。否则,你得使用HTML字符编码。如下所示:

He said s;"Hello”.

第 3 页


本文标签: 使用 文本 字体 网站 标题