第10节_我的日记本开发手记（10）—

各位朋友大家好，这小结我们主要实现绘制自己的图标字体，像使用字体那样使用我们的小图标，不但可以调整大小，而且可以调整颜色，下看一下最终效果，最终效果如图1所示。

一、FontCreatorPortable 绘制自己的图标字体

今天除了我们平时使用的软件外，还要学习一个新的软件FontCreatorPortable。这款软件是一款专业的字体设计编辑工具。大家多多少少应该都知道一点版权的问题吧，像电影什么的有影视版权，logo图标也有版权，图片也有版权。那么你们知道字体也是有版权的吗？相信很多小伙伴们还不知道吧，我也是最近这段时间才得知的。那么在生活中也存在着一个专门设计字体的行业工作者，它们的工作就是设计出各种各样好看的字体。它的使用界面十分简洁，使用起来也很方便。就算你是新手朋友，也能轻松的上手操作。这款软件目前是可以用来创建、编辑和转换OpenType、TrueType和Web字体，拥有强大的转换脚本和绘图功能，能够轻松的创建和显示所有字体。
首先我们启动软件，他长这个样子，如图2所示。

1. 新建工程

单击File->new，弹出New Project对话框，设置Font family name为MythFont，其它默认如图设置。软件为我们默认设置了一些小图标（如图3）。

这些小图标对我来说没用，我们全部把它删除。选择所有图标，只保留第一个图标，在图标上点击右键选择delete删除选择的图标，如图4所示。

2.绘制小图标

单击图标栏中insert glyphs图标（如图5所示），

弹出Insert Glyphs对话框，设置如图6，单击ok。

在软件的图标区域会多出一个图标如图7所示，

双击这个图标进入编辑模式，我们可以从中绘制自己的图标。绘制图标常用的有三种方法：
一是使用软件自带的图标库。 在软件的最左侧有一个图标库，找到我们需要的图标，按住鼠标左键拖入我们的编辑区域，一个图标叫绘制ok了。
二是使用软件的绘制功能进行自己绘制。 在软件的上方有一些图标的绘制工具按钮，我们选择对应的按钮，在编辑去进行绘制即可。
三是导入其它软件绘制的图标。 单击图标栏中Import image图标，打开对话框，选择做好的图片导入，弹出的属性设置框（如图8所示）默认设置就行。

3. 设置小图标属性

绘制完小图标后，在小图标显示列表中选择我们绘制的图标，单击右键选择Glyph Properties，打开属性设置对话框，选择code-points后面的第一个select unicode character图标，弹出select character对话框，unicode blocks 中选择$0100，characters中选择$0101（如图10）。

然后再Glyph Properties中name输入名称；left side bearing 设置0；right side bearing设置0。最后设置如图11所示。

我设置了一些日记本开发中用到的图标，如图12所示。

4. 导出图标字体

菜单栏中单击File->Export Font->Export Desktop Font(ttf/otf)，弹出设置对话框，设置属性如图12所示，单击保存即可。这样我们就得到了一个myfont.ttf字体库。

二、CSS样式文件

css代码如下，@font-face中src设置的是我们刚才导出的字体库。.mythicons-bold:before {content: “\0101”;}中的“\0101”与我们在图标select character设置属性中的“$0101”值对应。

@font-face {font-family: "mythfont";src: url(mythfont.ttf)
}
.myth-icon {font-family: "mythfont";text-align: center;}
.mythicons-bold:before {content: "\0101";}
.mythicons-italic:before {content: "\0102";}
.mythicons-linethrough:before {content: "\0103";}
.mythicons-title:before {content: "\0104";}
.mythicons-outoforder:before {content: "\0105";}
.mythicons-order:before {content: "\0106";}
.mythicons-pending:before {content: "\0107";}
.mythicons-reference:before {content: "\0108";}
.mythicons-code:before {content: "\0109";}
.mythicons-pic:before {content: "\010A";}
.mythicons-video:before {content: "\010B";}
.mythicons-table:before {content: "\010C";}
.mythicons-link:before {content: "\010D";}
.mythicons-template:before {content: "\010E";}
.mythicons-logo:before {content: "\010F";}

三、HTML代码调用图标字体

在html中先引入css样式，然后再对应设置，代码如下：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>markdown编辑器</title><link rel="stylesheet" href="myth.css"><style type="text/css">.EditMainBox {height: 100%;position: relative;}.header {height: 90px;width: 100%;top: 0;position: absolute;}.content {width: 100%;background-color: lime;top:90px;bottom:20px;position: absolute;overflow: auto;}.footer{width:100%;height:20px;position:absolute;bottom:0;background-color: red;}.titleBox{padding: 3px 5px;position: relative;height: 33px;}.m-input{border: 1px solid #ccc;}.titleInput{position: absolute;right: 80px;left: 10px;padding: 3px 10px;}.icoSelect{width: 32px;position: absolute;right: 43px;top:3px}.icoSelect img{width: 32px;height: 32px;}.colorSelect{width: 32px;height: 28px;background-color: black;position: absolute;right: 10px;top:3px}.ToolsBox{background-color: #ececec;padding: 3px 10px;font-size: 12px;}.ToolsBox li {display: inline-block;margin: 0px;padding: 0 3px;color: #3D3D3D;}.icoTop{font-size: 26px;display: block;height: 28px;text-align: center;color: #444;cursor: pointer;}</style></head><body><div class="EditMainBox"><div class="header"><div class="titleBox"><input type="text" class="m-input radius10 titleInput"><span class="icoSelect"><img src="2.png" alt=""></span><span class="colorSelect radius10">0</span></div><div class="ToolsBox"><ul><li><span class="myth-icon mythicons-bold icoTop"></span><span>粗体</span></li><li><span class="myth-icon mythicons-italic icoTop"></span><span>斜体</span></li><li><span class="myth-icon mythicons-title icoTop"></span><span>标题</span></li><li><span class="myth-icon mythicons-linethrough icoTop"></span><span>删除线</span></li><li><span class="myth-icon mythicons-outoforder icoTop"></span><span>无序</span></li><li><span class="myth-icon mythicons-order icoTop"></span><span>有序</span></li><li><span class="myth-icon mythicons-pending icoTop"></span><span>待办</span></li>                        <li><span class="myth-icon mythicons-reference icoTop"></span><span>引用</span></li><li><span class="myth-icon mythicons-code icoTop"></span><span>代码块</span></li><li><span class="myth-icon mythicons-pic icoTop"></span><span>图片</span></li><li><span class="myth-icon mythicons-video icoTop"></span><span>视频</span></li><li><span class="myth-icon mythicons-table icoTop"></span><span>表格</span></li><li><span class="myth-icon mythicons-link icoTop"></span><span>超链接</span></li><li><span class="myth-icon mythicons-template icoTop"></span><span>模板</span></li><li><span class="myth-icon mythicons-logo icoTop"></span><span>神话</span></li></ul></div></div><div class="content m-flex"><div class="EditBox">1</div><div class="ViewBox">2</div></div><div class="footer"></div></div></body>
</html>

四、源代码下载

需要源代码的请单击下载。

我的日记开发系列手记目录

1.我的日记本开发手记——概述
2.我的日记本开发手记（2）——配色
3.我的日记本开发手记（3）—— 布局
4.我的日记本开发手记（4）—— UI效果图
5.我的日记本开发手记（5）—— 效果图转HTML
6.我的日记本开发手记（6）——Winform运行HTML
7.第七节_我的日记本开发手记（7）——Javascript与c#交互
8.第八节_我的日记本开发手记（8）——sqlite数据库与c#
9.第九节_我的日记本开发手记（9）——开发自己的JavaScript插件