前端不止：请告诉我，你要什么样的图标

【限时免费】岁尾最强一次云计算大年夜会，看传统、社区、互联网企业若何碰撞？

有一个英语成语叫做一画胜千言（A picture is worth a thousand words），不知道大年夜家有没有听过？它是指的是一张静态的图片就可表达一个复杂的概念或者与一个主题相干的图片有时比起具体的解释，可以或许更有效的描述有关主题。- “一画胜千言”维诽谤科

如不雅我们要用一句话来解释搁笔的感化，没有比这个成语更合适的词了。本篇文┞仿，我们就来聊聊关于搁笔的一些工作。

一个搁笔的生命周期（工作流程）

关于搁笔的生命周期，在我小我所经历的开辟项目中，有以下两种：

第一种方法：搁笔库(选择阶段) -> 搁笔应用（开辟阶段）

2. 直接应用 svg

第二种方法：搁笔设计（设计阶段） -> 搁笔导出（沟通阶段） -> 搁笔应用（开辟阶段）

一般来说，小公司或者自力开辟者会采取第一种工作流程。而大年夜型组织或公司因为拥有更完美的团队和资本，一般会采取第二种方法，可以或许获得更多自立权和建立企业 VI（Visual Identity，企业视觉辨认）的才能。

但无论哪种方法，都包含两个角色：设计师和 Web 开辟。只是在第一种工作方法中，设计师是弗成见的。

搁笔的设计和应用

设计阶段平日是由不懂得 Web 开辟的设计师们来完成的，他们会根据产品的须要，绘出知足需求的搁笔，然后交给 Web 开辟人员应用。

为什么要先介绍搁笔的应用，而一笔跳过导出过程呢？原因很简单，因为我们须要先知道办事的对象是谁，才知道若何精确的为它办事。

（Can I use svg?）

常见的三种搁笔的应用方法

1. 应用图片

直接将设计师画好的搁笔，以 PNG 格局的图片一个个分别导出，这是最直不雅的搁笔打包方法。

它的长处是：

可以或许应用彩色的搁笔
可以或许支撑大年夜部分浏览器

　　缺点是：

搁笔大年夜小是固定的（不克不及根据场景自由缩放）
Retina 屏幕须要两倍图

开辟人员拿到如许的搁笔，平日须要先将其合成为一张图片，以便利制造雪碧图，这个过程可以由开辟人员本身完成，也可以由设计师来做（设计师可以根据源文件中间导出一张包含所有搁笔的 PNG 文件制造）。

制造雪碧图的对象有很多，我比较常用的在线雪碧图对象是：Sprite Cow，或者是 NodeJS 平台下的构建对象插件，如：webpack-spritesmith。

应用 SVG（可缩放矢量图形），W3C 标准是最被看好的 Web 端图形解决筹划。它能供给如渤踉路径、Alpha 通道、滤镜效不雅等复杂衬着才能，具备传统图片没有的矢量功能，还可以被记事本等浏览器、搜刮引擎拜访。

设计师可以轻松的在设计画图软件（AI，PS）的赞助下导出 SVG 格局的搁笔/图片。

但今朝，国内 svg 还没有被异常广泛的应用，原因在于兼容性不足，不克不及够很好的兼容旧的 IE 版本和一些 Android 原生浏览器。

1. 选择合适绘画的画板

上图为百度对 2017 年前三个月的浏览器应用进行的统计，今朝国内还有跨越 20% 的用户仍在应用 IE8，9 甚至是 IE7。

3. IconFont

IconFont 是今朝最为风行的搁笔解决筹划，顾名思义，它就是字体文件，你可以用任何一个字体编辑对象打开它，如不雅你打开某一个查看，就会发明它就是一些路径，这些路径可以用 AI，PS，Sketch 等软件来绘制。

IconFont 的长处在于可以或许用 CSS 控制样式，无穷缩放而不掉真，支撑 IE7+，兼顾屏幕浏览器，不过缺点是不克不及支撑彩色搁笔（拥有多种色彩的搁笔）。获得 IconFont 的方法也很简单，设计师将搁笔经由过程 AI/PS 转成 SVG 文件，然后由开辟人员经由过程对象（在线或者本地）转换为 IconFont，比如：国外的 icomoon.io，国内的 iconfont.cn，开源构建对象插件有 gulp-iconfont等等。

产生合适 Web 开辟的搁笔

“产生合适 Web 开辟的搁笔”是我们本篇文┞仿要存眷的重点。

1. 应用图片的方法

如不雅开辟人员直接应用图片，则相对简单，设计师只须要针对通俗屏幕和 Retina 屏幕预备两套图（单倍图和两倍图）。

以国内某有名的中文小说袈淠读网站为例，会针对不合的设备应用不合倍数的 logo 图片，以包管在如 Retina 屏幕下的清楚度。

1/3 1 2 3 下一页尾页

　　推荐阅读

　　号称“编程语言年”的 2017 ，都发生了哪些大事？

【限时免费】岁尾最强一次云计算大年夜会，看传统、社区、互联网企业若何碰撞？下一?版本 JDK 10 筹划将在 2018 年 3 月敏捷推出，具有局部变量的类型推导和垃收受接收集寡居口等特点。 I>>>详细阅读

本文标题：前端不止：请告诉我，你要什么样的图标

地址：http://www.17bianji.com/lsqh/40202.html

1/2 1