制作自定义图标字体,html引用web字体
2016-07-12 14:26
537 查看
制作自定义图标字体,html引用web字体
1、安装Adobe Illustrator CS6(注:http://www.lookae.com/adobecc/)下载破解安装2、安装Adobe Photoshop CS6(注:http://www.cncrk.com/downinfo/39089.html)
3、下载save-ps-to-svg1.0.jsx(注:http://hackingui.com/design/export-photoshop-layer-to-svg/)
4、把save-ps-to-svg1.0.jsx拷贝到C:/Adobe Photoshop CS6/Presets/Scripts文件夹
5、把jsx装载到ps,流程:文件–脚本–浏览–选择刚拷贝的jsx,加载成功则会在脚本–Save as SVG
6、制作透明的图标形状,将文件后缀名改为gou.svg,接一来点击Save as SVG则会生成gou.svg.ai
7、但我们最终需要的是.svg文件,所以需要打开Adobe Illustrator CS6工具,再点击Save as SVG则会在文件夹中生成gou.svg.ai,gou.svg两个文件,按照此种方法,可以生成我们想要的任何图标文件
注:也可以直接在Adobe IIIustrator CS6中操作,步骤与PS一致
8、因我们的浏览器的兼容性,所以需要导成.svg,.ttf,.eot,.woff等字体图标文件,我借用在线网站来生成(https://icomoon.io/app)导入生成的svg文件,然后选择,最后下载打包文件,则得到我们期望以久的.svg,.ttf,.eot,.woff文件啦
9、就可以按照字体的使用方式,进行调用操作啦
总结:后面操作流程简单,但前面安装ps、ai稍微麻烦一些,祝你好运!!!!!!!!!!!
相关文章推荐
- java-WEB中的监听器Lisener
- GUI - Web前端开发框架
- Extjs4.0 最新最全视频教程
- MyEclipse Web Project转Eclipse Dynamic Web Project
- axis备忘
- 创业如何选择WEB开发语言
- Erlang实现的一个Web服务器代码实例
- 防止网页脚本病毒执行的方法-from web
- 自学成才的秘密:115个 web Develop 资源
- 使用批处理修改web打印设置笔记 适用于IE
- Apache Web让JSP“动”起来
- web下载的ActiveX控件自动更新
- 推荐六款WEB上传组件性能测试与比较第1/10页
- 关于三种主流WEB架构的思考
- Icon Craft-完美的Favicon制作工具下载
- 使用 Iisext.vbs 列出 Web 服务扩展文件的方法
- 使用 Iisext.vbs 删除 Web 服务扩展文件的方法
- 使用 iisext.vbs 禁用 Web 服务扩展的方法
- 用vbs 实现从剪贴板中抓取一个 URL 然后在浏览器中打开该 Web 站点
- web标准知识——从p开始,循序渐进