文字排布

字体排印学基础知识

字体格式

12bet,字体格式指的是字样表现出的粗细、宽度和姿态等特征

字体粗细

12bet,字体粗细指文字笔画的宽度

CSS中对应属性为font-wight。有些字体并没有粗细适中的字样，因而他们不能提供和CSS中等同的粗细划分。一般只依赖两种设置： normal和bold

• normal： 常规字体显示，和weight为400等价
• bold： 一般对应于700的weight值，少数字体为600
• 数字：范围100-900
• bolder：比继承的值更粗，如果继承值已经达到最高值900，则不变
• lighter：比继承值更细，如果继承值为100，那么计算所得的值还是100
• inherit：粗细与父元素一致

字体宽度

12bet,字体宽度指字符的宽度。紧缩字体会显得更为狭窄，而扩张字体则显得宽大

CSS中对应属性是font-stretch,不过这个属性浏览器支持很不好。目前只有ff9+和ie9+支持

字体姿态

12博体育,字体姿态就是字体的倾斜程度

CSS中对应属性为font-style:

• italic：一种在常规字体基础上做过特殊处理的变体，一般带有手写风格
• oblique：直接由浏览器作倾斜处理后的版本

字体对比度

12博体育,字体对比度指字形中粗的部分与细的部分之间的差异程度。不同字体的对比度相差很大

serif字体即衬线字体，sans-serif字体则为非衬线字体，衬线字体在笔画本来必要的形状之外，在笔画起始端、末端和关键节点处会有多出来的形状用于装饰。而非衬线字体则没有这些装饰，表现较为圆滑。通常做法中，圆滑、缺乏粗细对比的sans serif字体被用作标题用字，而Serif字体常用作正文字体。不过这种传统在当今的Web时代受到很大争议

字体色深

字体色深就是指文字的深浅程度。字体色深不完全依赖于字体本身，还有很多其他的影响因素（字距调整、字间距、行间距、字体色相等等）

对比

色相和对比度的选择

色相和对比度选择关系到设计的一致性，直接影响作品的可读性

传统的文字设计理论认为提高前景和背景的色相对比，会大大提高文本的可读性

低对比度的字体会造成视觉不便人士阅读困难

字号对比和字体颜色

使用不同大小的字体可以增加文字区块间的对比

字号对比和粗细

可以使用字号和粗细的变化来增加对比度

字体选择

限制

所有站点文字都依赖与用户本地安装的字体。但是我们几乎无法在Windows、OS X和Unix/Linux中找到共有的字体。

通用字体族

serif： 有明显的装饰钩，所以在字母笔画的结尾处大都能看到细小的衬钩

sans serif： 没有装饰钩

monospace：买个字母拥有相同的宽度，这类字体在现实代码时特别有用

cursive： 模仿手写风格，通常用于标题

fantasy： 装饰用字体，多数用于标题，但这个字族拥有太多的字体，无法统一，所以很少有人会在正式的站点设计中使用它们

CSS中的字体

使用font-family来去确定使用的字体族

需要明确一个x-height的概念，x-height定义为去除高出部分和低出部分后的高度，而通常就是小写的x字母的高度。拥有相同x-height的字体往往具有较好的相似性。而x-height也影响到了字体的显示。在CSS中，font-size对所有字体的作用都是相同的，因而如果使用了一中x-height比较大的字体，用户看起来这个字体就会显得比其他字体略小一些

字体大小的变化

字体大小

由于网页中大号字体的显示效果较差，设计师往往倾向于使用小号的字。而小号的字也意味着同样的空间可以容纳更多的内容。但这让很多读者无法适应

浏览器控制

很多浏览器都支持改变字体的大小

绝对单位和相对单位

CSS中，绝对单位指可以预先确定单位长度的度量单位。这里包括cm、in、pt等

而相对单位包括%、em、larger和smaller等。这是一种可变的尺寸。如果使用相对单位意味着会有一个默认的基值。

CSS中有一些描述字体大小的关键字，比如xx-small、medium、x-large等，他们是绝对单位，但是实际显示大小却不是那么精确

px像素

根据CSS定义，px实际上是一个相对单位。因为就算相同分辨率的设备屏幕大小也不相同。有的设备屏幕较小，但分辨率高，导致1px很小，几乎无法分辨。在IE中，px被当做绝对单位来处理的。

浏览器的默认字体大小是16px

合理设置字体大小

在使用百分比的方式能够避免很多舍入的误差，所以对body元素应用了百分比单位后，我们就可以为其余元素使用em值。同时需要注意的是，不要将文字大小设置在1em以下

文字排布

视觉行为

在设计网页时，需要遵循人们的阅读方式进行页面布局。排版的主流理论认为人类视觉会自然地偏向页面的左上角，也就是所谓的视觉中心区。之后实现可以流畅的向右移动，或是转向新的一行，这样和逐渐趋近于页面底端。在这个过程中，视线会将页面的地段作为最终的停靠点

引导视线

视线被吸引的现象被形象的比喻为“引力”。将重要的站点标志放在视觉中心区，而把文字等其他元素至于页面下部形成停靠点的设计规则非常合理，而视线从右方转向左侧时形成的这点通常也是较易被浏览者关注的地方

避免产生理解上的问题

标题文字

标题文字用来指明段落的主要内容，关于处理标题，有如下建议：

• 标题中使用的颜色必须是整个设计中较为强势的颜色
• 标题的色彩必须鲜明。在标题中亮色所带来的影响不如暗色。越是接近黑色的标题，越是能对浏览者产生强的冲击力
• 越是重要的标题，越是需要带有强烈冲击力的色彩
• 略为紧缩的字体更能凸现标题。设计师建议使用正常字体70%-90%宽的标题文字
• 字体对比可以帮助增强标题效果
• 标题长度应该有所限制
• 避免在标题中使用句号

正文字体

正文字体是页面文字的主体部分，关于正文布局，有如下建议：

• 保持一行在60个字符以内
• 避免每行字数过少
• 较短的段落在快捷的网络时代更适合迅速传达重要信息
• 如果确实需要发布长篇文字，应当尽力让段落保持小巧。并且将长段落分割为节并加以标题，这样才能更好地引导读者
• 不要让段落之间的距离过大
• 避免在正文中使用鲜艳的色彩。唯一的色彩变化应该就在正文的链接上

重要文字

重要文字指的是侧栏、引用和说明部分的文字，有如下建议：

• 重要文字的目的是引起读者的注意，可以应用鲜艳的色彩
• 重要文字应当使用短行，且只能有很少的行数
• 重要文字不应当阻断正文，而应当增强正文的效果
• 文字能为插图提供上下文，起到帮助读者阅读的作用

文本样式

有是有需要对单个字符进行调整，CSS有很多属性能够达到类似的效果

font-varient

这个属性唯一的作用就是将文字用略小的大写字母表示

text-transform

这个属性提供了更精确的字符大小写控制，有如下值：

• capitalize：每个单词首字母大写
• uppercase：所有字母大写
• lowercase：所有字母小写
• none：正常

  text-decoration

  文本装饰，常用的有如下值：
• none： 没有装饰，在没有理由使用其他选项时，none是最好的选择
• underline： 下划线，仅仅在链接中使用下划线
• overline：上划线，仅仅在数学中表示平均值时候用到，其他时候很少会用
• line-through： 贯穿线，仅用于表示已经不再相关、非事实或无效的文字，这些文字可能很快会背其他文字替代，理想的用法是用于那些需要被改写的部分
• blink： 闪烁，已被废弃

间距样式

CSS提供了很多控制间距的属性

line-height

用于控制行间距，该属性可被设置为绝对数值、相对大小、长度或百分比，还有inherit

line-height不需要单位，1.2和1.2em和120%是同义的

letter-spacing

可以控制字符间距，可将其设为normal或一个长度值。不应当为大段的文字设置字符间距。最好只在标题和小段文字中使用letter-spacing

word-spacing

用于调整单词的间距，text-align和white-space都会影响到浏览器对word-spacing的处理

text-align

用于对齐文字，可选值为left、right、center、justify。建议使用传统的right-align和left-align方式对齐正文。居中对齐仅仅用于标题、引用等小块文字，不要将其用于大段文字中