有一个英语成语叫做一图胜千言。不知道大家有没有听过？意思是一张静态数据的图片可以表达一个巨大的意见。拍摄与主题相关的图片比实际的注释更有效。
如果要用一句话来表现图标的作用，可以带出比任何一个四字成语都更贴切的词。对于本文的内容，我们先去说说一些关闭图标的工作。
图标的致命周期时间(事件步骤)
接近图标的四明周期时间，在我亲身经历过的新项目中，有以下两个:
第一种方法:图标库(选择链接)->:图标应用(开发链接)
第二种方式:图标构思(构思链接)->:导出图标(相同链接)->:图标应用(开发链接)
一般来说，小公司会自己接受第一步。但如果一个大型结构或企业有比较极端的精英团队战斗资产，一般会听取意见。第二种方式是获得大量的独立权利来争取企业VI的创建(视觉识别，公司视觉效果歧视)。
但无论哪种方式，都有两个角色:概念师和Web开发者。只有第一种方式，设计者看不到。
图标在概念战中的应用
想法总是由不了解Web开发的空想家来执行。他们会根据材料要求画出满意的图标，然后交给网页开发员工使用。
(ThoughtWorks网站“联系我们”图标)
为什么要先引入图标的使用，而绕过导出过程？本很简单，因为我们都需要知道服务的专用工具是谁，才知道如何准确地服务。
如何使用三种图标？
使用图片
间接将设计者绘制的图标分离出来，用PNG布局图片一个一个导出。那时，最难看的逐图标方式。
(平面图标图标图标)
其优点是:
可以使用彩色图标。
能够支持大型单元阅读软件。
缺点是:
图标的大小是坚定的(不能根据情况缩放)。
视网膜显示器需要双图像。
创业员工得到这样的图标，但要求先溶解成一张图片，方便制作雪碧贴图。这个过程可以由先锋员工自己来完成，也可以由概念师来完成(概念师可以根据一个所有图标都从源代码中间导出的PNG文件来制作)。
制作sprite贴图的道具有很多，我经常用的主线上的sprite贴图道具是SpriteCow，是关于NodeJSauditorium的建筑道具软件，比如webpack-spritesmith。
2.svg的间接使用
使用SVG(可缩放矢量图形格式)，W3C是最流行的web端图像处理方案。可以提供剪贴法、Alpha通讲、ps滤镜结果等巨大反差。它具有传统图片磁带的矢量素材功能，可以被计算机浏览器和文本文档等掠夺性模块满足。
设计师可以借助设计图纸的硬件配置(AI、PS)导出SVG布局的图标/图片。
但目前国内已经广泛使用svglending，结果在兼容模式上还不够，不能比好到可以兼容老IE版本号和部分Android原生阅读软件。
(可以用svg吗？)
图为百度搜索对2017年前三个月终止使用阅读软件的统计分析。目前国内仍有20%以上的客户使用IE8、9甚至IE7。
3.图标字体
Icon是现在比较流行的图标解决方案。这是一个容易出错的习惯用法。这是一个字体文件。您可以编译任何字体样式的项目并打开它。如果你开了某种支票，你就会创造和发明一些方法。这些方式可以用AI、PS、Sketch等硬件配置来画。
IconFont的优点是可以用CSS把握样式，规模有限但不实用。支持IE7和集成显示屏的电脑浏览器，缺点是最好支持彩色图标(各种颜色的图标)。获取IconFont的方式也很简单。设计师通过AI/PS全流程把图标转换成SVG文档，然后先锋工作人员通过items全流程(主线上关于local)转换成IconFont，比如国外的icomoon.io，国内的iconfont.cn，gulp-iconfont就是搭建开源系统的软件。
生成适合Web开发的图标。
“创建适合Web开发的图标”是本文的一个重要方面。
1.使用图片
如果开创者员工间接使用图片，则相对性简单，设计者只要求为通用显示屏和视网膜显示屏准备两张图片(单图和双图)。
以国内某知名中文路径接入网站为例。不同放大倍数的logo图片会用于不同的武器装备，让接入点像视网膜显示屏一样清晰。
。标志包装。徽标a{
显示:块；
宽度:219px
高度:52px
背景:url(/qd/images/logo.dbed5.png)无重复；
}
@medianotall，notall，(-WebKit-min-device-pixel-ratio:1.3)，notall，(min-resolution:1.3dppx){
。标志包装。徽标a{
背景:URL(/qd/images/logo3x.FD980.png)无重复；
背景-重复:不重复；背景尺寸:217像素；
}
}
)
2.使用SVG
转换成SVG后，SaraSoueidan在GenerateLondon2015大会上的演讲《SaraSoueidan:SVGforwebdesigners(anddevelopers)》将在那里介绍。如果不方便的话，SaraSoueidan有一个特别的嘉宾“为Web创建和导出更好的SVG的技巧”，用更实用的方式解释了从SVG导出的内容。虽然，有一篇国内翻译文章《SVG的创建和导出能力》，但首先，我推荐一篇Adobe技术工程师michaelchaize写的文章《用IllustratorCC导出SVG用于Web》，从AI导出SVG。
在已经提到的原材料中，我觉得玩视频更别扭，所以我要给大家展示一下这位高素质的阿蒂波女士的风范，她是一位前端开发和开发技术工程师(也是一位在家自鸣得意的演说家)。
客战视频中，中路来到了SVG需要注意的几个住处。由于文章数量的限制，简单外观有三个小技巧:
(1)选择适合画画的画板。
你有没有在网页中嵌入SVG，给它一个特定的宽度，然后发明它真的比你的特定规格小？创业员工经常会得到那种考试成绩。
一般来说，这时候SVG窗口中存在一定大小的亮红色gaproom空。窗口是按照样式表的具体规范来呈现的，但是它却额外衬了一条缝隙——都是围绕着图案的——这让你的图片看起来像是在“缩小”。结果，那个缝隙已经在窗口中排成一行，占据了房间空。为了避免那种情况，你需要确保你的画板足够好，以容忍衬的形象，而不是太大。
画板的规格就是导出的SVG窗口的大小，画板上的所有缝隙最终都会在大城市的窗口上留下一条鲜红的缝隙。
对于人工智能项目的开发，你可以从上面的SVGO恶化选项中选择“更喜欢视图框而不是宽度/高度”。
(2)选择合适的导出选择项。
图中显示的选项是适用于Web应用程序的推荐SVG。如果不使用Web字体样式，可以选择将文本转换到表层。
如果svg包含大量的墨水笔，那么输出较少的tspan元素已经可以在很大程度上压缩SVG的大小了。
(3)退化SVG
但一直主张从图形编辑器中导出SVG，然后用变质物品来阻止变质。像:删除无用评论和战斗元数据，简化编码，简化分离方式等。推荐的第三轮物品:NodeJS物品svgomg，AI软件SVG-NOW，素描软件Svgo-compressor等。请参考SaraSoueidan的文章“有用的SVGO[优化]工具”。
3.图标字体
如前所述，IconFont一般是由SVG经过全流程转化而来，如果开发最终需要IconFont呈现图标，那么对于导出的SVG就有一些特殊的要求。我之前介绍过几个IconFont转换项，每个项都有一个实际的文本文档来表示SVG绘画的划分规则。虽然没有区别，但也有一些矛盾:
将墨水笔更改为模式
不使用图片(仅字体样式)
修剪到艺术边界(之前介绍过)
将路径笔划转换为封闭和开放图形。
简化无用的结
......
iconfont中大量的图纸划分规定请参考:IconFont.cn文本文件、Icomoon文本文件、gulp-iconfont文本文件、fontello文本文件。
和频繁的战争一样。
SaraSoueidan曾经说过，“幻想家和开拓者应该成为好伙伴”。
明天的话题讨论正好触及那两个字。也许你会觉得他们看起来是面对面的，其实不是。你可以看看上图，在快速发展的过程中，可以区分角色，分担工作职责，所以分工发展的思路也不例外。
(在快速开发中区分角色和分担工作职责)
有想过作品，你会创造发明。很多设计师都懂HTML和CSS，这样就能用Chrome检查元素了。此外，许多开发人员有兴趣讨论想法。而每个人的设计师和开发人员都会坐在统一的桌子上一起做事，以此来修复同一个战争对合作的频繁需求。
作为一个Dev，我是很多远见者的爱好者(至少我是这么认为的)。
为了更好更强的保证同一岗位的职责分担，展示了一个新的(比较新的)角色UIDev，如下图所示。不，我们那边没有详细的聊天，因为对哪个角色的定义意见一致。
(UI开发者——引用自堆栈溢出之谜)
结束
在本文中，我们已经讨论了三种使用图标的方法:picture、SVG和IconFont，它们只是要讨论哪个主题的冰山一角。虽然文章数量很短，但重点是沙井图标数量的核心区域是构思教师和员工的便捷合作，寻找满足精英团队需求的解决方案。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）