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

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

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

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">&#x33;</span>

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

差异主要在

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

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

css引入本地字体文件,关于css中引入字体文件
关于css中引入字体文件 css样式代码: @font-face { font-family: Lovelo-Black;//定义font的名字 src: url(font/Lovelo Black. ...
html引入css报错,html中引入css样式的方法总结
CSS是用来控制网页数据的表现,可以使网页的表现与数据内容分离.要想让CSS对网页内容有效果,必须将CSS代码引入网页,使网页更具有美观性,有动感的效果,那么如何实现引入css呢?今天就来给大家总结! ...
HTML5中引入JS
在页面中引入JS <script src="jquery-1.10.2.min.js" type="text/javascript"></sc ...
html中设置字体字型,html中如何在font中设置字体样式（粗体斜体等）
html> 字体加粗用<b>加粗字体:加粗用<strong>加粗字体:加粗用CSS font-weight 加粗 normal(400), bold(700) ...
java中如何设置字体样式_如何在JAVA中设置字体样式和大小？
我是新来的Java和无法弄清楚如何格式化我的代码是这样的: 字体"宋体"字体大小"9"大胆如何在JAVA中设置字体样式和大小? 我想整个段落的格式化文本.我真的 ...
字体图标 fa fa html5,前端引入icon的方法（iconfont,fontawesome）
前端项目中,经常需要从外引入一些icon图标到项目中,我经常使用的两个icon库就是Iconfont阿里巴巴矢量库,以及font-Awsome.接下来我稍微讲一下这两种的使用方法. Iconfont阿 ...
全局vue中修改字体样式苹方字体微软雅黑亲测可用
1.下载所需要的字体,.ttf格式本文以(PingFang.ttf 为例) 底下将会附加苹果方体-简易黑体 PINGFANG MEDIUM.tff 可自行下载其他字体样式,全局引用,方便快捷. 2.在 ...
html中引入CSS样式表的3种方式
1. 引入CSS样式表(书写位置) 1.1 三种样式表总结(位置) 样式表优点缺点使用情况控制范围行内样式表书写方便,权重高没有实现样式和结构相分离较少控制一个标签(少) 内部样式表 ...
vue项目引入字体样式
1.先下载好需要的字体样式,下载好的应该是个.ttf文件 2.在asset中创建fonts文件夹,将字体样式文件放进去,然后再到里面创建font.css文件 3.font.css文件里面进行引用 @f ...

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

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

最新文章

热门文章