CSS自學筆記（12）:CSS3文字特效

在CSS3中新增了多個文本屬性，一樣有了這些屬性咱們在進行問題特效處理時，就儘量少的用到其餘軟件去製做特效文字了。

在之前使用CSS進行web開發的時候，必須使用計算機上安裝好的字體，若是有些用戶的計算機上未安裝該字體，可能會達不到開發人員的預期效果。而經過CSS3，開發人員可使用他們喜歡的任意字體，只要將須要的字體文件放到web服務器上就OK了。

注：如今的主流瀏覽器不支持部分新增屬性。

最簡單的文本特效就是給文本添加陰影了。

能夠給文本添加水平偏移值、垂直偏移值和模糊半徑，也能夠定義陰影的顏色。

咱們能夠定義不一樣的陰影能夠達到不少效果，例如咱們能夠作出一個帶有立體感的文字：

* {
	color: #FFF;
	text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,0.1), 0 0 5px rgba(0,0,0,0.1),0 1px 3px rgba(0,0,0,0.3),0 3px 5px rgba(0,0,0,0.2),0 5px 10px rgba(0,0,0,0.25);
}

一樣，咱們也能夠作出一個帶有火焰效果的特效：

* {
	text-align: center;
	margin: 100px auto;
	font-size: 80px;
	color: #FFF;
	text-shadow: 0 0 20px #fefcc9, 10px -10px 30px #feec85, -20px -20px 40px #ffae34, 20px -40px 50px #ec760c, -20px -60px 60px #cd4606, 0 -80px 70px #973716, 10px -90px 80px #451b0e;
}

在CSS3中也添加定義自動換行的屬性(word-wrap屬性)，讓咱們本身來對文本進行換行。可是用word-wrap屬性換行時，可能對一個單詞進行拆分處理。

經過CSS3，web開發人員不再用擔憂字體的問題了，可使用咱們喜歡的任意字體，經過@font-face定義就能夠了。

@font-face{
	font-family: MyFont;
	src: url('Sansation_Light.ttf');
	}
}
*{
	font-family: MyFont;
}

注:有些中文字體文件較大，應儘可能避免使用。

CSS3 字體描述符

CSS3中 @font-face 規則中定義的全部字體描述符：

描述符	值	描述	備註
font-family	name	規定字體的名稱。	必需定義
src	URL	定義字體文件的 URL。	必需定義
font-stretch	normal condensed ultra-condensed extra-condensed semi-condensed expanded semi-expanded extra-expanded ultra-expanded	定義如何拉伸字體。默認是 "normal"。	可選
font-style	ormal italic oblique	定義字體的樣式。默認是 "normal"。	可選
font-weight	normal bold 100 200 300 400 500 600 700 800 900	定義字體的粗細。默認是 "normal"。	可選
unicode-range	unicode-range	定義字體支持的 UNICODE 字符範圍。默認是 "U+0-10FFFF"。	可選