svg格式的图片转web字体

转自http://c7sky.com/icomoon-app.html

Web Fonts 是伴随着 CSS3 的 @font-face 一起火起来的技术。使用 @font-face 你可以在网页上使用任何字体,而不需要考虑用户的电脑上有没有这个字体。如果你经常上一淘网,有没有发现它的网站 LOGO 就是用 Web Font 实现的?在这篇文章中,我将把小影志的 LOGO 变为 Web 字体,下面就开始吧~
一、准备 SVG 格式的资源
首先需要将每个字符或者图标保存为 SVG 格式,以便稍后导入到 IcoMoon 中。Tips:
保存为纯色即可,因为 WebFont 只支持一种颜色
路径节点越少,最后生成的字体文件也就越小


二、导入 SVG 文件到 IcoMoon
打开 IcoMoon App,点击左上角的 "Import Icons" 图标,导入你想要添加的 SVG 文件。
导入文件后,你也可以在网页中对 SVG 进行编辑,选择 "Edit" 按钮,再点击你要编辑的图标就会打开编辑窗口。

三、创建并导出字体
把你要导出的图标全部选中后,点击 "Font >" 按钮转到导出页面,在该页面,你可以编辑每个图标的名称和 Unicode 编码,如果你不了解的话,保持默认即可。
点击上方的 "Preferences" 按钮,在弹出的窗口中,你可以设置 Font Family 的字体名称,class 前缀等参数。
全部调整完毕后,点击 "Download" 按钮下载字体文件包。
四、应用字体
在下载的文件里,主要包含了 Woff/eot/ttf/svg 格式的字体文件和一个 HTML 示例文件及 CSS。引入 CSS 文件:
<link rel="stylesheet" href="style.css" />

通过设置 class 调用相应的字体图标:
<span class="icon-c"></span>


Enjoy!

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 最近兴致上来,就想更换了那Blog标题字体(汉字的);网上搜索了一番,发现蘇新詩柳繁體这款甚合我心;然后就着手搞将...
    晚晴幽草阅读 7,089评论 1 7
  • 我是一个前端程序员,我有一个梦想,我希望我的网页在不同的显示器上表现一致,我很任性,我不喜欢用什么雪碧图去设置po...
    靠谱男青年奖得主阅读 10,258评论 17 164
  • 首先说明,我是web前端开发的新手,高手忽喷!。最近开发一个微信商城,要用到很多图标,之前我都是用@×2雪碧图。但...
    Cola丶ZYQ阅读 6,657评论 1 2
  • 昨天又梦见她了,但情形却很奇怪,在意志上的确是她的意志没错,但出现在梦境中的人,其身体却是另一个女孩。 我们一同出...
    药师之名阅读 2,854评论 0 1
  • 1.内购需要 visa信用卡(支持美元转换)卡号,开户行信息,账户人基本信息 产品图片(密钻效果图)尺寸640*9...
    狼凤皇阅读 3,514评论 0 0

友情链接更多精彩内容