第10节_我的日记本开发手记(10)——使用自定义图标字体

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

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

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

1. 新建工程

单击File->new,弹出New Project对话框,设置Font family name为MythFont,其它默认如图设置。软件为我们默认设置了一些小图标(如图3)。
第10节_我的日记本开发手记(10)——使用自定义图标字体_第2张图片

这些小图标对我来说没用,我们全部把它删除。选择所有图标,只保留第一个图标,在图标上点击右键选择delete删除选择的图标,如图4所示。
第10节_我的日记本开发手记(10)——使用自定义图标字体_第3张图片

2.绘制小图标

单击图标栏中insert glyphs图标(如图5所示),
第10节_我的日记本开发手记(10)——使用自定义图标字体_第4张图片
弹出Insert Glyphs对话框,设置如图6,单击ok。
第10节_我的日记本开发手记(10)——使用自定义图标字体_第5张图片
在软件的图标区域会多出一个图标如图7所示,
第10节_我的日记本开发手记(10)——使用自定义图标字体_第6张图片
双击这个图标进入编辑模式,我们可以从中绘制自己的图标。绘制图标常用的有三种方法:
一是使用软件自带的图标库。 在软件的最左侧有一个图标库,找到我们需要的图标,按住鼠标左键拖入我们的编辑区域,一个图标叫绘制ok了。
二是使用软件的绘制功能进行自己绘制。 在软件的上方有一些图标的绘制工具按钮,我们选择对应的按钮,在编辑去进行绘制即可。
三是导入其它软件绘制的图标。 单击图标栏中Import image图标,打开对话框,选择做好的图片导入,弹出的属性设置框(如图8所示)默认设置就行。 第10节_我的日记本开发手记(10)——使用自定义图标字体_第7张图片

3. 设置小图标属性

绘制完小图标后,在小图标显示列表中选择我们绘制的图标,单击右键选择Glyph Properties,打开属性设置对话框,选择code-points后面的第一个select unicode character图标,弹出select character对话框,unicode blocks 中选择$0100,characters中选择$0101(如图10)。
第10节_我的日记本开发手记(10)——使用自定义图标字体_第8张图片
然后再Glyph Properties中name输入名称;left side bearing 设置0;right side bearing设置0。最后设置如图11所示。
第10节_我的日记本开发手记(10)——使用自定义图标字体_第9张图片

我设置了一些日记本开发中用到的图标,如图12所示。
第10节_我的日记本开发手记(10)——使用自定义图标字体_第10张图片

4. 导出图标字体

菜单栏中单击File->Export Font->Export Desktop Font(ttf/otf),弹出设置对话框,设置属性如图12所示,单击保存即可。这样我们就得到了一个myfont.ttf字体库。
第10节_我的日记本开发手记(10)——使用自定义图标字体_第11张图片

二、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">0span>
				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">1div>
				<div class="ViewBox">2div>
			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插件

你可能感兴趣的:(日记,前端,html,javascript)