icon-font與svg

icon font 使用與svg應用分享

icon font 字體概述

css3增長了@font-face屬性，傳統的瀏覽器是經過font-family來設置字體，若是系統裏沒有的話就用其它字體來代替。 
有了@font-face屬性就方便多了，能夠由開發人員經過設計自定義字體來進行的，加載過程是瀏覽器經過下載字體，再進行渲染頁面 

 

font-face能夠設置自定義自體，也能夠設置自定義圖片字體,font icon由此誕生。@font-face 引入生成好的字體文件 ，而後在網 
頁中須要使用某個圖標的地方，寫上對應的「文字」，那麼在瀏覽器中就能夠看到圖標。 
icon font 是國內第一家在線網絡字體生成的工具網站，裏面還有許多icon字體能夠應用

 

Iconfont 使用起來很簡單，打開它的首頁，你會發現不少圖標，點擊你須要的圖標，就會發現圖標到了右上角的購物車裏，選擇好 
了圖標以後，點擊購物車，便可下載下來一個 zip 包。

解壓以後，會出現：demo.html, iconfont.eot, iconfont.svg, iconfont.ttf, iconfont.woff 這幾個文件。

其中 demo.html 文件是使用說明和效果，另外四個就是爲兼容各個平臺而轉換生成的字體文件。你只須要打開 demo.html 文件 
就能夠看到詳細的使用說明。 
使用字體圖標有不少好處，大致以下：

兼容性好，各個平臺瀏覽器基本均可以使用，並且在某些低級瀏覽器中，效果比圖片更好 
　相對於同效果的圖片相比，體積小，減小 http 請求，增長前端性能 
　可維護性好，維護起來能夠經過增減字體快速應用 
　交互性好，改變字體顏色便可改變圖標的顏色，同時能夠配合 CSS3 的動畫、漸變、過渡、變形等屬性實現 
　複雜的交互

然也有一些缺點，例如圖標一般只有一種顏色，雖然漸變可使其顏色更加豐富，可是兼容性沒了。還有一些其餘的缺點，不過對於 
iconfont 這個工具來講，最大的缺點就是圖標太少。國外網站iconfont字體有 fontello 可使用。

PC端應用教程

font-face聲明字體

　@font-face {
　
　font-family: 'iconfont';
　
 src: url('iconfont.eot'); /* IE9*/

 src: url('iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */

 url('iconfont.woff') format('woff'), /* chrome、firefox */

 url('iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/

 url('iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */

}

定義使用的iconfont樣式

　.iconfont{
　  font-family:"iconfont";
　　font-size:16px;font-style:normal;
　　-webkit-font-smoothing: antialiased; 抗鋸齒顯示樣式，safair或chrome
　　-moz-osx-font-smoothing: grayscale;
　　display: block; 若是出現小方塊，在ie7下，則加這句話
　　-webkit-text-stroke-width: 0.2px; pc的chrome出現嚴重的鋸齒
　　}

頁面引用

<i class="iconfont">&#33</i>

應用注意事項：

只在你肯定你很是須要 @font-face的時候才使用他 
將你的@font-face定義在全部的SCRIPT標籤前 
若是你有許多字體文件，考慮將它們分散到幾個域名下。 
不要包含沒有使用的 @font-face聲明——IE將不分它使用與否，統統加載 
Gzip字體文件，同時給它們一個將來的過時頭部聲明 
考慮字體文件的後加載，起碼對於IE。

參考網址 
參考網址

icon font製做

把製做好的AI圖,另存爲svg, 而後經過網址 上傳, 點擊加入購物車，而後在購物車中下載，會生成調用demo，進行對圖片字段的調用。

以上是icon font 字體的使用，下面介紹svg的應用。

SVG的應用

SVG可縮放矢量圖形（Scalable Vector Graphics）是基於可擴展標記語言（XML），用於描述二維矢量圖形的一種圖形格式。

特色

1．任意放縮。 
用戶能夠任意縮放圖像顯示，而不會破壞圖像的清晰度、細節等。 
2．文本獨立。 
SVG圖像中的文字獨立於圖像，文字保留可編輯和可搜尋的狀態。也不會再有字體的限制，用戶系統即便沒有安裝某一字 體，也會看到和他們製做時徹底相同的畫面。 
3．較小文件。 
整體來說，SVG文件比那些GIF和JPEG格式的文件要小不少，於是下載也很快。 
4．超強顯示效果 
SVG圖像在屏幕上老是邊緣清晰，它的清晰度適合任何屏幕分辨率和打印分辨率。 
5．超級顏色控制。 
SVG圖像提供一個1600萬種顏色的調色板，支持ICC顏色描述文件標準、RGB、線X填充、漸變和蒙版。

使用內聯SVG

SVG做爲背景圖片使用 
SVG做爲src屬性使用 
內聯SVG

聲明一個SVG元素

<svg xmlns="http://www.w3.org/2000/svg" width="400" height="300" viewBox="0 0 400 300">
 <!-- svg stuff here -->
</svg>

建立SVG圖形

circle:基礎圖形，基於中心點以及半徑來建立的圓形。

對於circle元素，咱們有3個須要指定的屬性。它們是cx，cy，r。cx和cy是圓心在X軸和Y軸上的座標，若是沒有指定的話，它們的默認值爲0。r爲圓形的半徑。通常來講，對一個圓形元素來講咱們能夠看到以下的標籤：

<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100">
 <circle cx="50" cy="50" r="50"></circle>
</svg>

rect:基礎圖形，基於角的位置和矩形的寬度和高度來建立的矩形。

矩形的建立跟圓形的建立方式差很少。就它最基礎的形式來講，咱們須要爲其指定左上角的的座標x和y，以及該矩形的寬度width和高度height的值。其標籤以下所示：

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="100" viewBox="0 0 200 100">
 <rect x="0" y="0" width="200" height="100"></rect>
</svg>

polygon:基礎圖形，基於座標點和兩點相連而成的直線線段來建立的多邊形。

咱們能夠經過在points屬性上的多組 x-y 座標點來定義咱們的多邊形元素。這些座標點經過直線線段來鏈接。標籤聲明以下：

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 200 100">
 <polygon points="0,50 50,0 150,0 200,50 150,100 50,100"></polygon>
</svg>

path:萬能的圖形，能夠用來建立任意的形狀。全部基礎圖形都能由它來建立。

path元素是在形狀處理方面最強大的元素。在path元素中，咱們能夠定義d屬性，這個屬性爲咱們的路徑如何延伸做出了定義。d屬性可讓咱們經過一系列的命令來指定一個運動軌跡。咱們能夠用直線命令和彎曲命令來構建一些複雜的形狀。但實際上，你並不但願手寫貝塞爾曲線這種玩意，二是經過矢量軟件來建立並輸出SVG。但瞭解一下他們並非什麼壞事。

M x y:移動到座標x-y 
L x y:從當前位置畫一條直線到座標x—y 
H x:從當前位置畫一條水平線到座標x 
V y:從當前位置畫一條垂直線到座標y 
Z:閉合路徑

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 200 200">
 <path d="M 0 0 H 200 V 200 H 0 Z"></path>
</svg>

fill:元素的填充顏色 
fill-opacity:元素的填充顏色透明度 
stroke:元素的筆畫顏色 
stroke-width:元素的筆畫寬度 
stroke-opacity:元素的筆畫顏色透明度

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 200 200">
 <circle class="circle" cx="100" cy="100" r="90" fill="#3399cc" stroke="#333333" stroke-width="5"></circle>
</svg>

.circle {
 transition: stroke 0.3s, fill 0.3s;
}

.circle:hover {
 stroke: #3399cc;
 fill: #333333;
}

SVG中的結構化、分組和引用元素

使用元素分組

元素將其全部子內容分到一組。它一般有一個id屬性，用來給分組命名。你給元素應用的樣式也都會被應用於它全部的子元素。因此它很容易添加樣式、動畫、交互，甚至整個組的對象的動畫。

使用重用元素

元素可讓你重用現有的元素，給你一個相似於圖形編輯器中複製粘貼的功能。它能夠用於重用單個元素，也能夠重用一組用定義的元素。

元素有x，y，height，width屬性，它經過使用xlink:href屬性引用其它內容。因此若是你已經定義了一個分組，並給它賦予了id，當你想要在其它地方使用它時，你只須要在xlink:href屬性中給一個URI，而後指定x和y的位置，也就是該組圖像顯示的原點(0, 0)。

<use x="100" y="100" xlink:href="#bird" />
<use x="100" y="100" xlink:href="path/to/animals.svg#bird" />
<use xlink:href="#bird" transform="translate(100, 100)" />

使用重用已存儲元素

元素能夠用來存儲那些咱們不想直接顯示的內容。換句話說，元素就是用來定義元件，可是不直接渲染。這個隱藏的存儲元件能夠在後面被其它SVG元素應用及顯示，這使得它很是適合用於繪製那些包含重用圖像的圖案。

<svg>
<defs>
 <linearGradient id="gradient">
 <stop offset="0%" style="stop-color: deepPink"></stop>
 <stop offset="100%" style="stop-color: #009966"></stop>
 </linearGradient>
</defs>

<rect stroke="#eee" stroke-width="5" fill="url(#gradient)"></rect>

 

使用對元素進行分組

很是適用於定義可重複使用的元件（或符號）。它也能夠做爲元素實例化的一個模板。並且有viewBox和preserveAspectRatio屬性，它能夠在引用元素定義的矩形視窗中自適應縮放。注意symbol元素每次被use元素實例化時均可以從新定義新的視窗。

SVG SMIL animation

如今這個功能正在逐步被移除，最好不要使用，它是在svg裏直接加入動畫元素，如今作的時候都用css3書寫對元素的操做。 
主要內容有

<set>
<animate>
<animateColor>
<animateTransform>
<animateMotion>`

正確的寫法舉例
 #mouthTwo{
 animation:domouth 1s linear infinite;
 -webkit-animation: domouth 1s linear infinite;
 }
 @-webkit-keyframes domouth {
 from {
 opacity: 0;
 }

 50% {
 opacity: 1;
 }
 }
 @keyframes domouth {
 from {
 opacity: 0;
 }

 50% {
 opacity: 1;
 }
 }

 之前的寫法
 <animate attributeName="opacity" from="1" to="0" begin="0s" dur="3s" repeatCount="indefinite" />

參考文檔 
snap.svg.js 製做svg動畫 
svg教程視頻

以上僅供參考