ecshop模板css高级应用iconfont矢量图替换方法

矢量图标替换教程
首入：

http://www.ebingou.cn/t/font_1394079079_0082858.eot);
src:url(http://at.alicdn.com/t/font_1394079079_0082858.eot?#iefix) format('embedded-opentype'), url(http://at.alicdn.com/t/font_1394079079_0406601.woff) format('woff'), url(http://at.alicdn.com/t/font_1394079078_8924356.ttf) format('truetype'), url(http://at.alicdn.com/t/font_1394079079_06411.svg#iconfont) format('svg')
}

这一段代码 注释掉，如下

/*字体图标区域
@font-face {
font-family:fp-font;
src:url(http://at.alicdn.com/t/font_1394079079_0082858.eot);
src:url(http://at.alicdn.com/t/font_1394079079_0082858.eot?#iefix) format('embedded-opentype'), url(http://at.alicdn.com/t/font_1394079079_0406601.woff) format('woff'), url(http://at.alicdn.com/t/font_1394079078_8924356.ttf) format('truetype'), url(http://at.alicdn.com/t/font_1394079079_06411.svg#iconfont) format('svg')
}*/

然后在 style.css 很底部 添加 以下代码

@font-face {font-family: 'iconfont';
src: url('iconfont.eot'); /* IE9*/
src: url('iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('iconfont.woff') format('woff'), /* chrome、firefox */
url('iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
url('iconfont.svg#uxiconfont') format('svg'); /* iOS 4.1- */
}
.iconfont{
font-family:"iconfont" !important;
font-size:16px;font-style:normal;
-webkit-font-smoothing: antialiased;
-webkit-text-stroke-width: 0.2px;
-moz-osx-font-smoothing: grayscale; padding-left:20px
}

这样就可以了刷新页面看效果了。
CSS字体图标
1.先看一张图
看到用黑框标记的那一排小图标吧，一开始我以为是用了background或者img标签来制作的
但是我用firebug看了好久，都没找到跟图片扯上关系的东东。。。后来仔细看了下html结构和css样式

.fp-iconfont {
font-family: fp-font;
}

好吧，刚开始莫名其妙的，但是注意到两个我从来没了解过的东西
一个就是这个  ?  字，另一个就是 fp-font 这个字体，我在想：难道这些图标是一种字体
好吧，我把这个 ? 字在html结构里面去掉，果然那个小图标就没了。。。
然后呢，我把这个页面的css样式下载下来，一个名为 index.css 样式文件，内容如下

@font-face {
font-family: fp-font;
src: url(http://at.alicdn.com/t/font_1394079079_0082858.eot?#iefix) format("embedded-opentype"), url(http://at.alicdn.com/t/font_1394079079_0406601.woff) format("woff"), url(http://at.alicdn.com/t/font_1394079078_8924356.ttf) format("truetype"), url(http://at.alicdn.com/t/font_1394079079_06411.svg#iconfont) format("svg");
}
.fp-iconfont {
font-family: fp-font;
}
.hidden {
display: none;
}
.bold {
font-weight: 700;
}

...后面很多省略掉
这就很清楚了，确实引入了他们自定义的字体，因为字体文件一般就是eot、ttf之类的文件
原来他们用的是自定义的字体这玩意，我只能说比我们高级多了（当然我发现很多设计思想比我们高级的，这个图标字体充其量是我没接触过而已）
了解到是一种字体之后，我就百度了一下，看来这玩意有很多资料啊，看来真的是我out了
2.字体图标的优势
体积小， 快：如果是图片的话，还要下载图片呢，多张图片就要建立多次http连接下载
灵活 高：因为是字体嘛，所以还可以对字体设置各种样式啊，比如字体大小，颜 等等
如果是一张图片的话，要放大缩小，那就要做好几张图片了。。。
当然，有优势肯定就有劣势，不然谁还用图片呢。毕竟图片的多样 和丰富
字体是远远不能比的，但是对于整个系统而言，如果要用到很多标准化的小图标
就可以考虑做一套自己的字体图标了
3.如何使用字体图标
你得会制作字体（当然我不会，这个我是外行），但是百度了一下看起来也不是很复杂，
比如使用Keyamoon制作的一个Web应用程序IcoMoon，然后再转换成Web字体
因为我不会，也不太感兴趣，所以就找了个网站下了几个字体图标，演示一下怎么用
http://icomoon.io/  这个网站有很多免费的，可能就有你要的，我选择几个图标字体下载了，如图
然后这个网站很人 化，他把这些图片如何使用，都给你生成好了，包括样式文件和你下载的字体
然后你打开demo.html就可以看到效果了，页面会展示你刚才下载的图标，本质是字体而已
那么如果你自定义了字体，使用起来其实蛮简单的，给一段demo的代码就明白了

/** html 片段 **/
/** css 引入自定义字体 **/
@font-face {
font-family: 'icomoon';
src:url('fonts/icomoon.eot?-dgigik');
src:url('fonts/icomoon.eot?#iefix-dgigik') format('embedded-opentype'),
url('fonts/icomoon.woff?-dgigik') format('woff'),
url('fonts/icomoon.ttf?-dgigik') format('truetype'),
url('fonts/icomoon.svg?-dgigik#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
/** 使用自定义字体 **/
.icon-headphones {
font-family: 'icomoon';
}
/** 其实字体图标就是：将某个字映射到一个字上面,这里是映射到 e600 **/
/** 还记得之前我提到的那个生僻字吧,就是这么干的**/
.icon-headphones:before {
content: "\e600";
}

发现其实蛮简单的，就是先引入字体，然后定义一个class样式：指定使用你自定义的字体
完了之后，使用你定义的字映射到字体图标上，这里面耳机图标就是映射到 e600 上面
只不过这里面使用了 before 这个样式，指定在span标签里面插入 e600 这个
因此页面打开之后，就用字体图标展示了
总结：PC前端使用方法：
font-face声明字体

@font-face {
font-family: 'iconfont';
src: url('font_1427389280_171669.eot'); /* IE9*/
src: url('font_1427389280_171669.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('font_1427389280_171669.woff') format('woff'), /* chrome、firefox */
url('font_1427389280_171669.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
url('font_1427389280_171669.svg#iconfont') format('svg'); /* iOS 4.1- */
}

定义使用iconfont的样式

.iconfont{font-family:"iconfont";
font-size:16px;font-style:normal;}

挑选相应图标并获取字体编码，应用于页面
<i class="iconfont">&#33</i>

本文标签：

声明：本文由代码号注册/游客用户【夜蕾】供稿发布，本站不对用户发布的ecshop模板css高级应用iconfont矢量图替换方法信息内容原创度和真实性等负责。如内容侵犯您的版权或其他权益，请留言并加以说明。站长审查之后若情况属实会及时为您删除。同时遵循 CC 4.0 BY-SA 版权协议，尊重和保护作者的劳动成果，转载请标明出处链接和本声明内容。本文作者：夜蕾» /dmh/11704.html

很赞哦！ ()