图标字体的使用——iconfont

什么是iconfont

iconfont 即图标字体，也叫字体图标，顾名思义，就是字体做的图标。
相对于图片图标，它有以下优点：


自由的变化大小，且不会模糊（就像网页上的大号字体的标题，不会糊哦）；


比图片体积小，加载快；


可以任意改变颜色；



当然，它也有一些缺点：


创作自己的字体图标很费时间，重构人员后期维护的成本偏高；


只能被渲染成单色或者CSS3的渐变色，像下面这种是办不到的；




但是现在有种东西叫Svg，这是一种基于 XML 语法的图像格式，全称是可缩放矢量图（Scalable Vector Graphics），不但颜色丰富，而且不会因变化大小而模糊，毕竟是矢量图。
如何使用iconfont

这里要为大家介绍的是 Iconfont-阿里巴巴矢量图标库。
地址戳这里：Iconfont-阿里巴巴矢量图标库
使用步骤：


打开首页




搜索需要的图标





搜索结果：


选择所需的图标进行使用

像图片一样使用iconfont

如果所需图标个数比较少，可以选择下载到本地使用




可以选择想要的颜色、大小和格式。
在项目中使用
可以选择把图标添加到项目进行管理

先添加到库：



再添加到项目：




新建一个项目：




点击确定，把图标添加到新建的项目”我的项目”中：




添加到项目的图标有三种使用方法，右侧有官方使用指南：



这里主要介绍font class这种方法。
font class方法使用步骤
第一步：拷贝项目下面生成的fontclass代码：


第二步：用标签在html文件头部（中）引入复制的链接代码（复制的代码请粘贴在link标签的href属性中）：


第三步：挑选相应图标并获取类名：


第四步：应用于html文档中：
格式：
<i class="iconfont xxx"></i>

其中“xxx”处替换为第三步复制的类名：

显示效果：


改变图标的颜色和大小：


显示效果：


完美！

本文使用 Zhihu On VSCode 创作并发布
最近受到b站一个视频的启发，想做一套属于自己的字体，但是又不想写好几千个字，为了偷个懒，调研了一下用神经网络合成字体的算法，最终找到一篇名为W-Net的论文：
W-Net: One-Shot Arbitrary-Style Chinese Character Generation with Deep Neural Networks
下面介绍一下这篇论文的主要内容：
相关算法
论文中提到了三个比较有特点的文献
1 使用RNN根据笔画时序来生成文字；
2 DCFont，将汉字信息分为Content、Style和Category三个部分，使用GAN的思路来训练， 需要700多个字才能生成一套字体；
3 Zi2zi，从pix2pix衍生而来的Encoder+Decoder+Discriminator的结构，同样使用GAN的思路来训练，需要2000多个字才能生成一套字体。
而这片W-net号称只需要一个字就可以生成一套字体，你相信吗？我虽然不太信，但是为了少写几个字，也值得尝试一下。
生成器结构：
算法思路简介：
图中左侧的分支用于提取汉字结构信息
图中右侧的分支用于提取字体风格信息
字体风格特征只选用了较深层网络得到的特征图
采用对抗训练的方式得到与真实汉字相近的图片
关于判别器结构，文章一笔带过，并未做详细介绍，只提到了判别器中使用了类似[5]中的辅助分类器。
loss函数设计
loss函数分为生成损失和判别损失两大部分，每个损失函数都由多个损失加权得到。
下面逐一介绍各个损失项的含义
对抗损失：判别器得到的真伪分类的损失。
汉字分类损失：判别器得到的汉字类别的损失。
字体类别损失：判别器得到的汉字类别损失。
重建损失：包括两个部分，一个是生成的fake_img与real_img之间的L1Loss，另一个是fake_img和real_img分别加入到分类网络得到的多级特征图之间的MSELoss。
常数损失：fake_img和real_img分别通过两个分支得到的向量之间的损失
分支分类损失：在左右分支的输出后面各自添加一个用于分类的全连接层，左分支用于提取汉字结构特征，所以用全连接层对汉字进行分类，右分支用于提取汉字字体风格特征，所以用全连接层对字体进行分类。
梯度惩罚项：模型对于输入求导得到的梯度和，用于防止梯度过大，与梯度剪裁功能相似，但是更加柔和。
论文中得到的生成效果：
为了制作一个字体生成器，我实现了这个算法，地址在：
Arctanxy/W-Net-PyTorch​github.com
参考
[1] https://www.bilibili.com/video/BV1St4y1Q71m
[2] Zhang, X.Y., Yin, F., Zhang, Y.M., Liu, C.L., Bengio, Y.: Drawing and recognizing chinese characters with recurrent neural network. IEEE transactions on pattern analysis and machine intelligence (2017)
[3] Jiang, Y., Lian, Z., Tang, Y., Xiao, J.: Dcfont: an end-to-end deep chinese font generation system. In: SIGGRAPH Asia 2017 Technical Briefs. p. 22. ACM (2017)
[4] Tian, Y.: zi2zi: Master chinese calligraphy with conditional adversarial networks.https://github.com/kaonashi-tyc/zi2zi/ (2017)
[5] Odena, A., Olah, C., Shlens, J.: Conditional image synthesis with auxiliary classifier gans. arXiv preprint arXiv:1610.09585 (2016)

简介

从最传统的小图标到雪碧图再到现在的字体图标，关于这一块的前端的优化目标一直未有变更，今天简单的介绍一下如何用最小的代价来应用字体图标

作者：链上研发-hcy 

时间：2016-11-30

字体图标有何优缺点？

轻量、灵活、兼容
清晰不失真
只能被渲染成单色或者CSS3的渐变色，创作自己的字体图标成本大

回归主题，如何简易的来使用呢？
阿里巴巴的矢量图库可以为我们所用
地址：http://www.iconfont.cn/
我将一步一步讲述该如何使用



注册一个账户

  当然你可以使用其他账户来登陆，比如github的账户或者是新浪微博的账户，这都不是重点，重点是你要有一个账户




创建一个项目

  如下图所示，点击进去创建项目






添加自选图标

  打开之后界面是这样的




  之后去图库搜索自己想要的图标，加进你的'购物车'




  之后点击一下购物车，把他添加到你的项目中即可




导出到本地使用

  最后一步，导出到本地即可




就是这么简单，你就可以使用字体图标

但是作为艺术字体，每一个设计师都可以通过自己的创作来设计一套完整的字体，除了中文之外，还有英文字体。中文字体相对比较难些，要有横竖撇捺，偏旁部首，结构处理等，而英文字体只有26个字母即可创作一套字体，所以说，中英文加在一起，字体数量是非常庞大的。
常见的中文字体：
常用中文字体如：隶书、幼圆、行书、草书、行楷、篆体、繁体、黑体、广告宋体、楷体、魏碑、毛笔手写、彩云卡通、综艺书法、新魏、仿宋、大黑、娃娃、钢笔、琥珀、细黑、隶书、古印、空心、姚体、颜楷、海报、微软雅黑等等，图下图所示，常用中文设计字体一览表。
每一个种字体，都有自己的风格，有的秀丽柔美，有的稳重挺拔，有的活泼有趣，有的苍劲古朴等，设计师在使用字体表达信息的时候一定要根据内容，来选择文字类型。
关于常见字体的风格特点和应用范围简单说明如表所示。
字体名称
字体特点
适用范围
宋体
典雅、工整、严肃、大方
正文、标题、小标题、说明文字
黑体
朴素大方、笔画单纯、结构严谨、引人注目
标题、大标题、小标题
楷体
规矩整齐，造型秀美，笔画流畅
正文、说明文字
隶书
蚕头雁尾，字体小巧，玲珑、清秀，庄重
标题、小标题
幼圆
笔画转角圆润，结构方正饱满，笔形柔和，结构平稳、秀气
正文、小标题、说明文字
汉仪小隶书
字体小巧，笔画纤细，玲珑、清秀；笔法挺劲
、秀美、庄重、活泼大方
小标题、说明文字
娃娃体
美术字体，字形活泼可爱，团团圆圆，充满童趣色彩
卡通、儿童信息
常见的英文字体：
常见的两种字体风格中，衬线体的笔划感太”过”，不是特别的商业。随着瑞士设计风格的大力推广，无衬线字体变得愈发流行起来。
建议: 个人认为 Tahoma 以及 Verdana 字符编码效果最好 ，适用于多种环境
Arial
字体族科：Arial, “Helvetica Neue”, Helvetica
变体:
Arial：有时称为Arial Regular以便与Arial Narrow区别，其包括Arial、Arial
Italic(斜体)、Arial Bold(粗体)、Arial Bold Italic(粗斜体)和Arial Unicode
MS
Arial Black：此字体的特色在于其笔画相当的粗，包含Arial Black、Arial Black
Italic(斜体)
Arial Narrow：为Arial的细瘦版本，包含Arial Narrow Regular、Arial Narrow
Bold(粗体)、Arial Narrow Italic(斜体)和Arial Narrow Bold Italic(粗斜体)
Arial Rounded：包含Arial Rounded Bold(粗体)，此字体可在微软韩文字体Gulim找到
——以上来自百度百科
Avant
Garde
字体族科包括: “Avant Garde”, Avantgarde, “Century Gothic”, CenturyGothic,
“AppleGothic”;
Calibri
字体族科包括: Calibri, Candara, Segoe, “Segoe UI”, Optima,
Arial,;
Calibri，一种无衬线字体，为微软Microsoft Office 2007套装软件的默认字体，取代先前Microsoft
Word的默认字体Times New Roman以及PowerPoint、Excel和Outlook的默认字体Arial。
Calibri是搭发布于微软Windows Vista六种英文ClearType字体的其中一种，是Microsoft
Word默认字体的第一个无衬线字体，先前则是使用Times New Roman为默认字体。
Candara
字体族科包括: Candara, Calibri, Segoe, “Segoe UI”, Optima,
Arial
Candara是一种无衬线字体，为字型设计师Gary Munch为微软所开发，附带于Windows
Vista中发行。——Wiki百科
Franklin
Gothic Medium
字体族科包括: “Franklin Gothic Medium”, “Franklin Gothic”, “ITC Franklin
Gothic”, Arial, sans-serif;
Futura
字体族科包括：: Futura, “Trebuchet MS”, Arial;
Futura灵感来自包豪斯，继包豪斯的设计理念，设计师保罗伦纳1924年至1926年首次创建Futura。虽然伦纳是不是包豪斯的成员，但是他赞同其很多观点，他认为现代的字体应该表达出现代模式，而不是成为过去字体的延续。Futura商业授权发行于1927年，由鲍尔型铸造厂投产。
在设计 Futura
的过程中，伦纳避免产生任何非必要的元素，借鉴了无衬线的基本几何比例。Futura的清脆、干净的形式反映了其效率感，鲁莽的外观即使在现如今也已经淡淡退出了。
Futura成功催生了新的几何无衬线字体，如卡贝尔和世纪哥特式，其中包括的范围。现在超过80自成立以来，许多代工厂已经公布Futura变化的数字形式年，Adobe公司作为最常用的一个。几个国际公司还利用自己的Futura定制的版本，包括大众汽车(可见其著名的广告)和宜家。——Wiki
原文链接：http://www.ziti163.com/Item/1720.aspx
官方网站：http：//www.z01.com
联系方式：qq：404655890/524979923
手机号码：18270822887/18507085567