得到压缩包之后,我们得知字体图标 本质就是 字体文件。 注意这个压缩包不要删掉,我们后面还有用的。

1.首先把 fonts文件夹放入我们 根目录下 。

ios内嵌h5文字变黑 h5引入字体_html

2. html标签内里面添加结构

ios内嵌h5文字变黑 h5引入字体_css_02

<span>这里粘贴刚复制的图标</span>

3.在样式里面声明字体: 告诉别人我们自己定义的字体(一定注意字体文件路径的问题)

@font-face {
     font-family: 'icomoon';//这个可以任意取,但是应与后面相对应eg:yxingguang
     src:  url('fonts/icomoon.eot?7kkyc2');
     src:  url('fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'),
       url('fonts/icomoon.ttf?7kkyc2') format('truetype'),
       url('fonts/icomoon.woff?7kkyc2') format('woff'),
       url('fonts/icomoon.svg?7kkyc2#icomoon') format('svg');
     font-weight: normal;
     font-style: normal;
   }

4.给盒子使用字体

span {
		font-family: "icomoon";//这个命名应与上面相同,font-family: "yxingguang";
	}

5.追加字体图标

如果工作中,原来的字体图标不够用了,我们需要添加新的字体图标,但是原来的不能删除,继续使用,此时我们需要这样做,把压缩包里面的selection.json 从新上传,然后,选中自己想要新的图标,从新下载压缩包,替换原来文件即可。

ios内嵌h5文字变黑 h5引入字体_ios内嵌h5文字变黑_03

拓展 常见字体格式

不同浏览器所支持的字体格式是不一样的,我们有必要了解一下有关字体格式的知识。

①TureType(.ttf)格式

.ttf字体是Windows和Mac的最常见的字体,是一种RAW格式,支持这种字体的浏览器有IE9+、Firefox3.5+、Chrome4+、Safari3+、Opera10+、iOS Mobile、Safari4.2+;

②OpenType(.otf)格式

.otf字体被认为是一种原始的字体格式,其内置在TureType的基础上,支持这种字体的浏览器有Firefox3.5+、Chrome4.0+、Safari3.1+、Opera10.0+、iOS Mobile、Safari4.2+;

③ Web Open Font Format(.woff)格式

woff字体是Web字体中最佳格式,他是一个开放的TrueType/OpenType的压缩版本,同时也支持元数据包的分离,支持这种字体的浏览器有IE9+、Firefox3.5+、Chrome6+、Safari3.6+、Opera11.1+;

④Embedded Open Type(.eot)格式

.eot字体是IE专用字体,可以从TrueType创建此格式字体,支持这种字体的浏览器有IE4+;

⑤SVG(.svg)格式

.svg字体是基于SVG字体渲染的一种格式,支持这种字体的浏览器有Chrome4+、Safari3.1+、Opera10.0+、iOS Mobile Safari3.2+;了解了上面的知识后,我们就需要为不同的浏览器准备不同格式的字体,通常我们会通过字体生成工具帮我们生成各种格式的字体,因此无需过于在意字体格式间的区别差异。

ios内嵌h5文字变黑 h5引入字体_css_04