图标字体化解决WebApp小图标模糊问题

新知榜官方账号

2023-09-30 18:24:23

一、制作前基础知识普及

在制作图标前请下载由阿里妈妈MUX提供的矢量图标制作模板；尽量使用illustrator制作矢量图标；将illustrator中绘制的图形另存为SVG格式；在绘制图标的过程中不要使用AI图形模块的旋转、镜像等功能；避免出现图形绘制过中断点的现象；不可以用色彩叠加的方式来达到模块造型。

二、图标栅格

数字形态下，字符是用抽象化的图案绘制成的。当文本显示在屏幕上时，位置非常精确，理想的字体形状需要用一定数量的像素栅格显示。图标设计师常用栅格来控制图标组成元素的比例关系；但是我们在矢量图标制作过程中引入栅格概念主要目的是模拟字体图标在不同尺寸下的展现效果，以达到优化的作用；也就是说图标设计的时候我们用栅格来模拟像素，一个格子就是一个像素，一个图标需要一定数量的像素组成。

三、实例操作

1、下载模板；2、在AI中删除模板的示例图，根据栅格绘制图形；3、将AI中绘制好的图形另存为SVG；4、打开iconfont.cn网站并把保存好的SVG文件拖入上传框中；5、完成上传，这样就获得了一个矢量的字体图标。

四、字体图标的优势和劣势

优势：轻量性、灵活性、兼容性；劣势：只能被渲染成单色或者CSS3的渐变色、屏幕阅读器的问题、使用版权上的限制等。

五、如何获取图标字体及使用

可以通过免费或付费的方式获取图标字体，使用方法包括把字符直接写在HTML文件里、使用CSS来生成内容、用data-icon属性等。制作自己的字体图标需要有矢量图标制作的软件，并且能够输出SVG格式，然后通过icomoon、fontello、iconfont字体生成器等工具去生成所要的图标字体。

六、展望

期待图标字体生成器工具能够支持导入更多的自定义格式、能够引入项目管理的机制、提供更多免费、丰富的图标字体供下载使用等。

本页网址：https://www.xinzhibang.net/article_detail-14572.html

寻求报道，请

关键词

图标字体 WebApp 小图标模糊问题矢量图标制作栅格

分享至微信：

相关工具

Compose AI

免费的Chrome浏览器自动化写作扩展

QuillBot

AI英/德语写作润色和改进工具

字符狂飙

全方位AI文档生成工具，快速生成专业文档

快文CopyDone

AIGC原创内容创作和营销文案生成

Jenni

AI研究文章和博客写作辅助工具

万彩AI

全能型AI内容和文案创作助手

三个国外专业免费的调色网站

三个国外专业免费的调色网站无论制作视频、编辑图片，合适的色彩会让你的作品增加视觉冲击力，所以专业的调色技术价值非凡，一部电影或一部好的视频、图片海报，专业调色耗费少则上万，多则上百万，只是大家对专业调色这个行业知之甚少，今天网玩君就为大家分享三个国外专业免费的调色网站，记得收藏好，以后编辑视频、图片

分类标签调色网站免费

04-18 16:42

电影制作中的纹理技术

纹理在电影制作中的重要性纹理是指将详细的表面特征应用于3D模型或视觉效果元素，使其看起来更逼真。纹理对于创建视觉上引人入胜且可信的电影场景至关重要，尤其是涉及CGI、动画或特效的场景。纹理还支持叙事和讲故事，可以通过纹理设置年龄大小等属性，为故事奠定基础。纹理技术的发展历程自胶片问世以来，电影制作人

分类标签纹理电影制作CGI视觉效果微缩模型UV映射

04-18 16:42

UnrealSynth虚幻合成数据生成器-NSDT

UnrealSynth虚幻合成数据生成器-NSDTUnrealSynth基于UE5虚幻引擎开发，可用于生成合成数据集，包括图像和标注数据。可用于各种行业细分场景中目标识别任务的实施效率提高。UnrealSynth合成数据工具包内容UnrealSynth基于UE5虚幻引擎开发，目前支持YOLO系列模型

分类标签 UnrealSynth虚幻引擎数据合成YOLO模型深度学习训练数据

04-18 16:42

人工智能与音乐：谷歌的Project Magenta

谷歌的Project Magenta利用人工智能技术生成音乐和其他艺术形式，如素描、视频和笑话。该项目的目标是为人们创造新的交流方式。本文介绍了该项目的背景、发展历程和应用。在上世纪90年代中期，谷歌研究院的Douglas Eck就开始了他的人生目标：融合人工智能与音乐。二十年后，他与一支谷歌研究团

分类标签人工智能音乐谷歌

04-18 16:42

如何做好SEO优化？

如何做好SEO优化？想要做好SEO优化，得从站内优化和站外优化两个方面入手。一、站内优化1.关键词定位和分析关键词整理是SEO优化中的核心工作，一旦定下来就不建议再次去更改。站长始终要记住关键词一定要和行业、产品、领域息息相关，同时还可以参考竞争对手所做的关键词，可以利用站长工具、5118、爱站网、

分类标签 SEO优化关键词定位网站架构布局

12-11 08:19

万兴科技：营收实现稳健增长，拥抱AIGC新机遇

万兴科技：营收实现稳健增长，拥抱AIGC新机遇国元证券股份有限公司耿军军近期对万兴科技进行研究并发布了研究报告《2022年年度报告点评：营收实现稳健增长，拥抱AIGC新机遇》，本报告对万兴科技给出买入评级，当前股价为75.24元。万兴科技(300624)事件：公司于2023年4月7日收盘后发布《20

分类标签万兴科技营收增长AIGC

12-11 02:11

AI分身市场潜力巨大，万兴科技、京东等已率先布局

“AI孙燕姿”和“CarynAI”引爆市场最近，“AI孙燕姿”和“CarynAI”以以假乱真的程度引爆市场，都是通过采集本人的语音、文字、图像等素材，并通过开源的生成式训练模型进行训练而成。其中，“CarynAI”成功地借助AI技术，打造了自己的AI分身，通过付费的方式，跟AI版的自己进行交往，预计

分类标签 AI孙燕姿CarynAIAI分身AIGC技术虚拟主播数字人

12-11 02:10

万兴科技推出名师必备讲演神器“万兴智演”

万兴科技推出名师必备讲演神器“万兴智演”9月8日，万兴科技面向泛知识领域，推出名师必备讲演神器“万兴智演”。该款AI演示新品集成强大的AIGC能力、精美的行业课程模板以及动画特效素材，大大简化课件制作过程。同时，产品内置强大的录制、直播功能，通过真人实拍与演示内容相结合的形式，实现人景融合的实时演示

分类标签万兴科技万兴智演AI演示

12-11 02:09

万兴科技创始人吴太兵在2023互联网岳麓峰会上的主题演讲

万兴科技创始人吴太兵在2023互联网岳麓峰会上的主题演讲2023互联网岳麓峰会论坛上，万兴科技创始人、董事长兼总裁吴太兵进行主题演讲。红网时刻新闻记者郭雅倩甘红长沙报道十届、十年，岳麓峰会从2014年的“湖湘汇”到如今云集万人的盛会，积攒了巨大的关注度和影响力。6月19日，2023互联网岳麓峰会在长

分类标签万兴科技吴太兵岳麓峰会

12-11 02:05

樟宜机场：通过科技改变旅客体验

樟宜机场：通过科技改变旅客体验樟宜机场在智能手机上移动的小红点代表了在机场上空飞行的飞机，通过传感器的追踪获取了相关飞行轨迹。机场通过人工智能、面部识别和数据分析等技术的应用，不断提高机场运营效率，保持创新，致力于成为一个旅客体验更佳、充满活力的目的地。人工智能优化机场运营效率樟宜机场在2017年共

分类标签樟宜机场科技旅客体验

12-10 22:16

相关快讯

秘塔写作猫怎么看文献？

秘塔写作猫看文献步骤分为以下几个步骤： 1、初筛论文标题、关键字、摘要； 2、扫一遍图表以及标题、图注，回到引言； 3、了解文章的细节信息，包括实验具体步骤等，对于自身科研项目的开展设计有重要参考价值，文章的结果和讨论部分； 4、用一句话概括实验、结果、讨论章节中的每一段内容，组成一个阅读笔记； 5、给出建议。

2023-06-25 11:00:10

秘塔写作猫高级版和免费版的区别？

1、价格不同：秘塔写作猫免费版是完全免费的，而付费版需要额外购买激活码才能使用。 2、功能不同：免费版只能用于创建文档和提交文档，而付费版则可以进行更多高级操作，如添加图片、录音、视频等。 3、兼容性不同：免费版只能在Windows、MacOS和Android平台上使用，而付费版则可以在更多平台上使用，如iOS、Windows、MacOS和Android。 4、使用限制不同：免费版没有任何使用限制，而付费版需要在规定时间内购买并激活，否则将被冻结。

2023-06-25 10:58:31

用秘塔写作猫查重率很高吗？

用秘塔写作猫查重率确实比较高。这是因为秘塔是一种自动化的检测系统，它能够快速而准确地比较一篇文章和已有的其他文章是否存在相似之处。在这个过程中，秘塔会通过比对文章的语法、词汇、结构以及其他一系列因素来确定相似度，并给出相应的结果。尤其是对于涉及学术论文、期刊文章等领域，秘塔的检测机制更会更加严格和准确。因为在这些领域，对抄袭和学术不端的要求通常更高，所以秘塔对于这些文章的查重要求也更高。然而，需要注意的是，秘塔并不一定就是完全准确的，特别是在涉及到专业术语、特殊领域和复合句等方面，秘塔的识别可能存在误

2023-06-25 10:56:57

ChatGPT Midjourney 文心一言文心一格 bing新必应 Stable diffusion 稿定设计墨刀AI mastergo Adobe Firefly runway