您的位置：首页 > 其它

@font-face制作小图标的实践

2015-06-18 17:01 423 查看

1、为啥要用font-face制作小图标

1）适用性：一个图标字体要比一系列的图像要小，一旦字体图标加载完，图标则会立刻显示出来，不需要去下载一个图像。

2）可扩展性：可以使用font-size对图标进行大小设置，这使得能够随时输出不同大小的图标；但如果是图片，则需要为不同大小的图片输出不同的文件。

3）灵活性：可以为图标添加任何文字效果，并且可以在任何背景下展示。

4）兼容性：网页字体支持所有现代浏览器，包括IE低版本。

2、实现步骤

首先，将SVG转换成web字体。使用网站：Icomoon

点击‘Import Icons’按钮导入需要转换为web字体的图标。选中后点击 ‘Generate Font’按钮将web字体下载下来。

下载文件中有个demo.html，打开文件，可以看到不同的图标对应的通字符：

其次，调用字体。

声明@font-face:

@font-face{
font-family: 'icomoon';
src:url('fonts/icomoon.eot'); /* IE 专用*/
src:url('fonts/icomoon.eot?#iefix') format('embedded-opentype'), /* IE*/
url('fonts/icomoon.woff') format('woff'), /* chrome,firefox,IE9+,safari,opera */
url('fonts/icomoon.ttf') format('truetype'), /* IOS4.2+ */
url('fonts/icommon.svg') format('svg'); /* IOS */
font-weight: normal;
font-style: normal;
}

使用字体：

[class ^="icon-"],[class*=' icon-']{
font-family: 'icomoon';
}
.icon-1:before{
content: "\e600";
}

测试代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>font-face 测试页面</title>
<style>
@font-face{
font-family: 'icomoon';
src:url('fonts/icomoon.eot'); /* IE 专用*/
src:url('fonts/icomoon.eot?#iefix') format('embedded-opentype'), /* IE*/
url('fonts/icomoon.woff') format('woff'), /* chrome,firefox,IE9+,safari,opera */
url('fonts/icomoon.ttf') format('truetype'), /* IOS4.2+ */
url('fonts/icommon.svg') format('svg'); /* IOS */
font-weight: normal;
font-style: normal;
}

[class ^="icon-"],[class*=' icon-']{font-family: 'icomoon';}
.icon-1:before{content: "\e600";}
.icon-2:before{content: "\e601";}
.icon-3:before{content: "\e602";}
.wrap ul{list-style: none;}
.wrap ul li{line-height: 28px;font-size: 28px;}
</style>
</head>
<body>
<section class="wrap">
<ul>
<li class="icon-1">第一个li</li>
<li class="icon-2">第二个li</li>
<li class="icon-3">第三个li</li>
</ul>

</section>
</body></html>

效果图：

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

标签：

相关文章推荐

新的分享

章节导航