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

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

       必要要登錄才可以上傳                  單個(gè)小圖片的上傳，點(diǎn)擊下載自動(dòng)生成壓縮包

如果是多個(gè)圖標(biāo)就建個(gè)文件夾在線下載至本地

第一步：使用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;/* 設(shè)置字體的抗鋸齒或者說光滑度的屬性。*/

    -webkit-text-stroke-width: 0.2px;/* 可以對(duì)字體圖標(biāo)的邊緣進(jìn)行模糊*/

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

第三步：挑選相應(yīng)圖標(biāo)并獲取字體編碼，應(yīng)用于頁(yè)面

3

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

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



,別人只能看到你寫進(jìn)的是xe60f;

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