小程序中引用icon-font
##简介
icon适量字体,能够适应各种尺寸而不失真,在小程序中使用icon-font字体。
font-family 外部字体引用,需要将ttf字体转换
字体转换地址:http://transfonter.org
字体下载地址:https://www.1001freefonts.com
图片转码地址:http://tool.chinaz.com/tools/imgtobase
图片压缩地址:https://imagecompressor.com/zh
https://tinypng.com
## 直奔主题
### 下载字体文件
使用 阿里 http://www.iconfont.cn 字体文件。下载后。
图1-字体文件###引用字体
将文件iconfont.css引入文件即可
```
<text class="confront icon-close-x"></text>
/* 引入的字体信息 */
.iconfont {
font-family:"iconfont" !important;
font-size:16px;
font-style:normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* 引入的字体内容 */
@font-face {font-family: "iconfont";
src: url('iconfont.eot?t=1528356536113'); /* IE9*/
src: url('iconfont.eot?t=1528356536113#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('data:application/x-font-woff;charset=utf-8;base64,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') format('woff'),
url('iconfont.ttf?t=1528356536113') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
url('iconfont.svg?t=1528356536113#iconfont') format('svg'); /* iOS 4.1- */
}
```
说明,小程序中必须引用两部分
```
@font-face {font-family: "iconfont";
src: url('data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAABBwAAsAAAAAGOAAAQ......+NLSaQTBVHqDivVO3A=') format('woff'),
url('iconfont.svg?t=1528356536113#iconfont') format('svg'); /* iOS 4.1- */
```
###引用字体
```
```