教程（如何创建自定义图标Webfont）

本文概述

影像学
定义网格
排版基础
工作流程
网络字体格式
字体预备
CSS
总结

在HTML网站中嵌入自定义字体的可能性彻底改变了Web开发的潜力, 并为设计师带来了许多新的可能性。很快, 将各种符号嵌入为字体变得很流行, 并且Font Awesome成为行业标准。
字体比Sprite图形的最大优点是加载时间长。即便如此, 我们也不要忘记更改字体颜色和大小, 添加阴影等效果的简易性, 以及以相对简单的方式使用动画过渡的能力, 所有这些都带来了令人印象深刻的效果。

文章图片
设计自定义字体和图标是将印刷技术提升到新水平的直接方法。
除了FontAwesome之外, 还有许多其他图标字体, 甚至是Web应用程序, 它们都可以帮助你从可用的字体集甚至你自己的图标中编译字体：fontelo, fontastic, iconmoon等。
构建自己的图标字体可提供创建独特样式, 一致性, 统一线宽和像素完美效果的机会。
影像学 【教程（如何创建自定义图标Webfont）】图标可以分为三个基本组：象形图, 表意文字和任意符号。
象形文字代表他们应该描述的主题, 而表意文字则代表抽象的概念, 并且在视觉上不是很清晰。

文章图片
根据上下文, 即使基本形状也可以传达重要的信息。他们还超越了语言障碍。复选标记是任何语言的复选标记。
鸣叫
想象一个建筑项目, 其中涉及来自几个不同国家的分包商。监督管道的人员可能会使用图标而不是用三种或更多种语言写” 我们现在在洗手间里有自来水, 你可以使用它” 了, 这对于现场的所有工人都是可以理解的, 从而可以节省一些时间。
第一张图片显示了被摄对象的简化肖像, 第二张图片则基于性别差异的概念。尽管我们大多数人都对门后发生的事情有一个基本的了解, 但我们不想知道细节。
第三个是任意符号, 其起源不是很清楚。一种理论说它是字母” v” 为” veritas” (经纬度), 另一种理论说它是” n” 为” νικ?” (O.Gk。赢)与” x” ” Χ?νει?” (O.Gk输)。类似的符号是数学函数(+, -, *, /)等的符号。
定义网格经典字体是矢量, 因此可以无限放大, 但是当它们缩小到路径用完像素的程度时, 就会出现问题, 因为屏幕上的所有内容都必须以像素呈现, 并且像素不(容易)被整除。
渲染(Mac, Windows, Linux)
亚像素渲染并不是什么新鲜事物, 但是不同的操作系统具有不同的方法, 因此结果也大不相同。
在这种情况下, 我们将使用32x32px的图标, 这些图标可以缩小为16x16px。
排版基础 Icon字体可能会与某些文本字体结合使用, 因此应遵循相同的规则：上升, 下降, 上限高度, x高度, 过冲。

文章图片
上升, 下降, 顶盖高度。不, 你不是飞行学校。这些是必不可少的排版规则, 可让你将自定义图标与文本字体结合使用。
鸣叫
工作流程草图-> 字形-> FontPrep-> CSS
草图
如今, 大多数设计人员和开发人员都熟悉Sketch。它快速, 易于掌握, 并且专门为界面设计而创建, 而不是照片编辑, 绘图, 润饰或插图。
美丽之处在于其简单性, 最简单的形状是基本的几何” 基元” , 可以使用(R)actangle和(O)val等内置工具轻松绘制。

文章图片
通过将正方形与较大的圆相交, 我们将得到圆形剪辑, 而减去较小的圆, 我们将获得抽头的那个角度区域。

文章图片
最终形状作为矢量看起来非常平滑。
但是, 矢量必须以像素表示, 因此, 强烈建议将点与像素网格对齐。

文章图片
在这里, 我们可以看到最终形状如何适合像素网格。
图标中的人也由多种形状组合而成, 在这种情况下, 大多数是带有圆角的矩形。

文章图片
将腋窝雕刻为负空间看起来很简单, 但有时会出现错误, 可以通过将较小的段分组然后在与其余段合并之前将它们展平来避免。

文章图片
这将我们带到一个重要的点：为了最大程度地降低误渲染的风险, 最好将图标变平。

文章图片
像素视图向我们展示了没有误渲染。

文章图片
为了创建选中标记(或” 勾号” )符号, 我们构造了一个金色矩形或至少一个近似的矩形, 将其切出并旋转45°。

文章图片
现在, 向量已完成, 因此我们可以继续使用下一个工具：字形。
字形
字形是创建字体的有用工具, 对于许多设计人员来说, 它是他们唯一需要的工具。它直观, 轻巧。
尽管可以创建用于存储图标的击键, 但最好避免使用单个键, 因为每个字符都有其含义, 并且搜索引擎可能会误解它。
搜索引擎就像人们一样, 不喜欢他们不了解的事物。这是业界摆脱Adobe Flash的原因之一。因此, 我们应该将字符存储在专用区(PUA)中：

根据定义, Unicode联盟不会分配字符的一系列代码点。当前, 定义了三个私人使用区域：一个位于基本多语言平面(U + E000–U + F8FF)中, 一个分别位于并且几乎覆盖15和16平面(U + F0000–U + FFFFD, U + 100000)中–U + 10FFFD)。这些区域中的代码点不能视为Unicode本身中的标准化字符。

因此, 从uniE000开始, 你可以添加6400个图标, 直到达到代码点uniF8FF为止；如果这还不够, 你可以使用额外的2 * 65534代码点。
你可以从新字形文档中安全删除所有预设字符：

文章图片
在大多数情况下, 每个Em的标准单位数为1000, 但是我们可以对其进行调整以获得更好的结果。在这种情况下, 我们将使用1024(32× 32)。
然后, 你可以根据上一个草图设置上升和下降值。

文章图片
现在, 回到草图。复制每个图标之前, 我们必须将大小增加32。好消息是你可以在输入字段中进行数学运算。

文章图片
现在, 让我们复制形状并将其粘贴到字形中：

文章图片
将会出现一些奇怪的形状, 但是我们可以轻松地将它们删除并将图标与参考线对齐。

文章图片
让我们为每个图标重复该过程：

文章图片
在形状上创建其他更改也很容易, 但是现在不再有32× 32像素网格。但是, 指南通常可以解决问题。

文章图片
为了区分水和固体金属的液体结构, 我们将在水滴上添加突出显示。要切出形状, 我们必须更改矢量路径的方向。
现在使用Cmd + E导出字体。
网络字体格式所有现代浏览器都使用OTF, TTF和WOFF字体格式, 但是几年前并非如此。由于每种格式都有几十个千字节, 因此最好将它们全部导出。
TrueType字体(TTF)
TrueType是Apple和Microsoft在1980年代后期开发的字体标准。 TrueType是Apple Mac OS X和Microsoft Windows操作系统最常用的字体格式。
OpenType字体(OTF)
OpenType是可缩放计算机字体的格式。它基于TrueType构建, 并且是Microsoft的注册商标。 OpenType字体通常在主要计算平台上使用。
Web开放字体格式(WOFF)
WOFF是用于网页的字体格式。它于2009年开发, 现在是W3C的推荐。 WOFF本质上是具有压缩功能以及其他元数据的OpenType或TrueType。
目标是支持具有带宽限制的网络上从服务器到客户端的字体分发。
Web开放字体格式(WOFF 2.0)
TrueType / OpenType字体比WOFF 1.0提供更好的压缩。
SVG字体/形状
SVG字体允许在显示文本时将SVG用作字形。 SVG 1.1规范定义了一个字体模块, 该模块允许在SVG文档中创建字体。你还可以将CSS应用于SVG文档, 并且@ font-face规则可以应用于SVG文档中的文本。
嵌入式OpenType字体(EOT)
EOT字体是Microsoft设计的OpenType字体的紧凑形式, 用作网页上的嵌入式字体。
如果使用旧版本的字形, 则只能导出.OTF, 因此你需要使用其他软件：
字体预备为了安全地在网络上显示字体, 我们需要不止一种格式。

文章图片
FontPrep是一个开源的本机Mac OS X应用程序, 可以将TTF和OTF文件转换为具有完全浏览器兼容性的webfont捆绑包, 就像FontSquirrel一样, 但脱机并且在SVG文件中没有错误。

文章图片
CSS 这是Fontprep生成的标准CSS。你可能需要调整字体文件的路径。

@font-face { font-family: 'sanitaricons'; src: url('sanitaricons-Regular.eot'); /* IE9 Compat Modes */ src: url('sanitaricons-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('sanitaricons-Regular.woff') format('woff'), /* Modern Browsers */ url('sanitaricons-Regular.ttf')format('truetype'), /* Safari, Android, iOS */ url('sanitaricons-Regular.svg#9f8f22f7878c9af22135aadf22148415') format('svg'); /* Legacy iOS */font-style:normal; font-weight:400; }

定义字体的特定类和属性：

.icon{ font-family: 'sanitaricons'; display: inline-block; font: normal normal normal 32px/1 'sanitaricons'; font-size: inherit;

在OS X上进行亚像素渲染是一种最真实地表示矢量路径的方法, 在反向组合中(深色背景上的浅色图标), 看上去可能有些模糊甚至沉重。为了保持清晰度和线条粗细, 尤其是在较小的字体大小中, 这些属性变得很方便：

.icon.light-on-dark{ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

为了创建自定义类, 我们在之前使用伪类并将特定字符添加为内容：

.icon.pipe:before { content: "\e001"; } .icon.toilet:before { content: "\e002"; } .icon.check:before { content: "\e003"; }

总结互联网上有很多可用的图标。有些是免费的, 有些不是免费的, 有些是成对提供的, 而且在大多数情况下, 你无法在一个集合中找到所有你想要的。组合集合并不容易, 通常会带来较差的结果。与从头开始设计它们相比, 寻找完美的组合可能要花费更多的时间和精力。
要想出一个主意, 请先进行Google图片搜索。对于更复杂的概念, 可以查看Jean Chevalier和Alain Gheerbrant撰写的” 符号词典” , 对于技术指导, 我建议你参阅” 图标手册” 中的参考文献。
开始在纸上勾勒出你的想法, 并与你的客户, 同事, 朋友或适合目标群体的任何人进行讨论。提出想法后, 就可以进行数字化制作了。
必须定义的第一件事是大小。为了获得清晰的结果, 将线条与像素网格对齐至关重要。随着更高的显示密度, 这变得不那么重要了, 但是这对于当前的台式计算机仍然是一个普遍的问题(尽管随着越来越多的用户转向新的4K台式显示器和高分辨率Retina级笔记本电脑, 这种情况应该会有所改善)。
设计师应在各种情况下以及在各种潜在的用户和系统上测试图标, 直到解决所有问题为止。
创建自定义图标webfont将为任何网页或应用程序带来独特的触感, 提高性能, 实现更多自定义, 并从长远来看使Web开发变得更加容易。
? ? ?
在srcmini设计博客上进一步阅读：