怎么玩耍图标字体.

使用@font-face与icomoon制作个性化网页图标

最新推荐文章于 2021-12-09 08:31:59 发布

转载最新推荐文章于 2021-12-09 08:31:59 发布 · 56 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/linjilei/p/5299152.html

本文介绍了如何利用CSS3的@font-face特性及icomoon在线图标生成工具，实现定制化网页图标，减少HTTP请求并提高网页加载速度。

网站上的图标越来越多,图标颜色也是越来越多,用 Sprite 来做也难免力不从心.

CSS3.0的出现,带来了 @font-face; 可以将自己定义的Web字体嵌入到网页中,既减少了 http 请求,也能做出各种各样大小不一颜色不一的图标.

先去 icomoon 制作出属于自己的图标字体文件.

然后放到项目目录中,通过 css 的url 去引用它.

@font-face {
　　//　　定义名字
    font-family: 'icomoon';
    src: url('fonts/icomoon.eot');
    src: url('fonts/icomoon.eot') format('embedded-opentype'),
    url('fonts/icomoon.ttf') format('truetype'),
    url('fonts/icomoon.woff') format('woff'),
    url('fonts/icomoon.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}
.web-font{
　　//　　调用字体 
    font-family: 'icomoon';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

转载于:https://www.cnblogs.com/linjilei/p/5299152.html