响应式Web图形篇 —— icon fonts 的探析及应用

前言

像素完美（Pixel Perfection）、分辨率无关（Resolution Independent）和多平台体验一致性是设计师们的追求。 可访问性（Accessability）、加载性能和重构灵活性是前端工程师们关心的主题。

当下互联网设备「风起云涌」，显示分辨率「层出不穷」，为 Web 建立者们带来愈来愈多的难题。

• 须要为高PPI（aka Retina）显示设备准备@1.5x、@2x、@3x的图片素材；
• 须要针对不一样显示屏分辨率来调整优化排版；
• 须要考虑多个分辨率版本的图片的加载性能问题；
• 设备版本碎片化（Version Segmentation）带来的语义和可访问性的问题；
• ……

响应式设计

相关厂商内容

InfoQ中国运营团队倾力打造—EGO超级极客邦

利用AWS构建备份与恢复方案

如何创建拥有公有云品质与运维的私有云平台？

一招抵抗病毒、入侵、攻击，坚守服务器安全

容器云最佳实践：Docker、微服务、Kubernetes

响应式设计（Responsive Design）做为「救世主」的身份，已经在 Web 界布道了好几年，丝绝不亚于当年的「Ajax」先生。其核心就是：针对不一样设备和应用场景，做出合理性的适应。狭义地看，就是 Web page 在不一样分辨率下借助 media qurey 来调整页面布局和内容显示，三个关键词是：Fluid grids, Flexible images, Media queries.

其中 Flexible images 是最为棘手的地方。由于前面提到，如今的设备多样化，不一样分辨率和不一样 PPI 给图片自适应带来了空前复杂度。目前尚未一套完美的解决方案来应对，W3C那边还在拟定 Responsive Images 和 Picture Element 的相关标准。但在这以前你须要采起多管齐下的方式，针对媒体元素不一样的使用场景，制定不一样的自适应策略。目前主要有三种主流方式：

1. max-width: 100% 来自适应容器
   同一张图片，在不一样容器里，自动适应到容器的大小。存在的问题是，大尺寸图片在小尺寸屏幕下的带宽浪费和加载速度慢。

2. 多版本图片更换

   • 针对写在CSS里的background-image，能够借助 media query 来适应显示 @1x 或 @2x 的版本。
   • 针对 HTML 里的图片能够利用 Piturefill.js 来作自适应。

3. 使用矢量化图形，包括

   • icon fonts
   • SVG

这一期咱们主要来说讲 icon fonts 的应用。

什么是 icon fonts?

利用字体工具把咱们平时 Web 上用的图形图标（icons）转换成 web fonts，就成了 icon fonts，它能够借助 CSS 的 @font-face 嵌入到网页里，用以显示 icons。由于字体是矢量化图形，它天生具备「分辨率无关」的特性，在任何分辨率和PPI下面，均可以作到完美缩放，不会像传统位图， 如：png，jpeg，放大后有锯齿或模糊现象。

注：上图是 Apple 记念 Mac 发布30周年网站截图，网页内大量运用了 icon fonts 来塑造不一样年代发布的产品，这类 iOS 7 引入的线条风格图标，使用 icon fonts 来表现最合适不过了。

为何要用 icon fonts？

除了「分辨率无关」这个最大的优势以外，icon fonts 还具备：

• 文件小：相比图片几十几百KB的容量，icon fonts 几乎是羽翼级轻量。
• 加载性能好：由于图标都被打包进一套字体内，http request 减小。这如同咱们经常使用的 css sprites 技术。
• 支持CSS样式：和普通字体同样，你能够利用CSS来定义大小、颜色、阴影、hover状态、透明度、渐变等等…
• 兼容性好：web fonts 起源很早，别说主流浏览器，连IE6/7都能良好支持。除了一些老的移动端浏览器，如Android 2.1如下的初代浏览器，Opera mini 这类自限型浏览器。

固然 icon fonts 也有它的不足：

• 样式单一，没法针对不一样分辨率来调整icon 的细节，好比下降大尺寸icon 的线条粗细。
• 颜色单一，CSS 没法方便的去定义彩色的 icon，却是有经过叠加组合的方式来达到彩色图标的目的。
• 移动端浏览器兼容性还不够完善，像Opera mini、Windows phone 7.0-7.8 都不能正常显示icon fonts。
• 有少许的移动设备有可能会和 icon fonts 的字符编码冲突，致使icon 显示不正常（咱们本身风车Android 版本就碰到了这个问题）。

因此 icon fonts 也并非一套完美的响应式图片的解决方案，当它适宜你的应用场景时，好比：

• 你的网站是扁平化或简约风格，图标样式单一，颜色为纯色。
• 你的目标用户使用桌面浏览器为主，或者，
• 你愿意为非兼容设备作兼容hack。

那么 icon fonts 是一个令设计师和前端工程师都心花盛开的方案。

如何制做 icon fonts？

icon fonts 的制做主要有两条思路：

1. 利用字体工具手动制做
2. 利用在线工具自动生成

手动制做

在icon fonts 自动生成器没有诞生之初，你们只能依靠字体编辑软件来完成icon fonts 的制做，简单介绍一下手动制做的流程。

1. 在 illustrator 或 Sketch 这类矢量图形软件里建立你的 icon。

2. 而后把 icon 一个一个导入到字体编辑工具，转换成 glyphs 进行编辑，设置对应的 unicode 编码。经常使用字体工具备：

   • Glyphs
   • FontForge
   • FontCreator

3. 完成glyphs 编辑后，从字体工具导出 OTF 字体文件，而后利用 Font Squirrel 生成器来生成 web fonts 支持的格式。

手动制做 icon fonts 须要具有必定字体设计的知识，若有兴趣可做尝试。而自动生成工具用起来就傻瓜和省心多了。

自动生成

咱们「风车」去年末进行了一次改版，其中一项就是把原来位图图标所有转换成 icon fonts，当时采用的是阿里巴巴提供的免费在线工具 iconfont.cn。

Iconfont.cn是由阿里巴巴UX部门推出的矢量图标管理网站，也是国内首家推广Webfont形式图标的平台。网站涵盖了1000多个经常使用 图标并还在持续更新中，Iconfont平台为用户提供在线图标搜索、图标分捡下载、在线储存、矢量格式转换、我的图标库管理及项目图标管理等基础功能。

「风车」应用内的图标有两个来源： 一些从开源图标库拿来，一些是设计师本身制做。接下来详细介绍一下，咱们是如何利用 iconfont.cn 这个在线工具生成了这 56 个图标的 icon fonts。

步骤一

参照 iconfont.cn 提供的图标制做模版，在Illustrator 画布的16x16网格内，参考基线、上升部、降低部来调整图标大小和位置。

调整矢量图标须要注意几点：

1. 图形须要闭合，不要用stroke，不然会显示不出来
2. 图形合并并扩展
3. 用单色
4. 在16x16画布中进行排版，这样制做好的icon fonts 16px 大小的时候和其它字体保持一致。

步骤二

而后从Illustrator 保存为SVG文件，使用默认的SVG设置便可。

步骤三

你能够拖动一个或多个SVG图标到iconfont.cn 的上传表单，完成上传后会提示设置名称和tag，点击「完成上传」开始生成icon fonts 。生成完成后，你能够点击要下载的图标加入购物车，而后「下载至本地」。

(点击图像放大)

 

步骤四

解压刚下载的文件包，除了EOT、SVG、TTF、WOFF四种 web fonts 字体外，还有个 demo.html 展现全部 icons 及其对应的字体编码。之因此有4种字体格式，是考虑到不一样浏览器不一样平台对字体格式的支持不同，具体看下面 CSS 里的注解。

复制4个字体文件到 assets 或 fonts 目录下，而后在 CSS 文件加入 @font-face 声明(注意更改字体所在的文件路径)。

@font-face {font-family: 'iconfont';
    src: url('iconfont.eot'); /* IE9*/
    src: url('iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('iconfont.woff') format('woff'), /* chrome、firefox */
    url('iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
    url('iconfont.svg#uxiconfont') format('svg'); /* iOS 4.1- */
}

再定义一个 icon-* 通配咱们全部图标的共有 CSS 样式，

[class^="icon-"], [class*=" icon-"] {
  display: inline-block;
  speak: none
  font-family: "iconfont";
  font-size: 16px;
  line-height: 1;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

最后是利用 :before 来注入每一个 icon 对应的字体编码

.icon-bell:before {
  content: "\003432";
}
.icon-search:before {
  content: "\003433";
}

如今你能够这样显示一个铃铛图标：

<i class="icon-bell"></i>

下图就是咱们「风车」应用 icon fonts 的实例。

(点击图像放大)

icon fonts 移动端应用

前面提到， icon fonts 在移动端的兼容性稍微差一点，有几个问题：

1. 浏览器根本不支持

   举例 Opera mini，在移动设备和带宽比较落后的地方，用户量仍是很大的，若是你的网站访问数据里这类浏览器流量不可忽视，那么你就须要额外处理 icon fonts 的向下兼容，好比 js 嗅探后用雪碧图（CSS spirtes）替代。

   各平台 icon fonts 的兼容状况，参见这张网友测试聚集的表格。

2. unicode 冲突问题

   通常状况下，icon fonts 生成器会使用 PUA（Private Unicode Area）这个安全区域的字符编码（code point）。PUA 是专门预留「私用」的 unicode 区间, 通常会用 U+E000..U+F8FF 这个 BMP 区间里预留的 PUA code point.

   好比： 这个Apple 平台特有的字符，就是用 U+F8FF 这个code point 来对应的，在其它平台就看不到那个字符。

   阿里巴巴的 iconfont.cn 没有遵循这个最佳实践，用得的是 CJK 编码区间（U+3432），因此当你浏览器加载字体出问题时，会还原成一些奇怪的中文文字，这对读屏软件也很是不友好。好在它的管理后台，能够手动的编辑这个 code point。

   另外，若是发现有 icon 显示不出来，或被替换成了其它字符，那么更换一下 code point 可能能够快速的解决。

关于如何应用 icon fonts 到原生的 iOS/Android App 中去，iconfont.cn 上面有具体的教程，能够查看一下。

其它 icon fonts 工具

相似 iconfont.cn 这类在线生成工具备不少，就再也不一一详细介绍，最著名的还有：

• icomoon
• fontfello

这些工具基本功能相似，但有少量功能差异，像 icomoon 还支持字体的连字（Ligatures）功能。经过设置 「bell」为铃铛图标的连字，当你在文本中写 「bell」时自动转换成铃铛图标。像 fontfello 是开源软件，意味着更加灵活和定制的可能性。

若是你对使用英文软件彻底没有障碍，我强烈建议使用 icomoon，体验和功能都很是强大。固然做为国内的同行，仍是要支持一下 iconfont.cn。

结语

icon fonts 做为 web fonts 的一种「特殊」应用，很好的解决了「响应式设计」中图形无损自适应的难题。设计师再也不须要维护不一样大小、不一样颜色的多版本素材，图形矢量化以后，交给那些 在线生成器就能够了。对于前端工程师，利用 HTML+CSS 就能够灵活的使用成百上千种图标，无需担忧切图、定位、优化等传统位图要应付的状况。而用户，简洁、清晰的图标带给他们赏心悦目的感受以外，浏览网站的速 度体验也将大大提高。

做者简介

何斌是「风车」协做平台的产品设计师，联合创始人。 他喜欢简单优美的设计，除了设计以外，他对技术也一样抱有热情，一直潜水在 Ruby 和前端社区里，社区里也不乏他参与的开源项目。 目前他和太太及可爱的女儿一块儿居住在一个宁静的小山村，远程工做和旅游是他不可或缺的生活方式。

【QCon上海2015】国内外专家云集，解读最新技术趋势和最佳实践。畅销 书《番茄工做法图解》做者Staffan Nöteberg、Azul Systems联合创始人兼CTO、著名JVM专家Gil Tene、Uber首席系统架构师、分布式系统专家Matt Ranney以及Twitter Heron核心开发者符茂松与您相约QCon上海！了解详情。