ccs3中icon转换为字体的方法

时间:2023-03-10 04:09:55
ccs3中icon转换为字体的方法

小图标转换为字体有几大优点

  1. 文件小,一般50k以内
  2. 避免了加载多个icons,减少了加载次数,有利于页面优化。
  3. 兼容性很好,可以随便放大缩小,都能正常显示。
  4. 维护起来也很简单,只用找到这个字体文件(比如.ttf文件),修改里面的某个图标即可。

制作方法

  首先,用ps或直接用矢量图软件制作单个icon,制作好后保存为ttf格式,如图:

  ccs3中icon转换为字体的方法faq.ttf

  然后,打开字体编辑器,比如FontCreator,新建字体myfonts。

  ccs3中icon转换为字体的方法

  ccs3中icon转换为字体的方法

  需要添加一个字体,可以右击——>插入,然后“导入图像”,即做好的矢量图片(位图效果不好)。

  ccs3中icon转换为字体的方法

  对图像做相应的调整,直到合适为止。然后保存为myfont.ttf即做好了ttf字体文件。

字体格式转换

  为了兼容不同的浏览器,需要制作不同的字体格式。比如IE只支持eot格式,便可以用格式转换工具,将ttf转换成其他格式。比如ttf-->eot在线转换:

  http://ttf2eot.sebastiankippe.com/

  ccs3中icon转换为字体的方法