把图标转成web字体

wua_wua2012 发布于2019-08-29 12:43 / 2146人阅读

摘要：这章要说的是如何把自己设计的转成，在网页上使用字体图标除了图像清晰度之外，主要还是清晰度，特别是用于手机上多屏的情况无论屏幕何种分辨率都不会模糊，不用额外做响应处理。

对字体大家一定不陌生
一般使用Font-family: Georgia, SimSun, “宋体”设置字体。字体主要使用两种:衬线和非衬线，但这不是我们这章的主要内容。
这章要说的是如何把自己设计的icon转成font，在网页上使用！

字体图标除了图像清晰度之外，主要还是清晰度，特别是用于手机上多屏的情况无论屏幕何种分辨率都不会模糊，不用额外做响应处理。其次是灵活度，使用字体图标可以随意设置大小和颜色，不用因为一点不一样又重新切图。

兼容性，ttf,svg支持低版本，woff支持谷歌火狐等，如果只是手机上使用可以使用woff格式就可以了。特别注意，如果引入字体不在同一个域名下是会出现跨域的，无法下载字体。设置CORS做处理能兼容到ie7。

1,在这里要使用到一个编辑字体的软件FontForgeBuilds，下载地址：网下找一个好了

2,安装完打开之后选择一个字体，或者新建一个字体：

可以看到这是已经有字的字体

3,选择一个空的，右键New Outline Window打开这个字的路径，把我们事先准备好的icon的带路径的svg（这个可以找UI小姐姐帮忙导一个，ai画好icon后路径轮廓化描边导出svg就可以用）从File处Import进来，调整一下位置，可以在字体那页看到这个icon的显示位置

4,回到字体页，右键该字，选择Glyph Info修改name和value值，value值用于在页面上显示

5,生成字体，从File处Generate Fonts，选择要生成的字体格式，和存放的位置，确定后点击Generate ，接下来会弹出错信息但不要管它，直接Generate。

6,使用为刚刚编辑的那个字的标识

123456

我们刚刚导入的那个搜索icon就出来了：

感觉牛X轰轰，我都被自己征服

idc机房托管专线服务把html转成jpg 把文件转成html 把源代码转成asp js把乱码转成中文

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/112101.html

css可变色图标及原理分析

摘要：只是，仅支持这一种格式是专门为开发而设计的字体，其字体尺寸更小，加载更快，应该优先使用。字体图标技术的实现就是把通常的字符集映射成了另外的图标形状例如把映射成了本文的目标是：使用css可以控制图标的颜色，大小需要工具：png转svg工具(如果ui给的svg就更好了) iconfont(图标转代码) 第一步，把图标转成svg格式的打开网址 https://www.bejso...

RebeccaZhong 2019-08-30 15:55 评论0 收藏0
iconfont实践小结

摘要：所以实现小图标时雪碧图跟图标字体会在一个网站共存，自定义图标字体为什么比较耗时，且太复杂图标无法实现请往下看开发流程就了解了。参考资料细谈浅谈图标字体向下兼容优雅降级技术绘制小图标技巧雪碧图图标字体矢量小图标设计本文对应源码源码地址演示地址 showImg(https://segmentfault.com/img/bVRnAC?w=431&h=220); 之前写了一篇关于雪碧图的博文，...

bitkylin 2019-08-29 13:00 评论0 收藏0
字体图标的使用

摘要：字体图标的不足既然字体图标那么有效率，那么为什么不都使用字体图标呢现在的限制主要是字体图标的开发要求比较高，毕竟是开发一种字体。自己开发字体图标很累，幸好有很多乐于分享的，现在有很多网站把一些常用的图标都做成了字体图标分享了出来。目录字体图标的介绍 iconfont的使用基于unicode的用法： ...

shuibo 2019-04-23 11:54 评论0 收藏0
FE.WX-小程序“无聊广场”游戏前端性能优化与踩坑攻略

摘要：本文主要针对小程序无聊广场的前端开发内容做总结，记录常见的一些老生常谈的进阶手法，对小程序中的动画音频等踩坑做出解决方案。背景一个交互不复杂，对刷新频率和动画效果要求不高的小游戏，不需要使用canvas主导的解决方案，使用dom操作一样可以完成。节省了cocos creater的学习成本，值得一试。本文主要针对小程序无聊广场的前端开发内容做总结，记录常见的一些老生常谈的进阶手法，对...

qpal 2019-08-22 18:26 评论0 收藏0
SVG vs Image, SVG vs Iconfont

摘要：结论绿色部分表示比略胜一筹的地方，黄色部分表示有所欠缺的地方，灰绿色表示差不多。兼容性列表可以良好地支持多色及多色变化。以为例说明便捷使用。综上结论选择或许是一个不错地选择去替代的使用方式。这可能是个别人写过很多次的话题，但貌似由于兼容性的原因？图标的显示还是用着 Iconfont 或者 CSS Sprite 的形式？希望通过自己新瓶装旧酒的方式能重新引导一下问题。 SVG vs I...

kel 2019-08-29 17:20 评论0 收藏0