如果說前面幾天的內容都是基礎，那麼從這開始可以到進階了，今天就說下CSS3新增的炫酷樣式變形動畫2D/3D一個都不能少，當然它的瀏覽器支持情況只有主
流瀏覽器，一些低版本的瀏覽器可以回家看神偷奶爸3了畢竟寫了也出不來
一、開始寫CSS3了，那麼爲了避免瀏覽器兼容問題，先來看看瀏覽器的世界大戰
爲什麼瀏覽器們不能一起好好玩，爲什麼要有千奇百怪的兼容性問題？
(1)由於各大主流瀏覽器由不同的廠家開發，所用的核心架構和代碼也很難重和，這就爲各種莫名其妙的Bug(代碼錯誤）提供了溫牀。
(2)再加上各大廠商出於自身利益考慮而設置的種種技術壁壘，都讓CSS應用起來比想象得要麻煩。瀏覽器的兼容問題是我們必須去克服的
目前主流瀏覽器Internet Explorer、 Safari、Mozilla Firefox、 Google Chrome、Opera、百度、360、搜狗、傲遊
最早的瀏覽器 : Mosaic / Netscape Navigator(網景領航者)（1994-2008）簡稱NN
瞭解下瀏覽器大戰
第一次瀏覽器大戰發生在上個世紀90年代，微軟發佈了它的IE瀏覽器，和網景公司的Netscape Navigator大打出手。微軟當時1000多人，網景也就10幾個人，第一次瀏覽器大戰以微軟完勝告終。但是網景不氣餒，將源碼開源，重組Mozilla，加上其他瀏覽器的加入，第二次瀏覽器大戰發生在20世紀，開始了混戰
看到瀏覽器的混戰不由得讓我想起網上一幅圖，完了笑點越來越低了
瀏覽器市場份額（2016.12-2017.2）
瀏覽器內核代表作品
Trident:IE、Maxthon(遨遊)、騰訊、Theworld世界之窗、360瀏覽器
代表作品IE,因爲IE捆綁在Windows中，所以佔有極高的市場份額，又稱IE內核或是MSHTML，此內核只能應用於windows平臺，且是不開源的。
Gecko：代表作品Mozilla Firefox 是開源的,它的最大優勢是跨平臺，能在Microsoft Windows、Linux和MacOS X等主要操作系統上運行。
Webkit :代表作品Safari、Chrome ，是一個開源項目。
Presto :代表作品Opera ，Presto是由Opera Software開發的瀏覽器排版引擎。它也是世界上公認的渲染速度最快的引擎。
以後我們要在編寫的樣式前要加好前綴，例如：
div
{
-ms-transform: translate(50px,100px);/* IE 9 */
-webkit-transform: translate(50px,100px);/* Safari and Chrome */
-o-transform: translate(50px,100px);/* Opera */
-moz-transform: translate(50px,100px);/* Firefox */
transform: translate(50px,100px);
}
注意書寫順序也是有一定講究的
漸進增強 progressive enhancement：針對低版本瀏覽器進行構建頁面，保證最基本的功能，然後再針對高級瀏覽器進行效果、交互等改進和追加功能達到更好的用戶體驗。
優雅降級 graceful degradation：一開始就構建完整的功能，然後再針對低版本瀏覽器進行兼容。
區別：優雅降級是從複雜的現狀開始，並試圖減少用戶體驗的供給，而漸進增強則是從一個非常基礎的，能夠起作用的版本開始，並不斷擴充，以適應未來環境的需要。降級（功能衰減）意味着往回看；而漸進增強則意味着朝前看，同時保證其根基處於安全地帶。
二、CSS3 新特性 之 border 邊框
1. 圓角 border-radius：當寫一個值的時候表示四個角都有圓角邊框，如果希望對每個角單獨設置可以使用border-radius:10px 20px 30px 40px;四個角的順序爲左上角，右上角，右下角，左下角。兩個值的話第一個值是左上右下，第二個值是右上左下。三個值的話第一個是左上角，第二個值是右上角、左下角，第三個值是右下角。有點像繞口令的趕腳，平平仄仄平平仄仄咳就瞭解下反正也很少這樣寫
如果不想使用簡寫的方式，也可以單獨設置：
border-top-left-radius: //左上角
border-top-right-radius: //右上角
border-bottom-right-radius: //右下角
border-bottom-left-radius: //左下角
寫法很充分，怎麼寫你開心就好
小技巧：一般使用圓角無非兩種情況，一個是四個角設置圓角border-radius:2px，二個是寫一個圓，如果需要一個圓的話，可以直接寫border-radius:50%
擴展瞭解：設置透明邊框border:5px dashed transparent;
2. 邊框圖片border-image：url（圖片路徑）A B C D /border-width topbottom leftright 當然這個是一個簡寫版本，全的話就是以下：
圖片地址border-image-source：這個相當於圖片的路徑，這個比較好理解了，不贅述了
圖片切片border-image-slice：這個有點小複雜，首先注意了這塊填寫的數字不可以加px這類的單位，直接填寫數字或者百分比就可以，這個地方有四個值可以填寫，順序的話和margin一樣是上右下左，但是想要了解具體切片怎麼分割的可以看下下圖
注意:具體顯示的時候，四個角上的border-top-left-image、border-top-right-image、border-bottom-left-image、border-bottom-right-image 這四部分是沒有任何顯示效果的，不會平鋪，不會重複，也不會拉伸，類似於視覺中的盲點。
圖片寬度border-image-width 用來指定元素邊框的寬度，也可以簡寫在border-image中，這個地方定義寬度的寫法和margin一樣，順序也都是上右下左
圖片重複border-image-repeat 用來指定元素四條邊中的圖像是以什麼方式顯示出來，比如是平鋪的呀還是拉伸呢，圖中只有用紅色框圈起來的是可以設置平鋪或拉伸效果的。
例如：border-image-repeat:repeat(平鋪) stretch(拉伸) 如果兩個都寫上，則表示，第一個值是上下兩條邊中圖像顯示方法，第二個值是左右兩邊中的顯示方法。
三、CSS3新特性之 陰影，如果你面前陰影別怕，是因爲背後有光
1. 盒子陰影 box-shadow：陰影的x軸(可以負值)，陰影的y軸(可以負值)，模糊距離，陰影的大小，陰影的顏色，內陰影 inset or外陰影不寫就是外陰影咯
如果box-shoadow:0 0 10px 5px red; 當x和y的值爲0的時候表示陰影會在當前位置，x軸和y軸的值調整，正數的話是向右向下，負值的話向左向上
擴展瞭解：怎麼單獨設置陰影？
<div style="box-shadow:-10px 0px 10px red, /*左邊陰影*/
0px -10px 10px #000, /*上邊陰影*/
10px 0px 10px green, /*右邊陰影*/
0px 10px 10px blue;" /*下邊陰影*/ >
</div>
2. 文字陰影 text-shadow：水平陰影的位置，垂直陰影的位置，模糊的距離，陰影的顏色（x和y的值調整正數的話陰影方向是向右向下，負值的話向左向上）
當然你可以寫多個，通過逗號進行分隔
四、CSS3新特性之 背景
1. background-image
設置背景圖片的這個方式我們之前一直在使用，肯定都沒問題，這塊補充一個用法，就是你可以給元素設置多個background-image，多個的話都會顯示出來
background:url（a.jpg）, url（b.jpg）當然咯背景的話默認是平鋪的，你爲了都能看到這些背景，先加一個no-repeat
2. background-size：控制背景圖像的尺寸，可以指定數字或者百分比當然還有它給我們提供的一些選項，比如cover或者contain
例如：background-size：20px 30px; 第一值表示背景圖片的寬度，第二個值表示高度
cover：表示將背景圖片放大到適合容器的大小，但這種方法會讓背景圖片失真
contain：和cover剛好相反，它主要是將背景圖片縮小，以適合鋪滿整個容器
默認的值是auto，表示保持背景圖片的原始高度和寬度
3. background-origin：該屬性指定了背景從哪個區域(邊框、補白或內容)開始繪製,但也僅僅能控制背景開始繪製的位置。
通過上圖我們可以發現，背景顏色和背景圖片的起點和終點不同，but 我們可以自由設置
注意：如果背景圖像background-attachment是"固定"，這個屬性沒有任何效果。
background-orgin屬性可以選擇的值有以下三個：
padding-box 背景圖像填充框的相對位置
border-box 背景圖像邊界框的相對位
content-box 背景圖像的相對位置的內容框
4. background-clip：用來修改背景的顯示範圍
上圖我們都很熟悉了，盒子模型，那麼我們設置一個元素的背景，其實設置的是content部分，那麼CSS3提供的background-clip可以修改顯示的範圍，它提供的幾個屬性值如下：
border-box 表示背景範圍包括邊框區域（默認）
padding-box表示背景被裁剪到內邊距框不包括邊框
content-box背景被裁剪到內容框，不包括內邊距區域和邊框區域
3個屬性值對應的效果圖如下：
注意：background-origin 和 background-clip 看着很像，效果也一樣，區別在哪呢？background-origin用於標記背景從哪個點開始繪製，這個在你的代碼裏有position的時候就會發現，定位的時候是按照你設置的origin的點來開始計算的
5. 背景漸變Gradients
線性漸變（Linear Gradients）- 向下/向上/向左/向右/對角方向
名詞解釋下什麼是線性漸變：在線性漸變過程中，顏色沿着一條直線過渡，從左側到右側，從右側到左側，從頂部到底部，從底部到頂部或者沿任何任意軸。
語法：background:linear-gradient(漸變方向,color1,color2,color3…) 別忘了加上前綴 -webkit- 什麼什麼的
漸變方向：bottom bottom right, right, top right, top, top left, left, bottom left,30deg（30度）
如果你想要在漸變的方向上做更多的控制，你可以定義一個角度。
角度是指水平線和漸變線之間的角度，逆時針方向計算。換句話說，0deg 將創建一個從下到上的漸變，90deg 將創建一個從左到右的漸變。
例如：background:linear-gradient(270deg,red,blue,black);
注意：CSS3也支持透明度（transparency）,可用於創建減弱變淡的效果
repeating-linear-gradient() 用於重複線性漸變
{background: repeating-linear-gradient(red, yellow 10%, green 20%) ; }
注意：用到重複性時前提是漸變的區域不能是100%，不然無法顯示平鋪的效果
徑向漸變（Radial Gradients）-徑向漸變就是從一個點開始向外擴展爲一個圓形或者橢圓，因此，徑向漸變首先需要確定一箇中心點，然後是大小和形狀。徑向漸變的顏色節點同線性漸變一樣，是一個顏色列表。
語法：-webkit-radial-gradient（設置漸變的中心，漸變形狀漸變大小，起始顏色值，中間顏色值中間顏色位置，終點顏色）
創建一個徑向漸變，你也必須至少定義兩種顏色結點。顏色結點即你想要呈現平穩過渡的顏色。
同時，你也可以指定漸變的中心、形狀（原型或橢圓形）、大小。默認情況下，漸變的中心是 center（表示在中心點），漸變的形狀是 ellipse（表示橢圓形）
漸變的大小是 farthest-corner（表示到最遠的角落）
漸變方向：
center center ：中心點擴散（默認）
left top:從左上角擴散
center top 從頂部中間擴散
right top 從右下角向外擴散
right center 從右端中央向外擴散
right bottom 從右下角向外擴散
center bottom 從底部中央向外擴散
left bottom 從元素左上角向外擴散
漸變形狀：
Circle圓形漸變
Ellipse 橢圓漸變
size 參數定義了漸變的大小。它可以是以下四個值：
closest-side：指定徑向漸變的半徑長度爲從圓心到離圓心最近的邊
closest-corner：指定徑向漸變的半徑長度爲從圓心到離圓心最近的角
farthest-side：指定徑向漸變的半徑長度爲從圓心到離圓心最遠的邊
farthest-corner：指定徑向漸變的半徑長度爲從圓心到離圓心最遠的角
那如果有了背景漸變還可以加背景圖片麼，答案是可以的 background:url(logo.png), radial-gradient( circle, #ace, #f96, #1E90FF);
額(⊙o⊙)… 上面記錄了一堆屬性，但是實際寫的還是用默認的，寫這麼多，大家瞭解下了
background:repeating-radial-gradient()重複徑向漸變
background:-webkit-repeating-radial-gradient(left, circle, #ace 10%, #f96 20%, #1E90FF 40%);
五、CSS3新特性之 2D/3D 轉換 transform ：平移/旋轉/縮放/傾斜
1. translate（x座標，y座標）方法控制元素從當前位置移動，transform:translate(150px,200px)
填寫正數的話是向右，向下，負數的話是向左、向上
當前如果你只想向一個方向移動 translateX 和 translateY ，如果說只填寫了translate(150px)則效果呢等同於translateX(150px)
例如：transform:translate(150px,200px) 這句代碼對應的移動過程如下圖，黑點爲元素的中心點
注意：位移不會改變元素的文檔流
注意：一般剛開始看都會分不清楚原點在哪，從哪開始，原點的話在元素的中心點，也就是該元素圍繞着這個點變形或旋轉，當然也只有該屬性在設置
transform屬性的時候起作用，當然這個是默認情況，你也可以修改它
怎麼修改元素變形的基準點？
答：通過transform-origin:水平方向(left center right) 垂直方向(top center bottom)
注意：原點一般設置在未變換之前。
2. rotate(xdeg) 方法根據給定的角度讓元素順時針（正數）/逆時針（負數）旋轉【deg是degree的縮寫，意爲角度】
例如：transform：rotate(20deg)
寫一個撲克牌的效果感受下rotate的效果
案例源碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
body{
background:#ABC;
}
.Showbox{
height: 400px;
width:200px;
margin:100px auto;
position:relative;
}
.Showbox img{
height:400px;
width:200px;
box-shadow: 4px 4px 7px gray;
border:1px solid darkseagreen;
border-radius: 7px;
position:absolute;
transition: all 3s;
-webkit-transition: all 3s;
transform-origin:bottom center;
}
.Showbox:hover .img8{
-webkit-transform: rotate(40deg);
transform: rotate(40deg);
-moz-transform:rotate(40deg) ;
}
.Showbox:hover .img7{
-webkit-transform: rotate(30deg);
transform: rotate(30deg);
-moz-transform:rotate(30deg) ;
}
.Showbox:hover .img6{
-webkit-transform: rotate(20deg);
transform: rotate(20deg);
-moz-transform:rotate(20deg) ;
}
.Showbox:hover .img5{
-webkit-transform: rotate(10deg);
transform: rotate(10deg);
-moz-transform:rotate(10deg) ;
}
.Showbox:hover .img4{
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
-moz-transform:rotate(0deg) ;
}
.Showbox:hover .img3{
-webkit-transform: rotate(-10deg);
transform: rotate(-10deg);
-moz-transform:rotate(-10deg) ;
}
.Showbox:hover .img2{
-webkit-transform: rotate(-20deg);
transform: rotate(-20deg);
-moz-transform:rotate(-20deg) ;
}
.Showbox:hover .img1{
-webkit-transform: rotate(-30deg);
transform: rotate(-30deg);
-moz-transform:rotate(-30deg) ;
}
</style>
</head>
<body>
<figure class="Showbox">
<img class="img1" src="img/1.jpg"/>
<img class="img2" src="img/11print.jpg"/>
<img class="img3" src="img/12print.jpg"/>
<img class="img4" src="img/14print.jpg"/>
<img class="img5" src="img/1print.jpg"/>
<img class="img6" src="img/7print.jpg"/>
<img class="img7" src="img/6print.jpg"/>
<img class="img8" src="img/3print.jpg"/>
</figure>
</body>
</html>
3. skew(30deg,40deg) 方法用來實現元素的傾斜處理，第一個參數爲水平方向傾斜角度，第二個參數爲垂直方向傾斜角度
也可以分開來寫skewX(30deg) / skewY(30deg),如果給寫skew(30deg)一個值的話同skewX（30deg），傾斜的到底是怎麼傾斜的，看到下面的圖一下子就理解了
4. scale(x，y) 方法用來實現元素的縮放處理,參數表示水平方向/垂直方向要縮放的倍數，縮放基數爲1，如果其值大於1元素就放大，反之其值小於1，元素縮小
如果傳入0的話，元素則不可見
以下是3D變形轉換，我們已經成功從二維平面跨入了三維立體
3D位移：CSS3中的3D位移主要包括translateZ()和translate3d()兩個功能函數；
3D旋轉：CSS3中的3D旋轉主要包括rotateX()、rotateY()、rotateZ()和rotate3d()四個功能函數；rotate3d()四個功能函數；
3D縮放：CSS3中的3D縮放主要包括scaleZ()
爲了更好理解三維座標，我們從rotate開始。rotateX()、rotateY()、rotateZ()
先看看這個三維座標圖吧，x,y,z 那麼rotateX()是怎麼轉呢，可以想想夏天最喜歡的烤羊肉串或者中國奧運會獎牌最多的體操隊，他們的運動就是rotateX()
著名的鋼管舞其實就是rotateY() 那麼方向盤比做rotateZ()最貼切不過了，下面看下如下代碼對應的效果
<style>
div{
width: 200px;
height: 200px;
background: url(qy.jpg);
background-size: 200px 200px;
transform: rotateY(80deg);
}
</style>
如果說rotateX/rotateY/rotateZ可以幫助理解三維座標，則translateZ則可以幫你理解透視位置，設置的translateZ值越小，則子元素大小越小（因爲元素遠去，我們
眼睛看到的就會變小）；translateZ值越大，該元素也會越來越大。
實現3D的關鍵就是要有perspective視距，必不可少的屬性：perspective屬性的存在與否決定了你所看到的是2次元的還是3次元的，也就是是2D transform還是3D
transform. 這不難理解，沒有透視，不成3D.，當然沒有perspective 寫了translateZ也沒什麼效果
怎麼計算perspective的值：假設屏幕分辨率爲1680*760那麼人眼睛距離顯示器的距離是1.2個屏幕的寬度，1680*1.2=2000 perspective屬性設置鏡頭到元素平面的
距離。比如perspective(300px)表示，鏡頭距離元素表面的位置是300像素
理解perspective： perspective只能設px值，不能設%百分比。值越小表示用戶眼睛距離屏幕越近，相當於創建一個較大的3D舞臺。反之，值越大表示用戶眼睛距
離屏幕越遠，相當於創建一個較小的3D舞臺。這很容易理解，離的越近東西看起來越大，離的越遠東西看起來越小。
圖中d就是perspective視距，Z就是translateZ軸的位移。Z軸正向位移時，3D舞臺將放大。反之，Z軸負向位移時，3D舞臺將縮小。上圖Z是d的一半，因此3D舞臺
上的元素將是原來的2倍.
perspective屬性有兩種書寫形式，一種用在舞臺元素上（動畫元素們的共同父輩元素）；第二種就是用在當前動畫元素上，與transform的其他屬性寫在一起。如
下代碼示例：
.stage {
perspective: 600px;
}
以及：
#stage .box {
transform: perspective(600px) rotateY(45deg);
}
注意：在css3中只有設置了perspective的值元素纔會有Z軸，perspective爲none元素則沒有Z軸(就是2D元素)
transform-style
這個屬性比較簡單隻有兩個值flat和preserve-3d。用於指定舞臺爲2D或3D，默認值flat表示2D舞臺，所有子元素2D層面展現。preserve-3d看名字就知道了表示3D
舞臺，所有子元素在3D層面展現。注意，在變形元素自身上指定該屬性是沒有用的，它用於指定舞臺，所以要在變形元素的父元素上設置該屬性。設定後，所有
子元素共享該舞臺。
代碼如下：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.box{
width: 500px;
height: 500px;
background-color: #0084bb;
transform:perspective(1200px) rotateY(45deg);
transform-style: preserve-3d;
}
img{
transform: translateZ(100px);
}
</style>
</head>
<body>
<div class="box">
<img src="qy.jpg" />
</div>
</body>
</html>
對比下圖可以直觀的發現加與不加的區別
六、CSS3 新特性之 動畫
1. transition 屬性是一個簡寫屬性，用於設置四個過渡屬性：其實理解transition重要理解，它就是平滑過渡CSS樣式
通過 CSS3，我們可以在不使用 Flash 動畫或 JavaScript 的情況下，當元素從一種樣式變換爲另一種樣式時爲元素添加效果
transition：all 2s 1s ease
transition-property 規定應用過渡的 CSS 屬性的名稱。
transition-duration 定義過渡效果花費的時間。默認是 0。
transition-timing-function 規定過渡效果的時間曲線。默認是 "ease"。
transition-delay 規定過渡效果何時開始。默認是 0。
注意：過渡不能實現從無到有的轉換，比如經常有人想要過渡display:none 到 display:block
時間曲線：
linear 規定以相同速度開始至結束的過渡效果
ease 規定慢速開始，然後變快，然後慢速結束的過渡效果
ease-in 規定以慢速開始的過渡效果
ease-out 規定以慢速結束的過渡效果
ease-in-out
規定以慢速開始和結束的過渡效果
2. 動畫 @keyframes 規則來創建動畫，keyframes規定指定內一個或多個css樣式從當前狀態更改爲新的樣式可以取代網頁中的動圖、flase動畫和javaScript
動畫是使元素從一種樣式逐漸變化爲另一種樣式的效果，以改變任意多的樣式任意多的次數。請用百分比來規定變化發生的時間，或用關鍵詞 "from" 和 "to"，等同
於 0% 和 100%。0% 是動畫的開始，100% 是動畫的完成。
語法：animation: name time 延遲時間 運動方式 循環次數 反向是否也有動畫;
animation：所有動畫屬性的簡寫屬性
animation-name：規定 @keyframes 動畫的名稱。
animation-duration 規定動畫完成一個週期所花費的秒或毫秒。默認是 0。
animation-timing-function 規定動畫的速度曲線。默認是 "ease"
animation-direction 屬性定義是否循環交替反向播放動畫 normal 正常播放 alternate 動畫在奇數次（1、3、5...）正向播放，在偶數次（2、4、6...）反向播放
animation-delay 規定動畫何時開始。默認是 0。
animation-iteration-count ：規定動畫被播放的次數。默認是 1，infinite 無限次播放。
animation-play-state:paused
看完以上的總會丟掉一個重要的steps以上w3school網站上給的使用方法，但是漏掉一個很重要的 steps
簡單的來說，我們一直使用animation基本都是實現線性漸變的動畫如1.位置在固定的時間從起點到終點2.尺寸在固定的時間線性變化
3.顏色的線性改變等等
如果要實現幀動畫效果而不是線性的變化就需要引入step這個值了，換句話就是沒有過渡的效果，而是一幀幀的變化，一頓一頓的
注意：不管是動畫還是視頻，我們都應該明白這麼一個東西：這個動畫叫什麼名字，它的播放時長、播放快慢、是否延遲播放、是否無限制播放次數、是否倒放、
是否暫停是否都需要有所改變
下面我們來詳細介紹下steps 函數，steps函數指定了一個階躍函數
css3的動畫的animation-timing-function屬性定義了動畫的速度曲線,一般的速度曲線大家都知道,什麼ease,linear,ease-in,ease-out,...定義了animation-timing-
function後,動畫就會按照定義的曲線來執行動畫.
但是除了這些值以外,animation-timing-function值還可以是steps(x,startend) 它呢有兩個參數，分別是動畫分幾步完成（這個分幾步完成可不是指整個keyframe
指的是每個間距比如0%｛｝50%｛｝0-50% 分爲幾步）和動畫開始的位置，start 第一幀是第一步動畫結束，end 第一幀是第一步動畫開始
它和之前的幾個有什麼不一樣呢？
如果定義曲線,則動畫幀與幀之間會流暢的進行,而定義steps,則表示直接跳躍進行,動畫直接從一個幀切換到另一個幀.
舉個栗子：通過動畫寫一個顏色過渡動畫，分別是0%{red} 100% {black}如果用之前的動畫曲線是先紅色，然後從紅色可能先變成灰色再一步一步漸變最後到黑
色。要是steps的話呢就直接是紅色然後黑色，沒有中間過渡那個效果。但是話說回來寫動畫的目的就是因爲它能加上過度動畫，所以這個的話大家根據情況來看
選擇哪個。
七、終於到了最後一個字體和圖標字體了
之前的網站上面的字體必須是用戶計算機上面已經安裝的字體，不然就不會顯示出來，but 這嚴重影響到了設計師的審美，於是伴隨着CSS3，網頁設計師可以盡
情的使用任何字體，我們把字體文件包含在網站中，它會自動下載給需要的客戶
1. 先去下載：我使用的字體下載地址：http://font.chinaz.com/zhongwenziti.html
2. 安裝字體 把下載好的字體文件（AaPrincessPeach.ttf）拷貝到 C:\Windows\Fonts 下
3. 在html頁面中使用
<style>
@font-face {
font-family: "fontname";
src: url("AaPrincessPeach.ttf");
}
div{
font-family: fontname;
}
</style>
擴展瞭解：如果網站上面有同時有多種字體怎麼辦？很簡單，只需要把導入字體的@font-face複製下就OK啦
圖標字體
目前網頁上你看到的小圖標不一定全部都是雪碧圖或者小圖，有可能有一些是圖標字體。圖標字體就是將圖標做成一個字體，使用的時候和普通的字體一樣，可以
設置字號大小、顏色、透明度等等，都一樣一樣的。最大的優點就是擁有字體的矢量無失真的特點，同時可以兼容到IE6，並且生成的文件比較小，215個圖標的
生成ttf字體文件才41kb
1. 先去下載：我使用的圖標字體下載地址：http://www.iconfont.cn/
2. 選擇你想要的圖標，點擊加入購物車，然後都選擇完畢後，點擊購物車圖標
到這步可能大家又會有點暈了就是怎麼給了這麼多文件，而且後綴名都這麼奇怪呢，先來認識下新的後綴名都是幹嘛的，然後就好用了
Also看完了就知道爲什麼給你提供這麼多格式了吧，還是因爲瀏覽器兼容問題，也就是說你希望它能兼容更多的瀏覽器，在用的時候會就填幾個格式咯
3. 開始使用
首先在CSS中填寫
@font-face {font-family: "iconfont";
src: url('iconfont.eot?t=1499824504946'); /* IE9*/
src: url('iconfont.eot?t=1499824504946#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('iconfont.woff?t=1499824504946') format('woff'), /* chrome, firefox */
url('iconfont.ttf?t=1499824504946') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
url('iconfont.svg?t=1499824504946#iconfont') format('svg'); /* iOS 4.1- */
}
.iconfont {
font-family:"iconfont" !important;
font-size:16px;
font-style:normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-fengji:before { content: "\e609"; }
.icon-shidu:before { content: "\e60a"; }
.icon-shuitongfa:before { content: "\e60b"; }
.icon-taiyangyu:before { content: "\e60c"; }
.icon-eryanghuatannongdu:before { content: "\e613"; }
<i class="iconfont icon-fengji"></i>
4. 其他網站應用，可以F12看下淘寶首頁頭部這塊，就是用的圖標字體
5. 圖標字體對比雪碧圖？
雪碧圖的缺點：1. 高清會失真 2.不方便變化，因爲是一個靜態的圖片無法動態hover變化顏色或者其他效果
而圖標字體都完美的解決了上述問題，並且還具備良好的兼容性，同時生成的文件小。但是圖標字體也有自己的軟肋，不支持多色圖標，雖然現在通過svg的方式
也有多色圖標，但是瀏覽器的支持並不是特別好，所以以後在網頁佈局的時候可以根據情況合理的使用圖標字體和雪碧圖。
擴展瞭解下如果想自己做圖標字體怎麼辦？給你一個鏈接自己頓悟下 http://jingyan.baidu.com/article/9158e000342ba6a25412281f.html
總結一下：這次篇幅有點長，但是卻把CSS3中的新特性都展示了出來，有了CSS3確實爲我們的開發帶來非一般的趕腳，雖然我們現在還在加着一堆我們並不喜歡的前綴才能使用CSS3，但是我想在不遠的以後，肯定會把這些討厭的前綴都去掉，更多的瀏覽器開發廠商將完美的擁抱CSS3，回顧CSS3之前的歷程，從一開始都不支持，到現在的加上前綴部分支持，到以後不加前綴都支持也不會太遠。