在今天的設計中，排版常常被忽視，特別是被網頁設計師忽視。這真是件遺憾的事情因為CSS可以做很多事情來控制我們的排版。也就是說，我們被局限於某些“網絡安全”排版，但是我們不應該限制我們自己的創造性。本文整理了一些用於在網頁上排版的CSS技巧。
CSS提供了font屬性，它允許我們在我們的頁面中調整文字。這是一系列的關於語法和如何使用CSS調整文字的概述。
使用font-size可以修改你的文字的大小。
1 2 3
font-size: 1.2em; font-size: 12px; font-size: 10pt;
該屬性用來改變你的文字的粗細(比如bold, bolder)
1 2 3 4
font-weight: normal; font-weight: bold; font-weight: bolder; font-weight: lighter;
font-weight屬性還可以使用100,200,300,400,500,600,700,800,900等數字值，數字越大，文字越粗。400等效於normal，700等效於bold。
text-transform屬性允許你應用uppercase(大寫), lowercase(小寫), 以及capitalize(首字母大寫)等效果到你的文字。當然，該屬性不能用於中文。
1 2 3 4
text-transform: capitalize; text-transform: uppercase; text-transform: lowercase; text-transform: inherit;
text-transform屬性允許你使用一些文字修飾，比如下劃線(underline)、上劃線(overline)、刪除線(line-through)以及文字閃動(blink)。
1 2 3 4 5
text-decoration: normal; text-decoration: underline; text-decoration: overline; text-decoration: line-through; text-decoration: blink;
font-variant屬性允許你制作小型大寫字母效果，也就是將小寫字母變成大寫並減小字體型號
1 2 3
font-variant: normal; font-variant: small-caps; font-variant: inherit;
這兩個屬性都用來添加他們對應的元素中的空白。letter-spacing添加字母之間的空白，而word-spacing添加每個單詞之間的空白。請注意，Word-spacing對中文無效。
1 2 3
letter-spacing: normal; letter-spacing: 2px; letter-spacing: inherit;
上面的font屬性可以縮寫，這樣可以大大的提高你的CSS的效率。
1
font:font-style font-variant font-weight font-size[/line-height] font-family
請注意上面的縮寫的書寫順序。另外，如果這裡不設置line-height，元素的line-height將會被設置為默認的1，而不會從父級元素或body元素繼承。使用縮寫的時候，font-size和font-family是必須的，其它幾項可根據情況不寫。
對於更有吸引力的段落排版，可以采用Robert Bringhurst的方法，它約定：用你的文字大小乘以30就可以得到段落的寬度。
比如如果你的文字大小是12px，用30乘以它，也就是360px，這樣每行大約可以呈現65個英文字符。
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centurIEs, but also the leap into electronic typesetting, remaining essentially unchanged.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centurIEs, but also the leap into electronic typesetting, remaining essentially unchanged.
行高用來限定每行文字之間的空白大小。一個經驗之談就是讓行高比你的字體大6-7px。
比如，如果你的文字大小是12px，加上6px就是你的行高，也就是18px。
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centurIEs, but also the leap into electronic typesetting, remaining essentially unchanged.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centurIEs, but also the leap into electronic typesetting, remaining essentially unchanged.
下劃線應該只用於文字鏈接，而斜體是一個更清晰的可選方案.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centurIEs, but also the leap into electronic typesetting, remaining essentially unchanged.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printertook a galley of type and scrambled it to make a type specimen book. It has survived not onlyfive centurIEs, but also the leap intoelectronic typesetting, remaining essentially unchanged.
顧名思義，first-letter就是第一個字母，first-line是第一行文字，它們是少有的被所有主流浏覽器支持的CSS 2.1 偽元素，你可以為它們定義任意樣式。
1 2 3
#demo5{ width:400px;}
#demo5:first-letter{ font-size:32px;color:green}
#demo5:first-line{color:red;}
前端觀察 Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centurIEs, but also the leap into electronic typesetting, remaining essentially unchanged.
已經有一部分很棒的CSS3特性可以用到你的設計中了。當然這些中的一部分新屬性還不能用於IE，但是你或許了解這對IE來說是常事兒，所以你不妨試試。
@font-face允許你上次一個字體文件到你的網站服務器並將其引入到你的外部CSS文件中，然後就可以將它應用到你的網站的任何文字上。
這是處理文字的最大的功能，但是隨之而來的是它的負面效果。由於版權問題，只有少數的字體“被允許”使用。這些字體也就是CSS3安全就在這裡裡面提到的。當然，對於中文字體來說，除了版權問題，還有網速的問題，一般中文字體動辄幾MB的大小，字體文件下載到浏覽器就要幾分鐘，這對於用戶來說是不劃算的。
在這個例子中我在我的網站的根目錄下放了一個font文件夾，然後將需要用到的字體放入該文件夾。你首先需要聲明@font-face 屬性以導入你的字體文件，然後使用該字體名稱來控制其它元素的字體。
1 2 3 4 5 6 7
/* 聲明字體 */
@font-face {
src:(font/diavlo.otf)
}
/* 將改字體應用到一個元素 */
h1 {font-family: diavlo, Arial;
}
text-shadow屬性趕走了用Photoshop為某些元素制作下拉陰影的需求，並給你提供動態的陰影控制。當然，該屬性IE並不支持。
示例標題
1 2 3 4 5 6
p {
font-size: 2em;
font-weight: bold;
color: #777;
text-shadow: 1px 1px 1px #222;
}
示例標題2
1
p {text-shadow: 2px 2px 2px #222;}
示例標題3
1
p {text-shadow: 1px 1px 5px #FFF;}
PS：呃，其實前端觀察的文章標題和章節的二級標題都用了text-shadow，而且還是用了更漂亮的RGBa顏色。
本文中提到的這些技術都只是一個入門指南。試著采用並實現你喜歡的技術到你的設計中。排版可能是一個網站中最重要的部分，請不要無視它。
PS:本文在原文的基礎上，補充了少量內容，比如first-letter和first-line部分——神飛
Shane Jeffers是Three Styles的創辦者和作者。他對設計趨勢和教程有獨特的喜好。你可以通過這個聯系頁面和他聯系到他或者在twitter上關注他 @ThreeStyles