首先要考慮的是文字的排版，實際上有這玩意，Word還需要嗎？不需要了。我們列下文字所涉及的操作：

CSS 文字屬性

可見，以上的這些CSS文字屬性，主要就是操作文字的顯示，當然對於網頁來說，大多數不常用。但如果想做個網頁編輯器，那就都可以派上用場了。

有了文字，我們還要設下字型，先看下系統字型：

考慮字型可能在某系統沒有，所以一般指定一個字體系列：font-family:字型，字型，多個字型以逗號分隔

當然了，中文大多使用雅黑，一般這樣就可以了

font-family:"Microsoft YaHei",Arial,Helvetica,sans-serif,"宋體";

當然實際使用上，這個字型設定很亂，最好的做法，就是開啟別人現成的網頁，然後把這個樣式Copy過來。

font-style可以設定字型風格，font-weight設定字型的粗細，定義由粗到細的字元。400 等同於 normal，而 700 等同於 bold。

@font-face

使用者自定義字型：

<style> 
@font-face
{
font-family: myFirstFont;
src: url('Sansation_Light.ttf'),
     url('Sansation_Light.eot'); /* IE9+ */
}

div
{
 

font-family:myFirstFont;
}
</style>

CSS3增加的文字效果：新的文字屬性

當然了，這個表很嚇人，實際上：

• text-shadow
• word-wrap

這兩個屬性多數瀏覽器才支援，而IE10才開始支援text-shadow，而word-wrap，break-word只此一設，在單詞超界時加上就Ok了。

那麼主要看下text-shadow，

語法

text-shadow: h-shadow v-shadow blur color;

註釋：text-shadow 屬性向文字新增一個或多個陰影。該屬性是逗號分隔的陰影列表，每個陰影有兩個或三個長度值和一個可選的顏色值進行規定。省略的長度是 0。

它和陰影樣式是一樣的。我們看下陰影樣式：

語法

box-shadow: h-shadow v-shadow blur spread color inset;

註釋：box-shadow 向框新增一個或多個陰影。該屬性是由逗號分隔的陰影列表，每個陰影由 2-4 個長度值、可選的顏色值以及可選的 inset 關鍵詞來規定。省略長度的值是 0。

恩，很遺憾，box-shadow的blur後不是color，還有一個spread

總結：因為IE升級太過於緩慢，IE9支援box-shadow但不支援text-shadow，而這些不能裝於XP系統下。

那麼，瀏覽器相容，不如說是IE或者說是XP相容。那麼，最好的相容，就是不要去相容IE，讓XP使用者，換Chrome這類的，一切問題都解決了，只要Chrome及Firefox支援就儘量使用。