图标字体(IconFont)介绍

图标字体(IconFont)现在越来越被广泛使用,大大提高了网页的多样化,解决了视网膜屏幕失真的问题。 据说微软从IE4开始支持的这个私有方法(@font-face),后来W3在CSS2中也引入这个方法,但是后来CSS2.1又被删除了,真是遗憾。直到CSS3,又一次引入,这真是个好消息。
详细见:http://www.w3.org/TR/css3-fonts/

不过经常会被问到,移动端用没问题,PC上IE可以了,我可以负责任的说:当然可以。原因上面说了,@font-face最初是微软IE里的私有方法,所以从IE4开始已经支持(我没测过哦),不过现在网站最低支持到IE6而且IE6已被优雅降级到可以正常浏览、使用网站,UI还原度已不值得花大力度去做兼容了,况且在实际项目中IE6中使用确实是没问题的。

一句话,现在可以放心大胆的在PC、移动端使用图标字体(Iconfont)了。
了解更多可看国内最大最全的适量图标库阿里IconFont网站。

图标字体(Iconfont)制作

一. IcoMoon

这个教程一搜一大把,是很方便快捷的一种方式,提供上传、编辑或者选择IcoMoon-Free下载可以直接拿来用了。
网址:https://icomoon.io/app/

二. 阿里IconFont

和IconFont提供类似功能
网址:http://iconfont.cn/

上面两种方法优点是方便快捷,但或许有时候并不能满足你的个性化需求。
比如:仅需要替换一个已经有图标并保持字符代码不变或者更多个性化需求的,或许你可以看看下面的方法。

三. 字体编辑软件制作

  1. 首先准备一下软件,除了PS,AI,还需要High-Logic FontCreator。 FontCreator 是一个强大的字体编辑软件。 官网下载:http://www.high-logic.com/font-editor/fontcreator/download.html
  2. PS导出图标路径到AI (图标一定要是路径)

  3. AI打开导出的图标路径(打开有可能是空白,可以全选找到并添上颜色)

  4. 打开FontCreator,新建或打开字体

  5. 添加图标字形或者双击要编辑的图标字形

  6. 从AI里复制图标路径到FontCreator里,调整大小位置
    可参考(http://mux.alimama.com/posts/1025)

  7. 导出字体,只有TTF和WOFF两种格式

  8. EverythingFonts把TTF转换SVG和EOT, TTF2SVG TTF2EOT

  9. 好了,收工。

图标字体(IconFont)制作的更多相关文章

  1. CSS高级技巧 图标字体ICONFONT的使用方法视频

    图标字体  iconfont 这是一种字体,它跟svg 有很大 相似点   它是矢量的,放大缩小不失真的.很且很小. 我们把它成字看来. 字体 在 从ie4就开始支持的.  兼容性很好 唯一麻烦的地方 ...

  2. 图标字体iconfont的使用

    什么是iconfont? iconfont就是字面上的意思,叫做"字体图标",将一套图标集以字体文件的形式封装,并通过 CSS 的 @font-face 作为 Web Font 调 ...

  3. 仿站技术——获取和使用某些网站的iconfont图标字体

    前言: 很多前端新手在仿一些大型网站的时候经常遇到一个问题:该网站使用了图标字体——iconfont,虽然现在阿里有开源的iconfont库,但是还是没有原网站的效果(本人强迫症但非处女座).所以此文 ...

  4. iconfont 图标字体

    iconfont 技术的主要是将图标转化为字体来减少应用体积.如需在项目中使用iconfont技术,图标矢量图一开始都应合并转化为字体库.   优点: 减小体积,字体文件比图片要小 图标保真缩放,解决 ...

  5. (转载)app ico图标字体制作

    图标字体化浅谈   在做手机端Web App项目中,经常会遇到小图标在手机上显示比较模糊的问题,经过实践发现了一种比较好的解决方案,图标字体化.在微社区项目中,有很多小的Icon(图标),如分享.回复 ...

  6. iOS中iconfont(图标字体)的基本使用

    前言 近日在做项目时,项目组有提出iconfont的技术,便开始查询相关资料.iconfont技术的主要目的是为减少应用体积而生.首先icon代表图标 font代表字体.此技术便是将图标转化为字体,从 ...

  7. !!字体图标(iconfont、Fontello 、雪碧图生成工具。Glyphicons、fontawesome 等)。 图片压缩

    http://www.iconfont.cn/  阿里巴巴矢量图标库 iconfont http://fontawesome.io fontawesome图标 http://www.bootcss.c ...

  8. CSS 小结笔记之图标字体(IconFont)

    本篇主要介绍一种非常好用的图标大法——图标字体(IconFont). 什么是图标字体?顾名思义,它是一种字体,只不过这个字体显示的并不是具体的文字之类的,而是各种图标. 网站上经常会用到各种图标,之前 ...

  9. webfont应用系列(二)如何制作图标字体?

    工具: Adobe Illustrator CS5 Fontographer 5.1,下载地址 1.打开Fontographer,菜单"File"->"New&qu ...

随机推荐

  1. Hibernate注解

    前言: 最近正在学习Hibernate通过注解(annotation)来管理映射关系,以前都是通过XML映射文件.下面拿个小例子说一下. 数据库物理模型: 数据库的描述: 一篇博客随笔可以分到不同的类 ...

  2. L2 Population 原理 - 每天5分钟玩转 OpenStack(113)

    前面我们学习了 VXLAN,今天讨论跟 VXLAN 紧密相关的 L2 Population. L2 Population 是用来提高 VXLAN 网络 Scalability 的. 通常我们说某个系统 ...

  3. 使用Python和Perl绘制北京跑步地图

    当你在一个城市,穿越大街小巷,跑步跑了几千公里之后,一个显而易见的想法是,如果能把在这个城市的所有路线全部画出来,会是怎样的景象呢? 文章代码比较多,为了不吊人胃口,先看看最终效果,上到北七家,下到南 ...

  4. SqlServer时间戳与普通格式的转换

    /********************************************** 时间戳转换(秒) ******************************************* ...

  5. Introduction to the Service Provider Interfaces--官方文档

    地址:https://docs.oracle.com/javase/tutorial/sound/SPI-intro.html What Are Services? Services are unit ...

  6. android studio 导入有so 文件的项目是,程序崩溃的可能原因

    被这玩意坑了2个多小时. ----------------------------------- 由于 android studio 在建项目时,不会自动识别 so 文件,所以在含有so 文件的项目中 ...

  7. C#文件相同性判断

    在进行开发时,对文件进行上传和下载是较为普遍的行为,为了防止在文件操作过程中,出现同一文件多次操作,需要对文件进行相同性比较: 1.获取文件的绝对路径,针对window程序和web程序都可使用: // ...

  8. SQL Server 执行计划利用统计信息对数据行的预估原理以及SQL Server 2014中预估策略的改变

    前提  本文仅讨论SQL Server查询时, 对于非复合统计信息,也即每个字段的统计信息只包含当前列的数据分布的情况下, 在用多个字段进行组合查询的时候,如何根据统计信息去预估行数的. 利用不同字段 ...

  9. Android学习笔记之ListView复用机制

    PS:满打满算,差不多三个月没写博客了...前一阵忙的不可开交...总算是可以抽出时间研究研究其他事情了... 学习内容: 1.ListView的复用机制 2.ViewHolder的概念 1.List ...

  10. ApiController使用Session验证出现Null解决方案

    问题描述 在服务端保存登录信息,出现异常信息 分析发现HttpContext.Current.Session为null 解决方案 执行时出报异常,要在Global.asax里添加:开启Session功 ...