CSS文字排版终极指南

在今天的设计中，排版常常被忽视，特别是被网页设计师忽视。这真是件遗憾的事情因为CSS可以做很多事情来控制我们的排版。也就是说，我们被局限于某些“网络安全”排版，但是我们不应该限制我们自己的创造性。本文整理了一些用于在网页上排版的CSS技巧。

Font属性

CSS提供了font属性，它允许我们在我们的页面中调整文字。这是一系列的关于语法和如何使用CSS调整文字的概述。

Font-size

使用font-size可以修改你的文字的大小。

font-size: 1.2em;
font-size: 12px;
font-size: 10pt;

预览

1. 文字大小为1.2em.

2. 文字大小为12px.

3. 文字大小为10pt.

PS:关于font-size，推荐一下码头写的《http://www.css88.com/archives/821》

Font-weight

该属性用来改变你的文字的粗细(比如bold, bolder)

font-weight: normal;
font-weight: bold;
font-weight: bolder;
font-weight: lighter;

预览

1. font-weight设置为normal

2. font-weight设置为bold

3. font-weight设置为bolder

4. font-weight设置为lighter

font-weight属性还可以使用100,200,300,400,500,600,700,800,900等数字值，数字越大，文字越粗。400等效于normal，700等效于bold。

Text-transform

text-transform属性允许你应用uppercase(大写), lowercase(小写), 以及capitalize(首字母大写)等效果到你的文字。当然，该属性不能用于中文。

text-transform: capitalize;
text-transform: uppercase;
text-transform: lowercase;
text-transform: inherit;

预览

1. Capitalizes the first letter in every word

2. Allows your html to be lower case the converts it all to uppercase characters

3. ALLOWS YOUR HTML TO BE UPPERCASE THEN CONVERTS IT TO LOWERCASE, THIS WAS TYPED IN ALLCAPS

4. inherits the text-transform property from its parent element

Text-decoration

text-transform属性允许你使用一些文字修饰，比如下划线(underline)、上划线(overline)、删除线(line-through)以及文字闪动(blink)。

text-decoration: normal;
text-decoration: underline;
text-decoration: overline;
text-decoration: line-through;
text-decoration: blink;

预览

1. text-decoration设置为normal

2. text-decoration设置为underline

3. text-decoration设置为overline

4. text-decoration设置为line-through

5. text-decoration设置为blink (只有Firefox 和Opera 支持)

Font-Variant

font-variant属性允许你制作小型大写字母效果，也就是将小写字母变成大写并减小字体型号

font-variant: normal;
font-variant: small-caps;
font-variant: inherit;

预览

1. Font Variant 设置为 normal

2. Font Variant 设置为 small-caps

3. Font variant 设置为 inherit

Letter-Spacing 和 word-spacing

这两个属性都用来添加他们对应的元素中的空白。letter-spacing添加字母之间的空白，而word-spacing添加每个单词之间的空白。请注意，word-spacing对中文无效。

letter-spacing: normal;
letter-spacing: 2px;
letter-spacing: inherit;

预览

1. Letter spacing 设置为 normal

2. Letter spacing 设置为 2px

3. Letter spacing设置为 inherit

font缩写

上面的font属性可以缩写，这样可以大大的提高你的css的效率。

font:font-style font-variant font-weight font-size[/line-height] font-family

请注意上面的缩写的书写顺序。另外，如果这里不设置line-height，元素的line-height将会被设置为默认的1，而不会从父级元素或body元素继承。使用缩写的时候，font-size和font-family是必须的，其它几项可根据情况不写。