将图标转换成web字体

概要:1.如何使用IcoMoon将矢量图转换成Web字体;2.如何使用生成的字体通过css应用到Web页面中。

使用字体图标的优势

字体图标除了图像清晰度之外,比位图还有哪些优势呢。

  • 适用性:一个图标字体比一系列的图像(特别是在Retina屏中使用双倍大小的图像)要小。一旦图标字体加载了,你的图标就会马上渲染出来,不需要下载一个图像。
  • 可扩展性:图标字体可以用过font-size属性设置其任何大小。这使您能够随时输出不同大小的图标,然而,使用位图,你必须得为每个不同大小的图像输出一个不同文件。
  • 灵活性:文字效果可以很容易地应用到你的图标上,包括颜色,阴影和翻转等效果。他们还可以在任何背景下显示。
  • 兼容性:网页字体支持所有现代浏览器,包括IE低版本。详细兼容性可以点击这里

创建一个图标字体

Symbol字体可以使用一个专用的字体创建应用程序,比如说Glyphs,但是一个专业的排版工具之外的需求或要求构建一个简单的图标字体,比如说间距和粗细这样的物理关系并不是非常重要。

目前为止,最简单的方法是使用Keyamoon制作的一个Web应用程序IcoMoon,可以解决字符转换成Web字体的所有麻烦。

这个Html5应用程序解决了创建字体文件和如何使用创建的图标字体的一切麻烦。IcoMoon附带了大量的图标,你也可以通过图标库添加更多的图标,其中大部分都可以免费使用(使用时请先查看他们的许可证)。如果你正在寻找如“文件下载”和“购物车”一样的图标,那么你会发现,使用标准的图标比你自己创建的要方便得多。

一步一步

1、准备你的插图

首先,你需要能创建矢量图标的程序,并且能够找到输出SVG格式,比如“Illustrator”或者“iNkscape”。

当你设计的时候,你可以使用任何你喜欢的颜色,但是图标必须是一个纯色。确保每个图标的尺寸大小是相同的。有一个图标更高或者更宽,会很难创建一个一致的字体。在这里,我们不得不减少飞艇图标的宽度,以便它匹配其他图标。

2、清理

仔细检查每一个图标,以确保它没有缺陷——细节在小尺寸上是完全的,当你放大的时候小的缺陷就能被发现。在所示图标,我需要删除参差不齐的路径。

在Illustrator中,使用Pathfinder工具统一层叠元素,减去前面元素,比如这些图标中的星星图标。

关键的原则是确保你的图标是可读的小尺寸。心可能的简化。

3、导成svg

现在,选择一个图标,并将它复制粘贴到一个新的文档场景中(例如200px X 200px)。缩放也是符合。你可能会发现它有一个基线尺寸的设置。使用彩色的图标,比如说在白色的背景中使用黑色的图标。

现在,选择菜单“文件”中“保存”,并选择将文件保存成“SVG”格式。使用默认的SVG设置。一旦你这样做,所有的图标,你可以创建一个Web字体。

4、导入到IcoMoon

打开IcoMoon Web app。导入一个图标,点击“Imort icons”按钮,然后选择您想要添加的SVG文件——您也可以一次添加多个文件。这些图标将会出现在“Your Custom Icons”区域中。如果他们是高亮的黄色显示,表示这些图标是你将要创建的图标字体。在这个例子中,你可以看到,我不仅导出我自己创建的图标,我还在“Mini-icons”中添加了别的图标。

5、从IcoMoon中导出字体

如果你想调整图标的位置、大小或旋转,你可以点击“Edit”按钮。可以使用“Save Copy”按钮来创建图片的变化(例如,一个镜像的衅标)。添加一个有意义的图标标记,因为这将被用来生成类名。

当你都准备好了,点击屏幕底部的“Font”按钮开始生成字体。这样你就可以指定哪个图标映射到哪个字符上,例如,如果你要设置一套六个旋转的球,你可以每这六个球分别指定字符:q、w、e、r、t和y。你也可以根据你自己的爱好选择一个字体的名字。你也可以调整字体的指标,除非你要设置你息定的字体和标准文本,不然你真的不需要担心这个。

6、下载字体文件

单击“Download”下载字体包到你的电脑上。他有一个字文件夹包含了字体本身(woff,eot,ttf格式),以及一个HTML示例页面和相应的CSS。甚至还有一个javascript文件和一个解决方法,如果你需要支持IE或IE7。

将font文件夹复制到你的网站,为你的项目添加字体。你需要从style.css文件中复制CSS样式,并粘贴到你网站的CSS文件中,但是我的方法是将它重命名为font.css,并保持他作为一个单独的CSS文件。你需要的时候在把这个CSS文件引入到你的HTML中。

<link rel="stylesheet" href="fonts.css" />

在CSS文件中你可以找到@font-face,你需要将URL路径修改成你本地的相对路径,或者你可以简单地把字体文件和你的样式放在同一个文件夹。

7、调用字体

正如你看到的样本文件index.html,有两种方法可以调用,一种是通字符(unicod或名称),另一种是通过类名。第一个例子使用了HTML5的data-icon自定义属性。

<div aria-hidden="true" data-icon="g"></div>

在这里,fs1类名用于设置字体的大小。这个“aria-hidden”属性有助于确保字符能屏幕阅读器读到。

第二种方法使用一个span元素:

<span aria-hidden="true"></span>

这个方法是非常有用的,你的字符可以与文本在内联中一起显示。

如果你想让图标具有链接功能,你可以将放在一个链接中:

<a href="
http://www.yoursite.com
"  data-icon="s"></a>

在这里,我添加了一个iconlink类名,并设置了一个悬浮效果:

a.iconlink {
  font-family: ‘youriconfont‘;
  text-decoration:none;
  color: #666666;
}
a.iconlink:hover {
  text-decoration:none;
  color: #999999;
}    

8、先进的想法

正如我们刚刚悬停状下改变图标颜色一样,我们可以使用的颜色属性和字体属性修改图标。你可以设置其他属,比如文本阴影和透明度,来设置图标的效果。

参考 http://www.cnblogs.com/hongchenok/p/3833583.html

http://www.w3cplus.com/css3/how-to-turn-your-icons-into-a-web-font.html

时间: 2024-10-21 17:28:55

将图标转换成web字体的相关文章

如何把你的图标转换成web字体

在这篇教程中,我们将看看如何使用一个免费的Web应用程序IcoMoon将矢量图转换成Web字体.然后在看看如何使用生成的字体通过css应用到Web页面中. 使用字体图标的优势 字体图标除了图像清晰度之外,比位图还有哪些优势呢. 适用性:一个图标字体比一系列的图像(特别是在Retina屏中使用双倍大小的图像)要小.一旦图标字体加载了,你的图标就会马上渲染出来,不需要下载一个图像. 可扩展性:图标字体可以用过font-size属性设置其任何大小.这使您能够随时输出不同大小的图标,然而,使用位图,你必

ICOMOON!强悍的WEB字体图标制造器/Web字体使用实例

IcoMoon!一个可以通过个性化设置来创建自定义图标(字体)的生成器!也可以将SVG图片,转换成web字体 IcoMoon是一项免费的服务,通过使用不同设置使我们能够创建自定义的ICON图或ICON字体.当然了,网站也有资源打包下载!包括大多数流行的免费图标集(在its library里搜索),您可以挑选其中任何一个自己钟意的图标下载.同时,它会提供两种下载方式:图片版和字体版! 图片版是经过CSS Sprites技术处理的PNG格式,字体版有多种格式供我们选择(EOT,SVG,WOFF,TT

Eclipse中将Java项目转换成Web项目的方法

前言: 用Eclipse开发项目的时候,把一个Web项目导入到Eclipse里会变成了一个java工程,将无法在Tomcat中进行部署运行. 方法: 1.找到.project文件,找到里面的<natures>标签,查看是否有下面的代码,没有则复制进去. Xml代码 <nature>org.eclipse.wst.common.project.facet.core.nature</nature> <nature>org.eclipse.wst.common.m

eclipse中,将java工程转换成web工程

1. 编辑工程的.project文件. 添加 <nature>org.eclipse.wst.common.project.facet.core.nature</nature> 到 <natures> ... </natures> 2. 刷新项目,右击项目–>Properties->Project Facets,在右边勾选Java.javascript(非必须)与Dynamic Web Module 3. 如果你的项目源代码文件夹不是WTP默认的

myeclipse将java项目转换成web项目,导出war包

1.项目右击属性,勾选下面两项,点击apply,关掉窗口,重新打开 2.打开assembly,删掉webroot目录,把对应的webapp目录添加进来 3.删掉项目新生成的webroot文件夹,即可export出war包了

Web字体工具整理,网页图标字体以及使用方法整理

1.Web字体免费生成工具: https://icomoon.io/app/#/select 2.Fontmin - 中文 WebFont 子集化生成工具 | 小影志 http://c7sky.com/ 3.更多资源整理 http://sc.chinaz.com/info/130228237055.htm 4.将图片转换成web字体教程 http://jingyan.baidu.com/article/f79b7cb346cf499145023e78.html

如何将svg图标快速转换成字体图标?

今天遇到一个客户需要我将页面的图标做成字体图标,想想哎可能整的麻烦,不过想想这也是对项目的一个优化 ( 1.字体图标直接用color自由控制颜色:2.整合在一起,减少http请求等     PS:平时了解这些,就是麻烦不想整...).客户还是比较贴心给我整理了一份整套网站的svg格式的图标:可是怎么快速将svg的图标转换成字体图标呢? 1.打开Iconfont-阿里巴巴矢量图标库 (http://www.iconfont.cn) 2.登录后依次点击 图标管理 - 上传图标ICON - 加入购物车

web字体格式及几种在线格式转换工具介绍

原文地址:http://blog.csdn.net/xiaolongtotop/article/details/8316554 目前,文字信息仍是网站最主要的内容,随着CSS3技术的不断成熟,Web字体逐渐成为话题,这项让未来Web更加丰富多彩的技术拥有多种实现方案,其中之一是通过@font-face属性在网页中嵌入自定义字体,主流的浏览器都支持这项技术,本文介绍主要的几种Web字体格式及字体格式转换. Web字体格式介绍 TrueType (.ttf) Windows和Mac系统最常用的字体格

Myeclipse中java项目转成Web项目

在eclipse导入一个myeclipse建的web项目后,在Eclipse中显示的还是java项目,按下面的步骤可以将其转换成web项目. 1.找到项目目录下的.project文件 2.编辑.project文件,找到<natures>...</natures> 3.2中找到的结点中加下面的的代码(如果没有) <nature>org.eclipse.wst.common.project.facet.core.nature</nature> <natur