图形字体的概述

下载 IcoMoon-Free

CSS使用用法示例

初始化声明：
@font-face {
font-family: 'IcoMoon-Free';
src: url('../IcoMoon-Free.ttf?-b7qzp2') format('truetype');
}

调用：
.icon {
font-family: 'IcoMoon-Free';
-webkit-font-feature-settings: "liga";
-moz-font-feature-settings: "liga=1";
-moz-font-feature-settings: "liga";
-ms-font-feature-settings: "liga" 1;
-o-font-feature-settings: "liga";
font-feature-settings: "liga";
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

定义字体：
.icon-home:before{content: "\e900";}
.icon-go:after{content: "\ea50";}

自己动手制作图形字体，以便于在网页上使用

1、下载软件 FontCreator 5.6
百度搜索找到即可下载
2、安装略过
3、打开 FontCreator ，执行：文件 -> 打开 -> 字体文件 （快捷键 Ctrl+O） ，即可打开该字体文件包含的所有字体。
4、在最后面点鼠标右键 -> 添加 ，即可添加字体。
5、在原有的字体上点右键 -> 复制，再 粘贴 到刚刚新建的字体上， 注意右上角有一个绿色的小圆点，还带了一个细框，表示字体是符合要求的。
6、双击进入字体编辑，在规定的范围内自己绘制字体即可。
7、也可使用外部导入字体，操作： 在字体列表中找到字体框，鼠标右击在弹出的快捷菜单中选“导入图像” -> “载入” ，选择合适的图片导入，点“生成”即可。
注意：导入的图片最好是 jpg，白色底黑色图，这样最容易识别。 还可以调动阙值，越大识别强度越高。
8、指定调用码，调用码是16进制代码。先查看原版最后一个字体的编码：鼠标右键 -> 属性 -> 映射，找到映射区块，在“值”处填写$符号和16进制调用值，例如：$EAEB ，再点“添加” 即可。
注意：若指定的代码可用，则会顺利通过，否则会弹出警告框。顺利通过以后，字体块左上解的绿色小圆点上的细框消失了，标识与其它原版的一样。这样就可以正常使用了。