您的位置：首页 > 其它

矢量字体图标

2015-05-19 10:30 148 查看

1、首先使用 iconfont.cn在线生成矢量图标

2、然后，将生成的矢量字体下载到本地，使用font-face在网页上定义该矢量图标对应的字体,最后引用该自定义的字体。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>矢量字体图标应用</title>
<style>
/*font-face声明字体*/
@font-face {
font-family: 'iconfont';
src: url('vectorimg/webfont.eot');
src: url('vectorimg/webfont.eot?#iefix') format('embedded-opentype'),
url('vectorimg/webfont.woff') format('woff'),
url('vectorimg/webfont.ttf') format('truetype'),
url('vectorimg/webfont.svg#webfont') format('svg');
/* IE9*/
/* IE6-IE8 */
/* chrome、firefox */
/* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
/* iOS 4.1- */
}
/*定义使用iconfont的样式*/
.iconfont{
font-family:"iconfont";
font-size:28px;font-style:normal;
-webkit-text-stroke-width: 0.2px;  /*防止边缘锯齿状 */
-webkit-font-smoothing: antialiased;
}

</style>
</head>
<body>

<i class="iconfont">欢迎您</i>

</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航