我们经常会在网页中看到很多小图标,其实这些图标大多数都不是图片,而是字体图。
制作字体图总共有三种办法:
第一种: CSS Sprite(美其名曰雪碧图)
第二种: font + HTML 进行制作
第三种: CSS+ font 进行制作
这里为大家讲解一下前两种的制作方式:
第一种:
主要使用两个属性,一个是background-image,和另一个属性backgroun-position.通过改变图片的位置,实现在对应的位置显示对应的图片。
优点:
1-节省了文件的体积和HTTP请求的次数(一般保存为png-24)
2-可以设置各种颜色的小图标
难点:
1-需要预先知道小图标的大小
2-需要知道小图标之间的距离
3-需求变更,维护很麻烦。
第二种:
需要引入字体通过@font-face;
第一步:登陆这个网站https://icomoon.io/app/#/select/font 这个网站
Import to Set导入(设计师的)SVG图片。
第二步:登陆这个网站https://icomoon.io/app/#/select/font (目前国内使用最多的字体网站),点击download下载字体图文件包。
下载下来效果
选择里面.woff文件
将@font-face中的src路径替换,或者在工程中,SRC路径引入.woff文件。【下面代码中概述】
第三步
接下来我们先写写代码:
首先是CSS代码啦~~
这里我们要知道一个引入字体模式长什么样子:
@font-face{
Font-family:<family-name>;
src:[<url>[format<string>#]?|<font-face-name>]#;
Font-weight:<weight>;
Font-style:<style>
}
举例:
@font-face{
font-family:”font-name”;
src:url(“../fonts/font-name.eot”);
src:url(“../fonts/font-name.eot”)formate(“embedded-opentype”),
url(“../fonts/font-name.woff”).formate(“woff”),
url(“../fonts/font-name.svg”).formate(“svg”);
font-weight:normal;
font-style:normal;
}
上面的font-name是字体的名字,这里可以自己随便取(开玩笑的,名字尽量有意义就可以)。src是需要引入的字体的路径,就在上面进行了说明。Font-weight以及Font-style如果没有什么特殊的要求,一般都设置成normal。
这里要注意一点:浏览器兼容,如果需要 IE6兼容的话eot后面要加?#iefix如下面所示(脑补箭头指向了下方)
@font-face{
font-family:”font-name”;
src:url(“../fonts/font-name.eot”);
src:url(“../fonts/font-name.eot?#iefix”)formate(“embedded-opentype”),
url(“../fonts/font-name.ttf”).formate(“truetype”),
url(“../fonts/font-name.svg”).formate(“svg”);
font-weight:normal;
font-style:normal;
}
第四步
这里还是CSS代码啦~~
我们需要在类里面,引入我们在网站上下载下来的字体。
.font-name{
Font-family:font-name;
Font-weight:normal;
Font-style:normal;
Font-size:16px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing:grayscale;
}
对于Font-family这个字体,当然是需要引入,我们起名字那个font-name啦,要不字体不是白白下载了,然后在font-name类中(这个是HTML里面的Class喔,别搞混了),设置你需要的属性,大纲已经写在上面了,请自行修改。
第五步
找我们的页面,使用字体图~~~~
这里记住:字体前面一定要加上¥#X 才可以显示
<link rel=”stylesheet” href=”CSS路径”>
<body>
<ul>
<li><a href=””><i class=”font-name”></i></a></li>
<li><a href=””><i class=”font-name”></i></a></li>
<li><a href=””><i class=”font-name”></i></a></li>
<li><a href=””><i class=”font-name”></i></a></li>
</ul>
</body>
对于xf048,xf049这些东东,你只需填到对应的元素里面即可,他们的值是怎么来的???这个呀,要不你再看看原来那个网站,是自己生成的啊,而且你还可以修改吆。
第三种:
CSS+font(CSS引入font字体,主要是利用:before属性在元素前面加内容,用\进行转译,然后再HTML中添加字体设置的类)
这里就不在讲述了,有兴趣同学可以自己搜索相关资料。
本文是作者自己在项目开发中心得体会,无任何广告宣传,转载请注明出处。