小图标转换为字体有几大优点

  1. 文件小,一般50k以内
  2. 避免了加载多个icons,减少了加载次数,有利于页面优化。
  3. 兼容性很好,可以随便放大缩小,都能正常显示。
  4. 维护起来也很简单,只用找到这个字体文件(比如.ttf文件),修改里面的某个图标即可。

制作方法

  首先,用ps或直接用矢量图软件制作单个icon,制作好后保存为ttf格式,如图:

  faq.ttf

  然后,打开字体编辑器,比如FontCreator,新建字体myfonts。

  

  

  需要添加一个字体,可以右击——>插入,然后“导入图像”,即做好的矢量图片(位图效果不好)。

  

  对图像做相应的调整,直到合适为止。然后保存为myfont.ttf即做好了ttf字体文件。

字体格式转换

  为了兼容不同的浏览器,需要制作不同的字体格式。比如IE只支持eot格式,便可以用格式转换工具,将ttf转换成其他格式。比如ttf-->eot在线转换:

  http://ttf2eot.sebastiankippe.com/

  

  

  

ccs3中icon转换为字体的方法的更多相关文章

  1. 将java中数组转换为ArrayList的方法实例(包括ArrayList转数组)

    方法一:使用Arrays.asList()方法   1 2 String[] asset = {"equity", "stocks", "gold&q ...

  2. js中字符串转换为数字的方法

    parseInt; parseFload; +; parseInt() 和 parseFloat() 函数会尝试逐个解析字符串中的字符,直到遇上一个无法被解析成数字的字符,然后返回该字符前所有数字字符 ...

  3. Android 中使用自定义字体的方法

    1.Android系统默认支持三种字体,分别为:“sans”, “serif”, “monospace 2.在Android中可以引入其他字体 . <?xml version="1.0 ...

  4. js中字符串转换为数值的两种方法的区别

    在js中字符串转换为数值的方法有三种:转换函数,强制类型转换,隐式转换 1.转换函数 parseInt()   //将字符串转换为整型 parseFloat()  //将字符串转换为浮点型 转换函数在 ...

  5. JAVA中3种将byte转换为String的方法

    HttpClient 类库中GetMethod类的getResponseBody方法返回的是byte[]类型,要操作起来不方便,我想把它转化成String类型. 查了网上的资料,有说法认为用这种方法比 ...

  6. CSS3的自定义字体@font-face:将图片ICON转为字体

    大家都知道现在各个浏览器都支持CSS3的自定义字体(@font-face),包括IE6都支持,只是各自对字体文件格式的支持不太一样.那么对于网站中用到的各种icon,我们就可以尝试使用font来实现, ...

  7. JavaScript -- 时光流逝(三):js中的 String 对象的方法

    JavaScript -- 知识点回顾篇(三):js中的 String 对象的方法 (1) anchor(): 创建 HTML 锚. <script type="text/javasc ...

  8. Axure中移动端原型设计方法(附IPhoneX和IPhone8最新模板)

    Axure中移动端原型设计方法(附IPhoneX和IPhone8最新模板) 2018年4月16日luodonggan Axure中基于设备模板的移动端原型设计方法(附IPhoneX和IPhone8最新 ...

  9. XML序列化 判断是否是手机 字符操作普通帮助类 验证数据帮助类 IO帮助类 c# Lambda操作类封装 C# -- 使用反射(Reflect)获取dll文件中的类型并调用方法 C# -- 文件的压缩与解压(GZipStream)

    XML序列化   #region 序列化 /// <summary> /// XML序列化 /// </summary> /// <param name="ob ...

随机推荐

  1. 9月8日HTML表单元素(form、文本、按钮、选择)

    表单元素 一.form form代表表单,功能:用于申明表单,定义采集数据的范围,也就是<form>和</form>里面包含的数据将被提交到服务器或者电子邮件里.<for ...

  2. yourtour的几种链接

    php,html {:URL('User-Register/index')}    格式:http://www.xxx.com/index.php?g=User&m=User&a=in ...

  3. inpyt 按钮变透明 边框

    变透明: .btn{width: 80px;height: 36px;margin-left: 22px;border: none;cursor: pointer;background: none;}

  4. php分页的实现

    php常见分页有3种,一种是文字分页,比如说上一页,下一页之类的,还有一种数字分页,像1,2,3...之类的,这个比较简单,前者稍微复杂些.最后一种是他们2者结合. 下面是代码:    1 //获取当 ...

  5. python 函数基础介绍

    函数是对程序逻辑进行结构化或过程化的一种编程方法.能将整块代码巧妙地隔离成易于管理的小块,把重复代码放在函数中而不是进行大量的拷贝. 一.函数创建 def 函数创建格式如下: def function ...

  6. wordpress数据库表说明

    wp系统所用的表不多,那么每张表具体都存些什么?今天给大家介绍一下,希望对你有帮助. wp_commentmeta: 用于保存评论的元信息,在将评论放入回收站等操作时会将数据放入此表,Akismet等 ...

  7. fork与vfork

    先看一个fork的例子: ; int main(void) { int var, pid; ; ) { printf("vfork error"); exit(-); } ) { ...

  8. Redis-cluster集群【第四篇】:redis-cluster集群配置

    Redis分片: 为什么要分片:随着Redis存储的数据越来越庞大,会导致Redis的性能越来越差! 目前分片的方法: 1.客户端分片 在应用层面分片,程序里指定什么数据存放在那个Redis  优势: ...

  9. mysql SELECT FOR UPDATE语句使用示例

    以MySQL 的InnoDB 为例,预设的Tansaction isolation level 为REPEATABLE READ,在SELECT 的读取锁定主要分为两种方式:SELECT ... LO ...

  10. Django动态下载文件

    前台提交查询条件,下载符合条件的EXCEL数据文件,后端视图中使用 xlwt 库来返回,如: objs = Units.objects.all() # 创建 Workbook 时,如果需要写入中文,请 ...