第一步

在AI中画好矢量图,或者是在PS中将纯色的图片存成PNG格式,最好是放大很多倍的纯色图片。因为导入到fontcreator中会显得很小,如果不是矢量,图片拉大后就会有锯齿状。

第二步

选中AI中的矢量图形复制,打开fontcreator,选择一个已经安装过的字体或是选择新建工程,这里采用新建工程来演示。

一般前几个空着的不要动,选择A后点击插入字形就会有这样一个空白的格子,选择这个空白的格子右键

右键然后选择属性,代码点里可以从$E000开始往后写,写完后记得点击右边的闪电标志,进行检索匹配,如果没有被占用则这个代码点就可以用,名称里可以填写自己想要填写的名字。最后按应用,然后双击这个空格开始编辑,记得编辑完后,在属性里将左右边轴设置为0,这样才可以在页面显示出来。

完成后的状态如下

该字体的unicode码是$F112,名称是NAME
做完之后导出字体,在fontcreator中可以导出woff及otf格式的字体,如果需要支持其他浏览器,则选择线上转换字体格式。

第三步

在css中引用字体

@font-face {
font-family: 'emotion';
src: url('emotion.eot'); /* IE9*/
src: url('emotion.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('emotion.woff') format('woff'), /* chrome、firefox */
url('emotion.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
url('emotion.svg#svgFontName') format('svg'); /* iOS 4.1- */
}
.equip-icon{
font-family:"emotion";
}

引用完之后可以在CSS里使用伪类这样写

.equip-icon:before {
content: "\F112";
}

实际页面效果如图,忽略底下的蓝色圆,这块黑色的才是。( ̄▽ ̄”)

然后就愉快的使用吧,iconfont适合纯色的小图标,个人觉得比较适合移动端界面的设计。

图标字体(IconFont)制作

图标字体(IconFont)介绍

图标字体(IconFont)现在越来越被广泛使用,大大提高了网页的多样化,解决了视网膜屏幕失真的问题。
据说微软从IE4开始支持的这个私有方法(@font-face),后来W3在CSS2中也引入这个方法,但是后来CSS2.1又被删除了,真是遗憾。直到CSS3,又一次引入,这真是个好消息。
详细见:http://www.w3.org/TR/css3-fonts/

不过经常会被问到,移动端用没问题,PC上IE可以了,我可以负责任的说:当然可以。原因上面说了,@font-face最初是微软IE里的私有方法,所以从IE4开始已经支持(我没测过哦),不过现在网站最低支持到IE6而且IE6已被优雅降级到可以正常浏览、使用网站,UI还原度已不值得花大力度去做兼容了,况且在实际项目中IE6中使用确实是没问题的。

一句话,现在可以放心大胆的在PC、移动端使用图标字体(Iconfont)了。
了解更多可看国内最大最全的适量图标库阿里IconFont网站。

图标字体(Iconfont)制作

一. IcoMoon

这个教程一搜一大把,是很方便快捷的一种方式,提供上传、编辑或者选择IcoMoon-Free下载可以直接拿来用了。
网址:https://icomoon.io/app/

二. 阿里IconFont

和IconFont提供类似功能
网址:http://iconfont.cn/

上面两种方法优点是方便快捷,但或许有时候并不能满足你的个性化需求。
比如:仅需要替换一个已经有图标并保持字符代码不变或者更多个性化需求的,或许你可以看看下面的方法。

三. 字体编辑软件制作

    1. 首先准备一下软件,除了PS,AI,还需要High-Logic FontCreator。 FontCreator 是一个强大的字体编辑软件。 官网下载:http://www.high-logic.com/font-editor/fontcreator/download.html
    2. PS导出图标路径到AI (图标一定要是路径)

    3. AI打开导出的图标路径(打开有可能是空白,可以全选找到并添上颜色)

    4. 打开FontCreator,新建或打开字体

    5. 添加图标字形或者双击要编辑的图标字形

    6. 从AI里复制图标路径到FontCreator里,调整大小位置
      可参考(http://mux.alimama.com/posts/1025)

    7. 导出字体,只有TTF和WOFF两种格式

    8. EverythingFonts把TTF转换SVG和EOT, TTF2SVG TTF2EOT

    9. 好了,收工。

fontcreator制作iconfont(包含两个教程)的更多相关文章

  1. 使用CocosSharp制作一个游戏 - CocosSharp中文教程

    注:本教程翻译自官方<Walkthrough - Building a game with CocosSharp>,官方教程有很多地方说的不够详细,或者代码不全,导致无法继续,本人在看了G ...

  2. Expression Design与Blend制作滚动的小球动画教程

    原文:Expression Design与Blend制作滚动的小球动画教程 一,开发工具 Microsoft Expression Design & Blend 4.0 (3.0亦可). 这两 ...

  3. 客户端一个http连接包含两个方向,一个是这个http连接的输入,另一个是这个http连接的输出。

    1.客户端一个http连接包含两个方向,一个是这个http连接的输入,另一个是这个http连接的输出. 利用httpclient进行ip地址和端口号连接后,http的输出端作为http请求参数设置.h ...

  4. 一个相对通用的JSON响应结构,其中包含两部分:元数据与返回值

    定义一个相对通用的JSON响应结构,其中包含两部分:元数据与返回值,其中,元数据表示操作是否成功与返回值消息等,返回值对应服务端方法所返回的数据. public class Response { pr ...

  5. [leetcode]159. Longest Substring with At Most Two Distinct Characters至多包含两种字符的最长子串

    Given a string s , find the length of the longest substring t  that contains at most 2 distinct char ...

  6. 算法 - 给出一个字符串str,输出包含两个字符串str的最短字符串,如str为abca时,输出则为abcabca

    今天碰到一个算法题觉得比较有意思,研究后自己实现了出来,代码比较简单,如发现什么问题请指正.思路和代码如下: 基本思路:从左开始取str的最大子字符串,判断子字符串是否为str的后缀,如果是则返回st ...

  7. linux用grep查找包含两个关键字的命令

    linux用grep查找包含两个关键字的命令 http://zhidao.baidu.com/link?url=VsFxeJXmU7W7hy1UH7eT6QAbUsVz9Ru2ABPuWYHWm4kB ...

  8. 一个HTTP连接是包含两部分的,请求报文和响应报文这俩组合起来才是一次完整的HTTP请求,并不会单独显示请求报文或者响应报文

    一个HTTP连接是包含两部分的,请求报文和响应报文这俩组合起来才是一次完整的HTTP请求,并不会单独显示请求报文或者响应报文. 2.注意看,一次HTTP请求,是包括这两部分的

  9. 如何制作一本《现代Javascript教程》EPUB电子书

    制作一本<现代Javascript教程>电子书学习使用 计划学习JavaScript的同学可以看过来,今天就推荐个学习JavaScript的免费教程. 教程文档来源于 https://zh ...

随机推荐

  1. 进入meta模式关闭背光灯

    1. 修改文件: mediatek/platform/mt6582/lk/boot_mode.c 2. 修改内容: boot_mode_select()函数: mt65xx_blacklight_of ...

  2. I.MX6 initramfs.cpio.gz.uboot unpack

    /********************************************************************************* * I.MX6 initramfs ...

  3. 原生js实现滚动条

    var SimulateScroll = (function(){ var oParent = document.getElementById('wrap-scroll-bar'), oBox = d ...

  4. 问题:https与http有什么区别啊?

    HTTPS(Secure Hypertext Transfer Protocol)安全超文本传输协议  它是一个安全通信通道,它基于HTTP开发,用于在客户计算机和服务器之间交换信息.它使用安全套接字 ...

  5. 《Android深度探索HAL与驱动开发》第一章阅读心得

    首先了解到Android系统架构是由四层构成:其中第一层是Linux内核,他的作用是负责Linux的驱动程序以及内存.进程.电源等管理操作:第二层是C/C++代码库,也就是Linux下.so的文件:第 ...

  6. js MATH

    MATH Math 对象用于执行数学任务. 无需创建它,通过把 Math 作为对象使用就可以调用其所有属性和方法. Math 对象属性 var a=Math.E; //输出2.718281828459 ...

  7. Codeforces Round #170 (Div. 2)

    A. Circle Line 考虑环上的最短距离. B. New Problem \(n\) 个串建后缀自动机. 找的时候bfs一下即可. C. Learning Languages 并查集维护可以沟 ...

  8. LeetCode() Merge Intervals 还是有问题,留待,脑袋疼。

    感觉有一点进步了,但是思路还是不够犀利. /** * Definition for an interval. * struct Interval { * int start; * int end; * ...

  9. 自定义响应结构 Json格式转换 工具类

    import java.util.List; import com.fasterxml.jackson.core.JsonProcessingException; import com.fasterx ...

  10. Docker学习(2)

    列出本地镜像,位于/var/lib/docker下 ➜ ~ sudo docker images REPOSITORY TAG IMAGE ID CREATED VIRTUAL SIZE ubuntu ...