本文的目標是：使用css可以控制圖標的顏色，大小
第一步，把圖標轉成svg格式的
- 打開網址 https://www.bejson.com/conver...
- 上傳
- 下載
第二步，使用iconfont生成代碼
點擊圖標管理->我的圖標，如下圖
進入到我的圖標之後，點擊上傳icon,如下圖
點此上傳 選中svg文件，
上傳之後，點擊去除顏色並提交
上傳完之後就會自動回到圖標管理頁，點擊批量操作->批量加入購物車，然後進入購物車
在購物車中，點擊下載代碼
第三步，生成的代碼運用到項目中
生成的項目目錄如下：
點擊demo_index.html，可以查看官網給出的使用方式
我項目中使用的是第二種，所以只介紹第二種使用方式
第一步，把iconfont.css複製到你的css樣式中
第二步，根據iconfont.css中你需要的字體，把生成的項目中的字體文件和svg文件複製到你的項目目錄中，需要和css文件同級目錄，否則需要修改iconfont.css中引入字體文件的路徑，默認情況下引入下圖的字體(如果不需要兼容ie8和ios4.1-，可移除相應的字體，詳情看下面的介紹)
第三步，使用
<span class="icon iconfont icon-play"></span>
//或者
<i class="icon iconfont icon-play"></i>改變樣式的話
span{
color:red
}
i{
color:red
}最後，原理分析
1. 理解@font face規則
@font face的本質是變量，該規則支持的css屬性有很多，我們常用的有：font-family,src,font-style,font-weight
首先來看一下，font-family,這裏的font-family可以看成一個變量，名字可以隨便取，比如用一個$符，但要注意不要覆蓋系統已經存在的字體
/*font-family如果是符號的話需要用引號包起來*/
@font-face{
font-family:'$'
}
/*使用iconfont生成的@font-face規則font-family如下：*/
@font-face{
font-family:'iconfont'
}然後看下我們的重點src屬性，src屬性用來引入字體資源，引入的字體資源可以使本地的(使用local()引入)，也可以是外鏈字體(使用url()引入)，注意local要ie9及以上版本才支持
這裏我們重點來看下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的作用是讓瀏覽器提前知道加載字體的格式，以決定是否加載字體
上面代碼一共出現了五種字體格式，分別是eot,woff,woff2,ttf,svg
- svg格式是爲了兼容ios4.1及之前的版本，現在的ios版本都到11了，所以完全可以捨棄
- eot是ie私有的，所有版本的ie都支持eot格式，並不是只有ie6-8。只是，ie6-ie8僅支持eot這一種格式
- woff（web open font format）是專門爲web開發而設計的字體，其字體尺寸更小，加載更快，應該優先使用。Android4.4開始全面支持
- woff2是woff的二代，字體文件尺寸更小，但是僅chrome和firefox支持的比較好
- ttf作爲系統安裝字體的格式，兼容性很好，但體積較大
綜上，我們得出以上結論
- svg格式果斷捨棄
- 如果無需兼容ie8,eot格式捨棄
- 如果無需兼容Android4.3以前的版本，ttf格式捨棄
2. iconfont生成字體圖標原理
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";
}這裏有兩個需要關注的東西，一個是字體,另一個是字符，這兩個東西就是字體圖標技術的本質。
字體的本質是字符集與圖形的一種映射關係。
字體圖標技術的實現就是把通常的字符集映射成了另外的圖標形狀.
例如把 e601映射成了
