HTML5中引入字体样式的常用方法-Iconfont(阿里巴巴矢量图库)和IcoMoon-APP

网页需求常常需要一个图标，例如地址定位（图1）、购物车（图2）、下拉菜单（图3）

HTML5中引入字体样式的常用方法-Iconfont(阿里巴巴矢量图库)和IcoMoon-APP-编程知识网

引入图片相对来说要麻烦和不便，针对这个问题往往有两个途径获得我们需要的文字图标，可对其进行文字样式编辑，使它变成我们想要的外观和尺寸。途径分别为

1）阿里巴巴的 Iconfont。贴一下地址：https://www.iconfont.cn/ (下图1)

2）国外网站的IcoMoon APP。贴一下地址:https://icomoon.io/app （下图2）

可以看到我们常用的图标几乎都可以在上面找到。

针对途径一，第一步：首先进行需要的图标选择，选择后会出现虚线框，点击购物车选择下载代码。解压之后得到font_t12jasspxmn命名样式的文件夹，打开文件夹找到demo_index.html文件，打开

会发现自己选择的文件图标都在，并且在下面有&#xe***的文字代码。

第二步，在自己的工程html文件夹中style中添加如下代码：

@font-face {font-family: 'iconfont';src: url('iconfont.eot');src: url('iconfont.eot?#iefix') format('embedded-opentype'),url('iconfont.woff2') format('woff2'),url('iconfont.woff') format('woff'),url('iconfont.ttf') format('truetype'),url('iconfont.svg#iconfont') format('svg');
}

必须要注意的是文件的路径，因此我们将之前的文件中放在工程文件夹中，并将上述代码的路径更改

@font-face {font-family: 'iconfont';src: url('font_t12jasspxmn/iconfont.eot');src: url('font_t12jasspxmn/iconfont.eot?#iefix') format('embedded-opentype'),url('font_t12jasspxmn/iconfont.woff2') format('woff2'),url('font_t12jasspxmn/iconfont.woff') format('woff'),url('font_t12jasspxmn/iconfont.ttf') format('truetype'),url('font_t12jasspxmn/iconfont.svg#iconfont') format('svg');
}

改好之后，我们就发现他自己生成的文件夹名乱七八糟，不如改成我们自己熟悉的font文件夹就行，路径也好写，为了偷懒我就不改了。

第三步，定义你要使用的文字样式。

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

第四部，使用，用到哪个就输入哪个代码。

<span class="iconfont">3</span>

下面说说针对第二中途径的方法。前面与第一种几乎一样。

差异主要在

参考这个就行，是在懒得写了：https://www.baidu.com/link?url=Ov4BzqRGZRXtenpkIq3Y5WQrt944f5e-Tza2Q2-T76AgrLnZ8w4RUviqGKXMg8xJEDhGIsG6T6smdWDcU5x2Um9Yx7P-kSw5J8AI2ZsLKEm&wd=&eqid=b5d9b6e200044577000000055ee9b112