字体及字体图标

<style>
@font-face {
font-family: 'iconfont';
src: url('foot/iconfont.eot');
src: url('foot/iconfont.eot?#iefix') format('embedded-opentype'),
url('foot/iconfont.woff') format('woff'),
url('foot/iconfont.ttf') format('truetype'),
url('foot/iconfont.svg#iconfont') format('svg');
}
/*定义一个样式,使用自定义的web字体*/
.myFont{
font-family: iconfont;
}
/*星星*/
.stars::before{
content: "\eb9a";
color: red;
font-size: 50px;
}
/*三角形*/
.triangle::before{
content: "\eb99";
color: blue;
font-size: 50px;
}

</style>
</head>
<body>
1.得自定义想生成对应字体文件的内容
2.使用网络资源生成web字体
3.使用
a.定义自定义字体
b.定义样式使用自定义字体
c.指定样式,调用样式
<span class="myFont">开发人员可以为自已的网页指定特殊的字体,
无需考虑用户电脑上是否安装了此特殊字体,从此把特殊字体处理成图片的时代便成为了过去。
它的支持程度比较好,甚至IE低版本浏览器也能支持</span>

<!--使用字体图标的时候,得自己指定你想使用的图片-->
<span class="myFont stars"></span>
<span class="myFont triangle"></span>
<span class="myFont">&#xe642;</span>

猜你喜欢

转载自www.cnblogs.com/lujieting/p/10230715.html