摘要：自己制作字体图标的时候有需要注意这些阿里图标库的图标多，免费但是编辑器不如好用。建议设计师对于一些常用图标直接去阿里图标库找，下载文件即可。
优点
下面的简介来自，著名字体图标库Font Awesome的首页，http://fontawesome.io：
Font Awesome gives you scalable vector icons that can instantly be customized — size, color, drop shadow, and anything that can be done with the power of CSS.
Font Awesome 或者其他字体图标能提供可以直接使用CSS修改的可缩放的矢量图标，可以修改的内容包括图标的大小、颜色、阴影等这些CSS的力量能做到的一切。
简单来说优点有：
矢量（无限缩放、高清）
CSS样式（通用、灵活）
体积更小（快速）
......
缺点这些可能是项目没用上字体的图标的一些原因，并不完全是字体图标的缺点：
库（Font Awesome......）太大了
不能完全符合设计稿
兼容性、可访问性
太麻烦，还是之前切图片图标方便
历史项目，改动成本太高
解决方案or分析 库（Font Awesome......）太大了 & 不能完全符合设计稿使用字体图标编辑器修改字体图标库，参考图标字体(IconFont)制作这篇文章中提到的软件FontCreator去编辑字体图标库的某个字体文件，重新转化生成。删除大量用不到的字体图标后，图标库的体积会大大缩小。
方案一略麻烦，不推荐。我们其实可以自己做字体图标库，参考ICONFONT平台功能介绍、可能更好用的IcoMoon App。自己制作字体图标的时候有需要注意这些：
阿里图标库ICONFONT的图标多，免费但是编辑器不如IcoMoon好用。不过可以从阿里图标库下载SVG图标再导入IcoMoon中制作。
建议设计师对于一些常用图标直接去阿里图标库找，下载SVG文件即可。对于实在找不到的图标才自己动手做，使用Ps、Ai、Sketch等做出符合字体图标标准的SVG即可。最好除了图标本身外不要有多余的细节如边距、背景等，这些都会用CSS写。前端拿到一套SVG后自己去制作成字体图标即可。
SVG图标上传到图标制作平台后，还需要做简单调整包括默认大小、位置、对齐等。整个公司可以按照一个统一标准调整这些SVG。如果是IcoMoon的话，调整完毕后记得把SVG再下载下来，好好保存（给设计部发一份），之后会很通用。而且IcoMoon非白金会员的话是无法在线存储的。
简单图标在设计阶段就无需自己设计，复杂图标也可以导出SVG制作成通用的字体图标，不但能还原设计稿，还可能效率更高。
比如，某设计的不会画图标，于是TA在阿里图标库把PNG的图标下载下来，然后在Ps里做视觉稿，然后前端切图小弟又从PSD中把图标切出来，xx.png，xx@2x.png，有时候这些图标竟然还自带背景色......
比如，某设计会画图标，于是把通用图标画了个遍，然后切图......
只能说：
兼容性、可访问性这是个不怎么追求效率的时代
兼容性
字体图标是基于WebFont来实现的，WebFont的兼容性请看，caniuse WebFont。
再提供多种格式的字体的前提下，兼容性完全不是问题。
可访问性
国内很少关注这个吧，其实Font Awesome提供了相关的说明，请看，Accessibility
太麻烦，还是之前切图片图标方便其实直接切出图标，如Sketch可以直接导出多种大小的图标。配合各类打包工具如Webpack，可以把小图标转化成base64代码。从某种意义上来说确实挺方便，而且也支持Retina，也挺小。
其实这方案也行，不过，最重要的是可以把切图标的工作抛给设计师吧......
有时候根本不考虑Retina了，不考虑响应式，不考虑移动端了，不考虑......，总之先把项目赶出来。
历史项目，改动成本太高有些项目确实是前辈没有考虑到用字体图标，或者那时候还没有这种技术。
但是有些最近的项目，那非常可能是前辈挖的坑，区别是有意无意吧。不过大多数都不是故意的。赶而已，懒而已。
更多 & 参考图标字体化浅谈
其他可以告诉我你不用字体图标的理由吗？有些兼容、缺陷可能未能列举出来，见谅欢迎补充。
我不用字体图标，我用kaomoji：(☆_☆)和emoji： ?
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/111572.html
摘要：开发过程中，可能会遇到这种情况电脑屏幕是寸，寸的，但是在浏览器中显示宽度没有达到自己屏幕的宽度，导致样式把控上很不方便。以确保大多数笔记本的显示情况是符合我们期望的那样。前端技术交流群欢迎加入 开发过程中，可能会遇到这种情况：电脑屏幕是13寸，14寸的，但是在浏览器中显示宽度没有达到自己屏幕的宽度，导致样式把控上很不方便。 这种问题多发现于笔记本电脑上，并不是说台式机上没有这个问题，而...
摘要：开发过程中，可能会遇到这种情况电脑屏幕是寸，寸的，但是在浏览器中显示宽度没有达到自己屏幕的宽度，导致样式把控上很不方便。以确保大多数笔记本的显示情况是符合我们期望的那样。前端技术交流群欢迎加入 开发过程中，可能会遇到这种情况：电脑屏幕是13寸，14寸的，但是在浏览器中显示宽度没有达到自己屏幕的宽度，导致样式把控上很不方便。 这种问题多发现于笔记本电脑上，并不是说台式机上没有这个问题，而...
摘要：开发过程中，可能会遇到这种情况电脑屏幕是寸，寸的，但是在浏览器中显示宽度没有达到自己屏幕的宽度，导致样式把控上很不方便。以确保大多数笔记本的显示情况是符合我们期望的那样。前端技术交流群欢迎加入 开发过程中，可能会遇到这种情况：电脑屏幕是13寸，14寸的，但是在浏览器中显示宽度没有达到自己屏幕的宽度，导致样式把控上很不方便。 这种问题多发现于笔记本电脑上，并不是说台式机上没有这个问题，而...
摘要：前端性能优化的涉及点从服务器到协议再到宿主环境本身都要有比较深刻的认识，业界目前主要还是以雅虎总结出来条前端性能优化的黄金军规为参考。 欢迎大家前往腾讯云技术社区，获取更多腾讯海量技术实践干货哦~ 导语 : 从事前端有6年+的时间了，从最开始的美工到重构再到偏向js逻辑开发的前端开发，一直在前端这个行业里面摸索和学习，我现在将自己这些年的一个心得体会来个系统性的梳理写成一篇关于性能优化...
摘要：为什么要使用图标字体使用这项技术总得有使用它的理由那么，我们来分析下的优缺点，看是不是适合正在开发的项目。优化项目性能字体的加载速度快于图片，就算图片经过合并。 为什么要使用图标字体 使用这项技术总得有使用它的理由！那么，我们来分析下iconfront的优缺点，看是不是适合正在开发的项目。 优点 1、优化项目工作流程 对于web前端项目中的图标，很多情况下是使用的png图片，但如果图标...
阅读 712·2021-11-18 10:02
阅读 1374·2019-08-30 15:56
阅读 2475·2019-08-30 13:47
阅读 2493·2019-08-29 12:43
阅读 646·2019-08-29 11:19
阅读 1629·2019-08-28 18:23
阅读 2558·2019-08-26 12:23
阅读 2886·2019-08-23 15:29
