font-face自定义字体,iconfont就是把各种图片做成字体。iconfont优势:
字体文件小,一般20-50kb;
容易编辑和维护,尺寸和颜色可以用css来控制;
透明完全兼容IE6;
 
 
 
webkit下可以做渐变:
margin: 0 0 0 50px; 
    font-size: 50px; 
    font-family: 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', 'Helvetica, Arial', 'Lucida Grande', 'sans-serif'; 
    background: -webkit-repeating-linear-gradient(top, red 0px, blue 60px);
    -webkit-background-clip: text; 
    -webkit-text-fill-color: transparent;
 
不支持的话,可以用伪类after before来模拟
 
使用:

@font-face {
     font-family: 'icon-fonts';
     src:url('../fonts/icon-fonts.eot');  /* IE9*/ 
     src:url('../fonts/icon-fonts.eot?#iefix') format('embedded-opentype'),       /* IE6-IE8 */
          url('../fonts/icon-fonts.woff') format('woff'),    /* chrome、firefox */
          url('../fonts/icon-fonts.ttf') format('truetype'),   /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
          url('../fonts/icon-fonts.svg#icon-fonts') format('svg');   /*  iOS 4.1- */
     font-weight: normal;
     font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
     font-family: 'icon-fonts';
     speak: none;
     font-style: normal;
     font-weight: normal;
     font-variant: normal;
     text-transform: none;
     line-height: 1;
     -webkit-font-smoothing: antialiased;/* Better Font Rendering */
}
.icon-zan:before {
     content: "\e600";
}
.icon-ask:before {
     content: "\e601";
}
.icon-start:before {
     content: "\e602";
}
.icon-down:before {
     content: "\e606";
}
.icon-love:before {
     content: "\e60c";
}
.icon-mi:before {
     content: "\e604";
}
.icon-look:before {
     content: "\e605";
}
.icon-comment:before {
     content: "\e60a";
}
.icon-answer:before {
     content: "\e603";
}
.icon-comment1:before {
     content: "\e60b";
}
.icon-female:before {
     content: "\e608";
}
.icon-male:before {
     content: "\e609";
}
.icon-close:before {
     content: "\e60d";
}
.icon-broadcast:before {
     content: "\e607";
}

 
CSS3文字渐变:
<style>
h1 {
font-size: 60px;
text-align: center;
margin: 40px;
color: #000;
}
h1.methodA {
background: -webkit-linear-gradient(top, #1965a9, #000);
background: linear-gradient(top, #1965a9, #000);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
h1.methodB {
-webkit-mask-image: -webkit-linear-gradient(top, rgba(0,0,0,1), rgba(0,0,0,.3) 50%, rgba(0,0,0,1));
-webkit-mask-image: linear-gradient(top, rgba(0,0,0,1), rgba(0,0,0,.3) 50%, rgba(0,0,0,1));
}
</style>
<h1 class="methodA">Awesome Gradient Text Method A</h1>
<h1 class="methodB">Awesome Gradient Text Method B</h1>

Icon font font face的更多相关文章

  1. 如何将 Font Awesome 转成 PNG 图标 详细教程 含源代码

    最近因为项目上需要用到这个字体图标,但是它里面的许多也不能完全满足项目需要,因此就考虑将这个图标导出,然后自己再添加一些其他图标使用 搜索了些解决方案,如:http://www.oschina.net ...

  2. 【转载】CSS font关键字属性值的简单研究

    文章转载自 张鑫旭-鑫空间-鑫生活 http://www.zhangxinxu.com/wordpress/ 原文链接:http://www.zhangxinxu.com/wordpress/?p=5 ...

  3. How to set font and colors of Eclipse UI

    The original URL of this article is https://codeyarns.com/2014/11/03/how-to-set-font-and-font-size-o ...

  4. Java基础之扩展GUI——使用字体对话框(Sketcher 5 displaying a font dialog)

    控制台程序. 为了可以选择系统支持的字体,我们定义了一个FontDialog类: // Class to define a dialog to choose a font import java.aw ...

  5. iOS FONT字体名

    下面这段代码可以查看ios中可用的字体,具体那些字体长什么样,可以查看字体册工具. NSArray *familyArray = [UIFont familyNames]; for (id famil ...

  6. css基础之 font的简写规则 以及 自定义 CSS3 @font-face详细用法

    Part 1 font简写 CSS的命名规则是用英文字母 数字 和下划线(一般用小写)来命名.简写css font的好处有三:一是写起来方便(就像键盘快捷键):二是简化代码:三是帮助你熟悉和深刻理解c ...

  7. css font简写规则

    是不是在很很多网站的公共样式中会看到这样的代码?font: 12px/150% Arial, Verdana, "\5b8b\4f53";意思为:字体大小/行高 字体族 " ...

  8. 【CSS】font样式简写(转)- 不是很建议简写

    一.字体属性主要包括下面几个 font-family,font-style,font-variant,font-weight,font-size,font font-family(字体族): “Ari ...

  9. java====color、font、button、label、textfield、textarea使用

    1. Color类 µ 公共静态属性:共13个静态属性,分别代表13种不同的颜色常量. µ 构造函数 ü public Color(int r,int g,int b):以整数形式给出红.绿.蓝三个分 ...

随机推荐

  1. 笨鸟先飞之ASP.NET MVC系列之过滤器(01过滤器简介)

    过滤器 什么是过滤器? 过滤器(Filter) 主要的作用大致可以理解为把我们的附加逻辑注入到MVC框架的请求处理. 在ASP.NET MVC的请求处理中一种有19个管道事件分别是 BeginRequ ...

  2. 用python爬虫爬取去哪儿4500个热门景点,看看国庆不能去哪儿

    前言:本文建议有一定Python基础和前端(html,js)基础的盆友阅读. 金秋九月,丹桂飘香,在这秋高气爽,阳光灿烂的收获季节里,我们送走了一个个暑假余额耗尽哭着走向校园的孩籽们,又即将迎来一年一 ...

  3. 550 Create directory operation failed

    往Linux系统中上传文件时候,我们经常会使用FTP连接Linux,也经常会使用mkdir命令来创建目录.最近发现用mkdir创建目录时提示550 Create directory operation ...

  4. FPGA在其他领域的应用(二)

    计算机和存储领域: 计算机技术和存储技术发展迅猛.如今,云计算正在实现对传统 IT 功能和全新功能的整合.例如,许多大型数据中心目前正在同时提供传统的 IT 服务以及新型的数据分析服务. 因此,这些大 ...

  5. java泛型使用总结

    1. 泛型方法: 2. 泛型类: 3. 通配符. 1.泛型方法 泛型方法在调用时可以接收不同类型的参数.根据传递给泛型方法的参数类型,编译器适当地处理每一个方法调用. 下面是定义泛型方法的规则: 所有 ...

  6. 提取多层嵌套Json数据

    在.net 2.0中提取这样的json {"name":"lily","age":23,"addr":{"ci ...

  7. 使用beanstalkd实现定制化持续集成过程中pipeline

    持续集成是一种项目管理和流程模型,依赖于团队中各个角色的配合.各个角色的意识和配合不是一朝一夕能练就的,我们的工作只是提供一种方案和能力,这就是持续集成能力的服务化.而在做持续集成能力服务化的过程中, ...

  8. CSS3选择器在HTML5中的使用

    1,有CLASS属性的input标记 Input[class]{ } 2,class属性是sm的元素 Input[class='sm']{} 3,  凡是class=sm的元素 [class='sm' ...

  9. LVS原理讲解

    一.lvs介绍 LVS的英文全名为"Linux Virtual Server",即Linux虚拟服务器,是一个虚拟的四层交换器集群系统,根据目标地址和目标端口实现用户请求转发,本身 ...

  10. 242. Valid Anagram(leetcode)

    Given two strings s and t, write a function to determine if t is an anagram of s. For example, s = & ...