摘要：只是，僅支持這一種格式是專門為開發(fā)而設(shè)計(jì)的字體，其字體尺寸更小，加載更快，應(yīng)該優(yōu)先使用。字體圖標(biāo)技術(shù)的實(shí)現(xiàn)就是把通常的字符集映射成了另外的圖標(biāo)形狀例如把映射成了

本文的目標(biāo)是：使用css可以控制圖標(biāo)的顏色，大小
需要工具：png轉(zhuǎn)svg工具(如果ui給的svg就更好了)    iconfont(圖標(biāo)轉(zhuǎn)代碼)

打開網(wǎng)址 https://www.bejson.com/conver...

上傳

下載

打開網(wǎng)址：https://www.iconfont.cn

點(diǎn)擊圖標(biāo)管理->我的圖標(biāo)，如下圖

進(jìn)入到我的圖標(biāo)之后，點(diǎn)擊上傳icon,如下圖

點(diǎn)此上傳 選中svg文件，

上傳之后，點(diǎn)擊去除顏色并提交

上傳完之后就會(huì)自動(dòng)回到圖標(biāo)管理頁(yè)，點(diǎn)擊批量操作->批量加入購(gòu)物車，然后進(jìn)入購(gòu)物車

在購(gòu)物車中，點(diǎn)擊下載代碼

生成的項(xiàng)目目錄如下：

點(diǎn)擊demo_index.html，可以查看官網(wǎng)給出的使用方式

我項(xiàng)目中使用的是第二種，所以只介紹第二種使用方式

第一步，把iconfont.css復(fù)制到你的css樣式中

第二步，根據(jù)iconfont.css中你需要的字體，把生成的項(xiàng)目中的字體文件和svg文件復(fù)制到你的項(xiàng)目目錄中，需要和css文件同級(jí)目錄，否則需要修改iconfont.css中引入字體文件的路徑，默認(rèn)情況下引入下圖的字體(如果不需要兼容ie8和ios4.1-，可移除相應(yīng)的字體，詳情看下面的介紹)

第三步，使用

//或者

改變樣式的話

span{
    color:red
}
i{
    color:red
}

@font face的本質(zhì)是變量，該規(guī)則支持的css屬性有很多，我們常用的有：font-family,src,font-style,font-weight

首先來(lái)看一下，font-family,這里的font-family可以看成一個(gè)變量，名字可以隨便取，比如用一個(gè)$符，但要注意不要覆蓋系統(tǒng)已經(jīng)存在的字體

/*font-family如果是符號(hào)的話需要用引號(hào)包起來(lái)*/
@font-face{
    font-family:"$"
}
/*使用iconfont生成的@font-face規(guī)則font-family如下：*/
@font-face{
    font-family:"iconfont"
}

然后看下我們的重點(diǎn)src屬性，src屬性用來(lái)引入字體資源，引入的字體資源可以使本地的(使用local()引入)，也可以是外鏈字體(使用url()引入)，注意local要ie9及以上版本才支持

這里我們重點(diǎn)來(lái)看下url功能符

@font-face{
    font-family:"icon";
    src:url("icon.eot") format("eot");/*ie6-8*/
    src: url("icon.eot#iefix") format("embedded-opentype"),
        url("icon.woff2") format("woff2")
        url("icon.woff") format("woff"),
        url("icon.ttf") format("typetrue"),
        url("icon.svg#icon") format("svg");
}

//format的作用是讓瀏覽器提前知道加載字體的格式，以決定是否加載字體

上面代碼一共出現(xiàn)了五種字體格式，分別是eot,woff,woff2,ttf,svg

svg格式是為了兼容ios4.1及之前的版本，現(xiàn)在的ios版本都到11了，所以完全可以舍棄

eot是ie私有的，所有版本的ie都支持eot格式，并不是只有ie6-8。只是，ie6-ie8僅支持eot這一種格式

woff（web open font format）是專門為web開發(fā)而設(shè)計(jì)的字體，其字體尺寸更小，加載更快，應(yīng)該優(yōu)先使用。Android4.4開始全面支持

woff2是woff的二代，字體文件尺寸更小，但是僅chrome和firefox支持的比較好

ttf作為系統(tǒng)安裝字體的格式，兼容性很好，但體積較大

綜上，我們得出以上結(jié)論

svg格式果斷舍棄

如果無(wú)需兼容ie8,eot格式舍棄

如果無(wú)需兼容Android4.3以前的版本，ttf格式舍棄

iconfont生成的字體如下：

@font-face {
    font-family: "iconfont";
    src: url("iconfont.eot?t=1547714990292");
    /* IE9 */
    src: url("iconfont.eot?t=1547714990292#iefix") format("embedded-opentype"), /* IE6-IE8 */
    url("data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAP4AAsAAAAACBgAAAOrAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCCcAqEJINPATYCJAMICwYABCAFhG0HLhvzBhHVm0XJviiwjblCNx4e1RAbqvoScwd3wUWGawQq7bPvQzw8v+7p3Hnv/52F1bbLColMUKi7FapgBBOVZ2CcDsadACIZ7O93+tTc9nW/JuKoRNUmmiAW/joh4qVzC50Q2dyMtzUqQrEk53k/fUfSbiDkVwD8cbjXpgc4313a5Tjnoi7AOJAC3QPXAgmkD/LJv+Mfxi5oibsJNNLNEDGmNWWOUmYOCsSW0/qVyoxcbkgNpVCvmJnFaTVlcaQ4A3Aq+Pn4SjFKCrXEzJixbuwaIz4AKyLtrnZb4iEwptOCzSNhCDIxp1I/TYr8QySNVH/Wi22lBh8uVeXRN/uPRxB1Jr8JxHahXxPDYV4qdQEy7bmG94PORFqVlcjqH+baAbu7AM71qavD+25xUwr1TdTSXbmOgjo6aOTEtdzzhlD07Wfwh3kNLWxrj7Bjinp06gAWdAde7N/YCAfvirOKDa3s6mN/sJ8ePobHHoaNg/S9S30z1dTNb5s47+kQFh7MCP6N69BdPqII7qzvF2OXbAPsvszfu4zfS9cuo4/fe41Hu47H1ORtqTPw0k8353NTd41KqYcHt8d4mj81ujIHd/JT9939WKmT19BaV8T0GUgcUlMYh5QtAZn08c/zD3y/2idiavJz5oyGdIuw8C6CcGkCHZZGgb2tr32WF30s8se1QLHTBzjI4vpTFv32/uArMNIVuOMe/9uiattoCCv1s7JmyNmnsM132Ghb8VY9/qd0iaO4yFgqGsi3pQVkDaEjVc7aqf7juAtroRNgSjfcFDl2BGnfaPlxuxjJ20utDr0Oy/3YZ/qLFceoimHNsa4yGnacG0Tnm91qCBkydLHIzmuI+HxPexAwAlQofaTjX/0d42/y/5Y3r/8vYQbPKfBKYK1QBnQzUt67IfiHjI51WWOZiiIrjMpw4Zr0bkoaaYQKw+ZW3g41tiXRhpIzIBQa6ApJqQ8yY4dATWPDoK40HBoZbPz8xlrbJYncEIMcABBauAqFZu5C0sJjZMa+gZp2vkNdi0jQyLwgV2yM6hdRjWbUgg7MH6LdGtkqUWHqDf27aE6zAvwL+YwumPoxH7piQ55izPnxswgB8VZhBfthKRvsvCW00geRfRkGqrpRb7faKaMZtaAD5g+i3Rp5zUUVvn9D/y6aG2qqtC/kM3YOJr2xA/LKb51qbuWQ8+NnIgSItwpWoMVi+TewV3dLaKUXBnj3xYAaUVd+v7ywvt0WaMSUFGHlJnlH0f+uAwA=") format("woff2"), url("iconfont.woff?t=1547714990292") format("woff"), url("iconfont.ttf?t=1547714990292") format("truetype"), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
    url("iconfont.svg?t=1547714990292#iconfont") format("svg");
    /* iOS 4.1- */
}

.iconfont {
    font-family: "iconfont" !important;
    font-size: 18px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    cursor: pointer;
}

.icon-play:before {
    content: "e601";
}

這里有兩個(gè)需要關(guān)注的東西，一個(gè)是字體,另一個(gè)是字符，這兩個(gè)東西就是字體圖標(biāo)技術(shù)的本質(zhì)。

字體的本質(zhì)是字符集與圖形的一種映射關(guān)系。

字體圖標(biāo)技術(shù)的實(shí)現(xiàn)就是把通常的字符集映射成了另外的圖標(biāo)形狀.
例如把 e601映射成了