Iconfont

Iconfont 是指用字体文件取代图片文件,来展示图标、特殊字体等元素的一种方法。很多网站都会用它,比如手淘、新浪微博等。

在使用它之前,先来了解一下它的优缺点:

优点:(1)文件加载体积小;(2)可以直接通过css的font-size,color修改它的大小和颜色,对于需要缩放多个尺寸的图标,是个很好的解决方案;(3)支持一些css3对文字的效果,例如:阴影、旋转、透明度;(4)兼容低版本浏览器。

缺点:(1)矢量图只能是纯色的。(2)制作门槛高,耗时长,维护成本也很高。

使用Icon font

首先,在我们写代码之前我们需要得到图标字体文件。现在有两种办法提供大家参考。

  1. 让设计师设计矢量图片然后通过工具直接转换成相应的字体。
  2. 使用第三方Iconfont 在线服务(例如: 阿里巴巴Iconfont平台 ),然后直接上传你自己设计的图标矢量图生成字体文件。

得到了字体文件之后我们就可以说一下如何使用它了。我们在CSS中像设置自定义字体一样使用就可以。

font-face 字体声明: 

  1. @font-face {font-family: "iconfont";
  2. src: url('iconfont.eot'); /* IE9*/
  3. src: url('iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
  4. url('iconfont.woff') format('woff'), /* chrome, firefox */
  5. url('iconfont.ttf') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
  6. url('iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
  7. }

可以看到,不同的浏览器调用不同的字体文件。

定义一下Iconfont 的样式:

  1. .iconfont {
  2. font-family:"iconfont" !important;
  3. font-size:16px;
  4. }

挑选图标对应的字体编码,应用于页面中:

  1. <i class="icon iconfont"></i>

接下面我们再来说说Iconfont在使用过程中可能遇到的各种坑。

  1. 字体图标在一些浏览器下会遇到被加粗的问题,设置-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;解决。
  2. 跨域访问不到字体,由于怕字体版权得不到保护,默认跨域的字体文件是访问不到的,一般通过服务器设置 Access-Control-Allow-Origin指定自己需要的网站和设置同域来解决这个问题。
  3. 不要包含没有使用的@font-face,IE将部分他是否使用,统统加载下来。万恶的IE。
  4. @font-face声明之前,如果有script标签的话,直到字体文件完成下载之前,IE将都不会渲染任何东西。
有兴趣的同学可以去坑里面走一圈,自己试试坑的深浅。博主就介绍在这里,如果有错误还望大家指出,共同学习。

【转】Iconfont的更多相关文章

  1. iconfont使用,亲测

    iconfont对于前端应用来说有很多便捷: 1.自由变化大小 2.自由修改颜色 3.可以添加一些视觉效果如:阴影.旋转.透明度. 4.兼容IE6 在线引用和下载到本地两种方法 一.在线引用 图标的制 ...

  2. 如何使用IconFont字体图标代替网页图片?

    一.IconFont的优点 1.轻量性 可以减少http请求,可以配合html5离线存储做性能优化,有利于后期维护. 2.灵活性 可以自由变换IconFont大小(不失真),可以修改IconFont颜 ...

  3. 安卓图标IconFont使用

    一.补充知识:PNG.IconFont.SVG理论 PNG为位图,是由不同的排列和染色的像素点组成的图像,位图的扩大实质是增加单个像素点的大小,故而导致在不同分辨率表现非常糟糕. SVG为可缩放矢量图 ...

  4. iconfont的蜕化操作

    很多国外的网站,访问的时候可以看到,页面先是大面积白一下,然后恢复正常.原因是网页上用到了 webfont,这些页面很多情况都是直接引用 google 的 webfont 地址,中华大局域网下,由于网 ...

  5. WPF自定义控件与样式(1)-矢量字体图标(iconfont)

    一.图标字体 图标字体在网页开发上运用非常广泛,具体可以网络搜索了解,网页上的运用有很多例子,如Bootstrap.但在C/S程序中使用还不多,字体图标其实就是把矢量图形打包到字体文件里,就像使用一般 ...

  6. 图标字体(IconFont)制作

    图标字体(IconFont)介绍 图标字体(IconFont)现在越来越被广泛使用,大大提高了网页的多样化,解决了视网膜屏幕失真的问题. 据说微软从IE4开始支持的这个私有方法(@font-face) ...

  7. 如何使用iconfont字体代替小图片?

    我们以阿里巴巴矢量图标库举例,地址:http://www.iconfont.cn/ 在这里,你可以上传你的矢量图标,也可以直接使用现成的小图标. 为什么要用这些个图标字体,本文就不介绍了,请自行百度. ...

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

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

  9. icon-font与svg

    icon font 使用与svg应用分享 icon font 字体概述 css3增加了@font-face属性,传统的浏览器是通过font-family来设置字体,如果系统里没有的话就用其它字体来代替 ...

  10. fontcreator制作iconfont(包含两个教程)

    第一步 在AI中画好矢量图,或者是在PS中将纯色的图片存成PNG格式,最好是放大很多倍的纯色图片.因为导入到fontcreator中会显得很小,如果不是矢量,图片拉大后就会有锯齿状. 第二步 选中AI ...

随机推荐

  1. (MySQL里的数据)通过Sqoop Import Hive 里 和 通过Sqoop Export Hive 里的数据到(MySQL)

    Sqoop 可以与Hive系统结合,实现数据的导入和导出,用户需要在 sqoop-env.sh 中添加HIVE_HOME的环境变量. 具体,见我的如下博客: hadoop2.6.0(单节点)下Sqoo ...

  2. seafile看不见repo报500错误的解决方法

    环境 seafile-server-6.2.5 centos7.5 1804 现象 seafile服务器所在的VPS没动过,前一天seafile用还好好的,昨天客户端突然不能登录了,显示“服务器内部错 ...

  3. 从零开始徒手撸一个vue的toast弹窗组件

    相信普通的vue组件大家都会写,定义 -> 引入 -> 注册 -> 使用,行云流水,一气呵成,但是如果我们今天是要自定义一个弹窗组件呢? 首先,我们来分析一下弹窗组件的特性(需求): ...

  4. Docker安装 人生第一次

    Ubuntu 系列安装 Docker 通过系统自带包安装 Ubuntu 14.04 版本系统中已经自带了 Docker 包,可以直接安装. $ sudo apt-get update $ sudo a ...

  5. docker容器安装使用

    window安装 1 下载    http://mirrors.aliyun.com/docker-toolbox/windows/docker-toolbox/ docker toolbox 是一个 ...

  6. bzoj-1012 1012: [JSOI2008]最大数maxnumber(线段树)

    题目链接: 1012: [JSOI2008]最大数maxnumber Time Limit: 3 Sec  Memory Limit: 162 MB Description 现在请求你维护一个数列,要 ...

  7. [Java] 读取文件

    1.按字节读取文件内容2.按字符读取文件内容3.按行读取文件内容 4.随机读取文件内容 public class ReadFromFile { /** * 以字节为单位读取文件,常用于读二进制文件,如 ...

  8. python 使用multiprocessing需要注意的问题

    我们在编写程序的时候经常喜欢这样写代码 import MySQLdb import time from multiprocessing import Process conn = MySQLdb.co ...

  9. 基础总结篇之二:Activity的四种launchMode (转载)

    转自:http://blog.csdn.net/liuhe688/article/details/6754323 合抱之木,生於毫末:九層之台,起於累土:千里之行,始於足下.<老子> 今天 ...

  10. node-- express()模块

    1.代码分析 var express = require('express'); var app = express(); app.get('/', function(req, res){ res.s ...