1.图标的制作:
原料是需要有标准的svg图标
知乎引导教程:http://www.zhihu.com/question/29054543
实际操作的第三方网站:https://icomoon.io/app/#/select,类似网站还有http://iconfont.cn(隶属阿里,需要注册)
在网站上传svg文件,然后可以下载到打包的其他格式的文字文件及对应的demo;
2.使用
/* 字体声明部分,声明为jdf*/
@font-face {
font-family: 'jdf';
src: url('fonts/jdf.eot?cfnq6a'); /* IE9*/
src: url('fonts/jdf.eot?cfnq6a#iefix') format('embedded-opentype'),/* IE6-IE8 */
url('fonts/jdf.ttf?cfnq6a') format('truetype'),/* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
url('fonts/jdf.woff?cfnq6a') format('woff'), /* chrome、firefox */
url('fonts/jdf.svg?cfnq6a#jdf') format('svg');/* iOS 4.1- */
font-weight: normal;
font-style: normal;
}
调用:
.class{
/* use !important to prevent issues with browser extensions that change fonts */
font-family: 'jdf' !important;
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;
}
不考虑ie67的话可以使用伪类,完全使用样式即可搞定
.icon-c:before {
content: "e900";
}
如果是兼容ie67,需要在dom中写入文字代码,类似<i
class="c_iconfont"></i>
其中的"900"字符再制作流程中是这个网站是用递增的方式给生成的,类似同样的图标,每构建一次,编号可能不一样的,所有再次"回炉"删减,再次打包下来的时候注意这个坑!
这个代码可以查看最终打包下载文件中的demo样式里面的content值,如果不确定,可以在字体在线生成操作流程中的最后一步每个icon上都有一个getcode按钮点击查看对应的详细信息
一些特殊处理:
a.如果ie7下右侧出现小方框,那么需要设置display: block;
b.如果锯齿特别严重,webkit支持边缘模糊-webkit-text-stroke- 0.2px;
c.android和ios也都有响应的方法来使用icon字体图标,具体使用自行查资料
3.如果想从电脑上的字体中或者设计人员提供的psd配套的字体中挑几个已经在使用的字体制作城icon-font,可以走以下流程
a.把整个字体文件进行格式转换,转成其他几种web支持的格式,需要借助第三放网站,这里有两个
http://www.font2web.com/(字体文件不得超过512k)
https://www.web-font-generator.com
字体需要是ttf格式,未探寻fon格式的字体转换格式的方法
b.上步骤得到了.eot,.ttf,.woff,.svg,虽然已经得到了web字体,但是他们依然非常大,三五兆,七八兆左右.依然不适合使用.
但是因为得到了svg文件,可以把svg传到网站https://icomoon.io/app/#/select,然后网站有"挑字"的操作,把需要使用的几个字或者图标挑出来,生成自定义的字体文件,这样得到的一套字体文件就非常小了,可以使用了.
4.png转svg简易流程(流程只是跑通,并不完美,欢迎psai大神进一步完善):
ps:
放大--魔术棒选中--右键新建工作路径--路径面板--前景色填充--裁剪--导出--ai
ai:
放大,锚点密集处反复用平滑工具拖动--特殊锚点使用白箭头选中后拖拉--选中路径,前景色面板取色填充--导出svg,合并path纯色--完毕