hexo博客矢量图标制作笔记！

2016-06-12 阅读:次

######什么是矢量图？什么是位图？

矢量图是根据几何特性来绘制图形，是用线段和曲线描述图像，矢量可以是一个点或一条线。
矢量图只能靠软件生成，矢量图文件占用内在空间较小，因为这种类型的图像文件包含独立的分离图像，可以自由无限制的重新组合； 

位图图像也称为点阵图像，位图使用我们称为像素的一格一格的小点来描述图像。

区别：
矢量图形与分辨率无关，可以将它缩放到任意大小和以任意分辨率在输出设备上打印出来，都不会影响清晰度。
而位图是由一个一个像素点产生，当放大图像时，像素点也放大了，但每个像素点表示的颜色是单一的，位图放大后就会出现马赛克状。

位图表现的色彩比较丰富，可以表现出色彩丰富的图象，可逼真表现自然界各类实物；
而矢量图形色彩不丰富，无法表现逼真的实物，矢量图常常用来表示标识、图标、Logo等简单直接的图像。
由于位图表现的色彩比较丰富，所以占用的空间会很大，颜色信息越多，占用空间越大，图像越清晰，占用空间越大；
由于矢量图形表现的图像颜色比较单一，所以所占用的空间会很小。
经过软件矢量图可以很轻松的转化为位图，
而位图要想转换为矢量图必须经过复杂而庞大的数据处理，而且生成的矢量图质量也会有很大的出入。

Hexo Theme Yilia by Litten
使用开源项目搭建博客，修改源码时,发现一些小图标不是引用image而是在css里引用了字体文件里的代码。形如：

#css代码片段
a.qq {
    background: #34baad;
    border: 1px solid #34baad;
}
a.weixin {
    background: #4caf50;
    border: 1px solid #4caf50;
}
.icon-qq:before {
  content: "\E62D"
}
.icon-weixin::before { 
    content: "\E61F"; 
}

1
2
3

#html代码片段
<a class="qq" target="_blank" href="#" title="qq"><i class="icon-qq"></i></a> 
<a class="weixin" target="_blank" href="#" title="weixin" ><i class="icon-weixin"></i></a>

网站icon字体图标

于是很好奇，打开这个css文件，看下这些content代码是怎么转换成图标的。发现这个css文件引入了fonts目录下的字体文件。

@font-face {
  font-family:iconfont;
src:url(./fonts/iconfont.b322fa.eot);
src:url(./fonts/iconfont.b322fa.eot#iefix) format("embedded-opentype"),
url(./fonts/iconfont.8c627f.woff) format("woff"),
url(./fonts/iconfont.16acc2.ttf) format("truetype"),
url(./fonts/iconfont.45d7ee.svg#iconfont) format("svg")
}[class*=" icon-"],[class^=icon-] {
   font-family: iconfont!important;
   speak: none;
   font-size: 16px;
   font-style: normal;
   font-weight: 400;
   font-variant: normal;
   text-transform: none;
   line-height: 1;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale
 }

1
2
3

在网页开发过程中，我们常常会用到各种小图标（icon），然后网站要兼容各个浏览器，也可能会有多个尺寸，甚至还要考虑换肤等需求。
那么我们就要将这些小图标输出为多种尺寸、颜色和文件格式，不同的大小和颜色的icon都要重新做一套，在实际开发过程中是相当不便的。
制作字体的软件大概有两种，fontCreator和fontLab，这里只说fontCreator的制作方案，因为它的功能更强大也更好使用

######https://glyphicons.com/sets/humans/

######阿里巴巴矢量图标库：https://www.iconfont.cn并不适合此场景。
直接打开iconfont.45d7ee.svg查看源代码。发现是使用FontForge创建的。于是搜索该软件。下载后打开sng文件，发现该软件用着不太顺手。
再换High-Logic FontCreator三件套软件：https://www.high-logic.com/download

<metadata>
Created by FontForge 20120731 at Sun Jul  9 01:44:08 2017
 By admin
</metadata>

FontCreator13.0使用：File open或者拖拽后缀名为.ttf或.woff，

后缀名为ttf或woff格式打开显示内容

Insert菜单Insert Characters，在空白处右键选Add添加。可知  `code-point`为` $0702`。
再最后新增一个占位，右键选择字形属性`Glyph Properties`更改Name为想要显示的名称，比如`gitee`，左右轴值改成0；
然后右键导入png图标`Import Image`,调整参数Generate生成。如果图标太小生成的会显示有问题，可食用软件放大icon图标再使用。
导出字体：`Export Font`
使用：把`code-point`的`$`符号改成`\`就是`content`的值了！！！
.icon-gitee:before {
  content: "\0702"
}