如果我們設置網(wǎng)頁上顯示的圖片就像我們設置字體一樣，那該是多么美好的一件事情。是的，通過設置像字體一樣的樣式來設置大小顏色，位置，無論放大或者縮小都不會影響其分辨率，這是多么誘人的一件事啊，別人看到你的圖也扒不到你的圖。今天就來分享一下如何實現(xiàn)字體替換圖片寫法。

http://www.iconfont.cn/  iconfont平臺  這個是用到的地址，最初從網(wǎng)上自由下載這個里面的小圖標，如果覺得不合適也可以自己做，但是必須是svg格式，如果沒有可以從網(wǎng)上找小軟件導成svg的格式

       必要要登錄才可以上傳                  單個小圖片的上傳，點擊下載自動生成壓縮包

如果是多個圖標就建個文件夾在線下載至本地

第一步：使用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" !important;

    font-size:16px;font-style:normal;

    -webkit-font-smoothing: antialiased;/* 設置字體的抗鋸齒或者說光滑度的屬性。*/

    -webkit-text-stroke-width: 0.2px;/* 可以對字體圖標的邊緣進行模糊*/

    -moz-osx-font-smoothing: grayscale;}

第三步：挑選相應圖標并獲取字體編碼，應用于頁面

3

樣式有兩種寫法，可以是當成背景的樣式直接下載css樣式

.icon-dollar:before { content: "\e600"; },使用:before偽元素來產生字符圖標，其中“before”表示字符出現(xiàn)在圖標之后邊，“after”則出現(xiàn)在之前。也可以寫在



,別人只能看到你寫進的是xe60f;

通過上面的自動生成圖片，你可以自定義很多小圖標，不過這類的比較適合大型門戶類的網(wǎng)站，圖標比較多的時候可以一次性寫出來，就一兩個小圖標，真的沒有那么必要再做成svg去生成在去寫好長的代碼。