这个博客已经过去了很久……

不过,你可以通过以下方式找到我

现在的位置: 首页 > 谈前端 > PhotoShop > 正文
制作你的font icon【fonticon制作教程】
2014年01月23日 PhotoShop ⁄ 共 564字 等你评论
  • 关于font face

  1. 使用font face样式从服务端加载字体到本地

  2. 图片转化为icon字体复用度大大提高

  3. 减少不必须请求,规避烦躁的css sprite

  4. 矢量图,视觉失真度很小

  5. 有利于seo

  6. 等等……

  • 创建字体

  1. 使用字体编辑软件,推荐FontCreator[crack版你懂得]

  2. 新建或者随便找个字体修改

    naming

  3. 字体命名,【Format】-【naming】设置字体名字,描述,以及版权信息等待

  4. 矢量图软件(ps、fw等)生成100*100或者200*200的png格式图片拖入字体编辑区,操作与ps类似,选择合适位置即可done

  5. 注意必须要有asc码为0078,也就是小写的x的占位,操作系统没有对它容错,为空会造成系统崩溃

  • 生成字体与部署

  1. Font Squirrel字体资源网站,提供了免费的在线字体生成工具:webfont-generator,或者链接

  2. 所生成的文件包里已经包含了.TTF、.EOT、.SVG、.WOFF等格式字体(兼容性覆盖各终端各版本浏览器),一并引入

  3. firefox和IE9不支持font face资源路径跨域访问,实在没法部署到同域,可以修改服务器配置链接(nginx的可以google),允许服务器跨域共享

  4. 支持gzip压缩

  • tamll

  • 效果可以,偶尔有字体加载失败情况(cdn稳定性有关),锯齿还是会有点儿,所以想高清,想Retina就对icon资源要求比较高了

友荐云推荐
×