Icon font

icon font 指的是用字体文件代替图片文件,来展示图标、特殊字体等元素的方法。

应用场景:

iconfont的优缺点

  • 大小能够自由地变化
  • 颜色能够自由地改动
  • 加入阴影效果
  • *IE6也能够支持
  • 支持一些CSS3对文字的效果
  • 字体文件比图片文件小非常多
  • 由于是字体,所以仅仅能够显示纯色图片,不支持多种颜色的图片(缺点)

资源:

阿里icon font字库

这个是阿里妈妈M2UX的一个icon font字体图标字库,包括了淘宝图标库和阿里妈妈图标库。

fontello

在线定制你自己的icon font字体图标字库,也能够直接从GitHub下载整个图标集,该项目也是开源的。

icomoon

能够在线导入的SVG格式字体,并进行编辑。然后下载来使用。

Font-Awesome

去哪儿图标库

使用:

假如如今我们想使用阿里icon font字库 中的12星座图标:

步骤1: 选中12星座图标,下载到本地或者存储为在线项目

步骤2: 将下面选中的文件复制到项目文件文件夹下

步骤3: 在CSS文件里使用font-face声明字体。定义使用iconfont的样式

@font-face {font-family: "iconfont";
src: url('iconfont.eot'); /* IE9*/
src: url('iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('iconfont.woff') format('woff'), /* chrome、firefox */
url('iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
url('iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
} .iconfont {
font-family:"iconfont" !important;
font-size:16px;
font-style:normal;
-webkit-font-smoothing: antialiased;
-webkit-text-stroke-width: 0.2px;
-moz-osx-font-smoothing: grayscale;
} .icon-shuipingzuo:before { content: "\3437"; }
.icon-shuangyuzuo:before { content: "\3438"; }
.icon-mojiezuo:before { content: "\3439"; }
.icon-chunvzuo:before { content: "\343a"; }
.icon-shizizuo:before { content: "\343b"; }
.icon-juxiezuo:before { content: "\343c"; }
.icon-tianhezuo:before { content: "\343d"; }
.icon-sheshouzuo:before { content: "\343e"; }
.icon-tianchengzuo:before { content: "\343f"; }
.icon-shuangzizuo:before { content: "\3440"; }
.icon-jinniuzuo:before { content: "\3441"; }
.icon-muyangzuo:before { content: "\3442"; }

步骤4: 挑选相应图标并获取字体编码,应用于页面

<i class="icon iconfont">㐽</i>

扩展:

关于@font-face这个属性,mozilla 的语法例如以下:

@font-face {
[font-family: <family-name>;]?
[src: [ <uri> [format(<string>#)]? | <font-face-name> ]#;]?
[unicode-range: <urange>#;]? [font-variant: <font-variant>;]? [font-feature-settings: normal|<feature-tag-value>#;]?
[font-stretch: <font-stretch>;]?
[font-weight: <weight>];
[font-style: <style>];
}

@font-face能够让我们自己定义网页显示字体,引入字体资源文件,当用户电脑里没有安装这样的字体时,依旧能够正常显示。

  1. font-family,指定一个字体类型作为默认字体类型。比方font-family:宋体默认字体就会是宋体.

  2. src,这里有3个值,各自是url引入字体路径资源,本地路径或者网络路径都能够。font-face-name:自己定义字体名称。formart:字体格式,由于浏览器的N国争锋。所以导致市面上有非常多的字体格式,眼下主要有ttf、woft、eot、svg、svgz这几种格式类型。相应的浏览器支持例如以下:

    浏览器 支持类型
    IE6,7,8 仅支持 Embedded OpenType(.eot) 格式。
    IE9 除eot外。開始支持woff格式。重点内容
    Firefox 3.5 支持 TrueType、OpenType(.ttf, .otf) 格式。
    Firefox 3.6 支持 TrueType、OpenType(.ttf, .otf) 及 woff 格式。

    Chrome,Safari,Opera 支持 TrueType、OpenType(.ttf, .otf) 及 SVG Font(.svg) 格式。
  3. unicode-range,字体编码的范围,比方8位,16位等。

  4. font-variant。字体变形值

  5. font-stretch。字体拉伸值

  6. font-weight,字体粗线值

  7. font-style,字体属性值


over

想进一步了解字体图标制作的朋友请移步 字体图标制作具体解释

字体图标 icon font的更多相关文章

  1. 字体图标Icon Font

    字体图标Icon Font 前段时间研究怎样做字体图标,在网上查找诸多资料,诸多尝试,找到一套可以自己制作自己独立控制的制作流程,公司按照这套流程形成一套自己公司图标,本人目前所在公司已经在使用没有发 ...

  2. 如何在移动端app中应用字体图标icon fonts (转)

    原文: http://www.cnblogs.com/willian/p/4166757.html?utm_source=tuicool&utm_medium=referral How to ...

  3. 如何在移动端app中应用字体图标icon fonts

    How to use icon fonts in your mobile apps 在任何APP设计中实现可图形的矢量缩放最完美的方式是使用字体图标. 移动端的设计变的越来越复杂.原因在于多样的屏幕尺 ...

  4. AngularCli项目中添加字体图标(Font)详解

    本文主要讲如何在AngularCli生成的项目中使用字体图标. 一 SVG图标准备 将需要转换为字体图标的图片转换为SVG格式. 这个让项目视觉设计师搞定即可. 二 SVG图标转Font 可以通过Ic ...

  5. 字体图标 轻量级 Font Awesome

    今天呢,来推荐一款请轻量级 字体图标框架.Font Awesome 用法与bootstrap相似 打开网址.download下载,然后打开取到这两个,下载点这里,这个博客弄的挺好的. 找到exampl ...

  6. 字体图标:Font Awesome

    小图标 Font Awesome Font Awesome 字体为您提供可缩放矢量图标,它可以被定制大小.颜色.阴影以及任何可以用 CSS 的样式,是一款惊艳的字体图标! 可以前往官网进行学习 Fon ...

  7. CSS - icon图标(icon font)

    1. 概念 这个小红点是图标,图标在CSS中实际上是字体. 2. 为什么出现本质是字体的图标? 2.1 图片增加了总文件的大小. 2.2 图片增加了额外的http请求,大大降低网页的性能. 2.3 图 ...

  8. 在nuxt中引入Font Awesome字体图标库

    介绍 在element-ui框架中提供了一些图标样式,但是种类比较少,所以在这里提供一套更完善的字体图标库Font Awesome(官方文档),下面就开始介绍如何在一个nuxt项目中使用这套字体库. ...

  9. jQuery插件fontIconPicker配合FontAwesome字体图标库的使用

    同样先上效果图: 怎么样,是不是很好看,jquery fontIconPicker这个插件做的很不错,支持分类,搜索,还有分页功能,可以自定义分页,具体的使用方法我就不一介绍了,我只说一下如何使用fo ...

随机推荐

  1. 【清澄A1333】【整体二分+二维树状数组】矩阵乘法(梁盾)

    试题来源 2012中国国家集训队命题答辩 问题描述 给你一个N*N的矩阵,不用算矩阵乘法,但是每次询问一个子矩形的第K小数. 输入格式 第一行两个数N,Q,表示矩阵大小和询问组数: 接下来N行N列一共 ...

  2. 批处理文件安装与卸载Windows服务

    //安装Windows服务 将RECPost.exe和RECPostService替换成自己的项目名称和服务名称,并将文件保存成bat格式.其中%cd%是获取相对路径 @echo off set fi ...

  3. PHP数据学习-二维数组【3】

    <?php // $project = array( // array("bai",12,23.0), // array("zeng",34,12.0), ...

  4. intent.addFlags

     一.Activity和Task(栈)的关系 Task就像一个容器,而Activity就相当与填充这个容器的东西,第一个东西(Activity)则会处于最下面,最后添加的东西(Activity)则会在 ...

  5. 转:LESS CSS 框架简介

    原文来自于:http://www.ibm.com/developerworks/cn/web/1207_zhaoch_lesscss/ 简介 CSS(层叠样式表)是一门历史悠久的标记性语言,同 HTM ...

  6. 2. SharePoint Online 开发,请联系qq512800530。加好备注。(不要发站内信。。。)

    ///(不要发站内信...) <meta name="keywords" content="SharePoint Online, SP Online, SPO, S ...

  7. Python 字典 Print 格式化

    __author__ = 'dell' ab = {'Swaroop': 'swaroopch@byteofpython.info', 'Larry': 'larry@wall.org', 'Mats ...

  8. GNU DAEMON THREAD <1>

    尝试写一个简单的守护进程 /** @File daemon.c * * Build a daemon process for game * */ #include <unistd.h> # ...

  9. BZOJ 1483 梦幻布丁

    Description \(N\)个布丁摆成一行,进行\(M\)次操作.每次将某个颜色的布丁全部变成另一种颜色的,然后再询问当前一共有多少段颜色.例如颜色分别为\(1,2,2,1\)的四个布丁一共有\ ...

  10. My ECMAScript 7 wishlist

    With ECMAScript 6 now feature complete, any further changes to the core of JavaScript will happen in ...