CSS基本知識6-CSS字體

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

 

CSS 文本屬性

屬性	描述
color	設置文本顏色
direction	設置文本方向。
line-height	設置行高。
letter-spacing	設置字符間距。
text-align	對齊元素中的文本。
text-decoration	向文本添加修飾。
text-indent	縮進元素中文本的首行。
text-shadow	設置文本陰影。CSS2 包含該屬性，可是 CSS2.1 沒有保留該屬性。
text-transform	控制元素中的字母。
unicode-bidi	設置文本方向。
white-space	設置元素中空白的處理方式。
word-spacing	設置字間距。

 

可見，以上的這些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增長的文本效果：新的文本屬性

屬性	描述	CSS
hanging-punctuation	規定標點字符是否位於線框以外。	3
punctuation-trim	規定是否對標點字符進行修剪。	3
text-align-last	設置如何對齊最後一行或緊挨着強制換行符以前的行。	3
text-emphasis	向元素的文本應用重點標記以及重點標記的前景色。	3
text-justify	規定當 text-align 設置爲 "justify" 時所使用的對齊方法。	3
text-outline	規定文本的輪廓。	3
text-overflow	規定當文本溢出包含元素時發生的事情。	3
text-shadow	向文本添加陰影。	3
text-wrap	規定文本的換行規則。	3
word-break	規定非中日韓文本的換行規則。	3
word-wrap	容許對長的不可分割的單詞進行分割並換行到下一行。	3

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

• 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。

值	描述	測試
h-shadow	必需。水平陰影的位置。容許負值。	測試
v-shadow	必需。垂直陰影的位置。容許負值。	測試
blur	可選。模糊的距離。	測試
color	可選。陰影的顏色。參閱 CSS 顏色值。	測試

 

它和陰影樣式是同樣的。咱們看下陰影樣式：

語法

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

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

值	描述	測試
h-shadow	必需。水平陰影的位置。容許負值。	測試
v-shadow	必需。垂直陰影的位置。容許負值。	測試
blur	可選。模糊距離。	測試
spread	可選。陰影的尺寸。	測試
color	可選。陰影的顏色。請參閱 CSS 顏色值。	測試
inset	可選。將外部陰影 (outset) 改成內部陰影。	測試

 

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

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

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