日期:2014-01-13  浏览次数:21096 次

网页制造aiyiweb文章简介:由于 Web 是 HTML 文档的集合体——有些是动态的,有些是静态的,有些是功用性的——它们的排版所遵照的惯例来自于我们的最佳参考对象:六个世纪的印刷传统。这种传统包括了排?5峭缡且桓鋈露医厝徊煌拿教澹杂谕镜呐虐胬此担颐切枰杂∷⑸杓凭弑敢?/font>

序文

由于 Web 是 HTML 文档的集合体——有些是动态的,有些是静态的,有些是功用性的——它们的排版所遵照的惯例来自于我们的最佳参考对象:六个世纪的印刷传统。这种传统包括了排印。但是网络是一个全新而且截然不同的媒体,对于网站的排版来说,我们需求对印刷设计具备一种截然不同的技能组合,而且其遭到的限制也更多。

Web 排版回顾

在网络上,设计者对页面外观的控制比在其它媒体上要少得多。这种情况在涉及到文件的大小,分辨率和对比度之类的画布属性的时候显得尤为明显。Web排版的质量还会遭到一些严厉的限制,这一点在关于排版的基础准绳的文章中曾经讨论过了。

其它值得一提的概念还有对比度, 可辨认性易读性——下面我们就来看看这些概念。

对比度

通过类型对比度,我们就可以很容易地将文章从空白和相邻文章中区别出来,类型对比度遭到许多要素的影响,比如亮度、颜色、大小和组合。之所以在这里提到对比度,是为了指出低对比度的文本应该设置成所允许的最大尺寸。

可辨认性和易读性

在设计情景中,通过可辨认性,我们可以轻而易举地对一个文本段落进行特定信息片断扫描,而通过易读性,则使得我们能够很容易地理解一篇文章。表1列出了提高这二者之中某一特性质的质量的设计方法。

表1:可辨认性和可读性特征
对象 文本行长度 中缝(文本列之间的

间距) & 行间距

字体类型选择 对齐
易读性 中等 增大 serif 右侧不齐 [左对齐]
可辨认性 普通 sans-serif 不固定,通常是两端对齐

在下一篇文章——CSS 规划模式中我们将讨论最佳列宽。

CSS 字体属性:改变你的文本外观

排版涉及到针对文本的操作,这种操作与组合以及单个字母和词语的外观有关。后面这一类任务是由 CSS 字体属性处理的,我们将在下面进行讨论。

字体大小和单位类型选择

由于字号的变化比起字体的变化来说,更能影响页面外观,而用户代理款式表通常都能很好地处理字体的变形,因此对于文本来说,最基本的属性就是 font-size。在一条规则中使用该属性的时候,它后面会跟着一个属性值,这个值用某种单位指定了字体的大小,也有时是用关键字来表示大小的(比如 smallmedium)。

这是怎样做到的

作为款式表中最重要的声明,font-size 声明的格式是像这样的:

body {…
	font-size: 14px;
	…}

由于承继的缘故,HTML 文档中所有的字号规格都是基于 body 部分的字号声明的,不管该声明是在浏览器的款式表里面还是你的款式表里面。

浏览器默认的 16 像素对你的注释字体大小来说是个不错的起点,但大多数访问者都可以轻松阅读更小的字体。因此,许多设计者选择了更小的规格——大约 11-14 像素。

如果我们用绝对值来指定字体大小,或者用关键字来为一个元素指定字体大小,而这个元素的父对象的字体大小不是关键字的话,字号设置就会通过承继来实现。