一、Iconfont

1. 概述

在前端作业中,二十年前只有页面中铺满文字就算上线产品,现如今,不加点俏皮的“图标”会让页面显得很 Low 很 Low。

 
图标

在写这篇文章之前,我一直以为上图中的“图标”是一个个的图片组成,但学习总是给人新知,现在我知道了它们只是一种字体,类似于“宋体”、“楷体”这种。如果我们要使用它们,也只需要在 css 文件中使用 @font-face 引入这种字体即可。@font-face 是 css3 的一个语法,刚兴趣的可以自行阅读 @font-face 用法

2. Iconfont 介绍

Iconfont 是阿里提供了一个图标库,你可以想象成是一个售卖图标的超市,挑选你需要的图标放入购物车,然后 Iconfont 会为你打包你购物车里的图标,自动生成一种新的字体,你可以选择下载到本地,在你的项目中引入这种字体,这样即便没有网络的情况也可以使用图标。

这种模式的一大优点就是只挑选出需要的图标,不会像其他图标库那样直接下载一整个图标库的内容,尽管你可能只会使用到其中一到两个图标。要知道,有的项目打包上线对大小是有严格要求的,比如微信小程序打包之后的代码大小就要控制在 1 M以下。

关于如何使用 Iconfont,网络已经有人赘述的很详细了,这里就不再重复。具体步骤参阅: iconfont字体图标的使用方法

注:除了阿里的 Iconfont,Bootstrap 的图标是 Font-Awsome。

二、字体格式 —— .eot、.woff、.ttf、.svg

1. 概述

在阿里图标库中下载图标到本地后,目录结构如下:

 
图标库下载到本地目录结构

第一次看到这几个文件时,不知道有什么用,可能会直接删除,但万万不可,打开 iconfont.css 文件可以在 @font-face 中都有引用这几个文件。查询资料后得知:虽然现代浏览器支持自定义字体样式,并且可以通过 @font-face 引入自定义的字体,但是各个浏览器对于字体样式是存在兼容性问题的,而这几个文件就是分别处理对应浏览兼容性问题的。

2. 字体格式介绍

目前最主要的几种网络字体(web font)格式包括WOFF,SVG,EOT,OTF/TTF。

WOFF

WOFF是Web Open Font Format几个词的首字母简写。这种字体格式专门用于网上,由Mozilla联合其它几大组织共同开发。WOFF字体通常比其它字体加载的要快些,因为使用了OpenType (OTF)和TrueType (TTF)字体里的存储结构和压缩算法。这种字体格式还可以加入元信息和授权信息。这种字体格式有君临天下的趋势,因为所有的现代浏览器都开始支持这种字体格式。【支持的浏览器:IE9+,Firefox3.5+,Chrome6+,Safari3.6+,Opera11.1+】

SVG / SVGZ

Scalable Vector Graphics (Font). SVG是一种用矢量图格式改进的字体格式,体积上比矢量图更小,适合在手机设备上使用。【支持的浏览器:Chrome4+,Safari3.1+,Opera10.0+,iOS Mobile Safari3.2+】

EOT

Embedded Open Type。这是微软创造的字体格式。这种格式只在IE6-IE8里使用。【支持的浏览器:IE4+】

OTF / TTF

OpenType Font 和 TrueType Font。部分的因为这种格式容易被复制(非法的),这才催生了WOFF字体格式。然而,OpenType有很多独特的地方,受到很多设计者的喜爱。【支持的浏览器:IE9+,Firefox3.5+,Chrome4+,Safari3+,Opera10+,iOS Mobile Safari4.2+】

3. 使用 @font-face 引入字体格式

因为各个浏览器对字体格式的不兼容,作为前端开发人员,我们需要考虑的全面性,将各个格式的字体都引入进来,这样就不怕刁钻的用户使用哪种浏览器了。

常见兼容性写法:

@font-face {
font-family: 'yourfontname';
src: url('../fonts/singlemalta-webfont.eot');
src: url('../fonts/singlemalta-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/singlemalta-webfont.woff') format('woff'),
url('../fonts/singlemalta-webfont.ttf') format('truetype'),
url('../fonts/singlemalta-webfont.svg#defineName') format('svg');
font-weight: normal;
font-style: normal;
}

如果你是使用 Iconfont 下载字体到本地,那么恭喜你,打开 iconfont.css 文件,可以看到 Iconfont 已经帮助你配好了这些内容,你只需要在页面中引入 iconfont.css 即可直接使用。

三、参考文章

  1. 博客园 - iconfont字体图标的使用方法--超简单!
  2. Airen的博客 - CSS3 @font-face
  3. 简书 - CSS3 @font-face属性

认识 Iconfont 以及什么是 .eot、.woff、.ttf、.svg的更多相关文章

  1. ttf,eot,woff,svg,字体格式介绍及使用方法

    而由于网页中使用的字体类型,也是各浏览器对字体类型有不同的支持规格. 字体格式类型主要有几个大分类:TrueType.Embedded Open Type .OpenType.WOFF .SVG. T ...

  2. 解决IIS部署网站引用woff/woff2/svg字体报404错误

    一.问题 在IIS上部署网站,网页引用woff字体时,浏览器报“找不到woff.woff2字体”.“404”错误,不仅预设的字体加载不出来,还影响网页加载速度. 二.原因 IIS默认设置情况下不识别. ...

  3. IIS添加MIME类型.woff/.svg/.woff2/.eot/.otf.ttf

    IIS添加MIME类型: 文件扩展名 MIME类型 .svg     image/svg+xml.woff   application/x-font-woff.woff2 application/x- ...

  4. ttf字体转换成web中使用的woff、svg、eot格式字体

    网站地址:http://www.fontsquirrel.com/tools/webfont-generator(还可以缩小字体文件大小,强烈推荐) ttf转换成eot格式的字体软件:EOTFAST. ...

  5. CSS Sprites+CSS3 Icon Font

    CSS Sprites+CSS3 Icon Font CSS Sprites在国内很多人叫CSS精灵,是一种网页图片应用处理方式.它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去,这样一来, ...

  6. CSS3 font-face使用

    在 CSS3 之前,web 设计师必须使用已在用户计算机上安装好的字体. 通过 CSS3,web 设计师可以使用他们喜欢的任意字体. 当您找到或购买到希望使用的字体时,可将该字体文件存放到 web 服 ...

  7. 29.html5 移动端开发总结

    手机与浏览器 浏览器: 移动端开发主要针对手机,ipad等移动设备,随着地铁里的低头族越来越多,移动端开发在前端的开发任务中站的比重也越来越大.各种品牌及尺寸的手机也不尽相同.尺寸不同就算了分辨率,视 ...

  8. html5 移动端开发

    移动端开发总结     目录 1.手机与浏览器 2.Viewport(视窗) 3. 媒体查询 4.px,em,rem,pt 5.设备像素比devicePixelRatio 6.移动web中的图标及字体 ...

  9. css3 自定义字体的使用方法

    @font-face是CSS3中的一个模块,他主要是把自己定义的Web字体嵌入到你的网页中,随着@font-face模块的出现,我们在Web的开发中使用字体不怕只能使用Web安全字体,你们当中或许有许 ...

随机推荐

  1. SQL server权限管理和备份实例

    权限设置: 1.创建用户zhangsan,并赋予zhangsan有dbcreator的服务器权限. 2.使用zhangsan登录,测试能否创建数据库. 3.使用sa用户附加myschool数据库,设置 ...

  2. 【Alpha 冲刺】 12/12

    今日任务总结 人员 今日原定任务 完成情况 遇到问题 贡献值 胡武成 完成app端api编写 已完成 JAVA后端跨域访问没有处理(目前已解决),导致前端localhost请求失败而误以为自己操作失误 ...

  3. 使用PhotoShop将视频转为gif格式

    由于文档中不方便上传视频,尤其是一些短视频,将其制作成gif格式更便于浏览,刚好PhotoShop中有这种功能,笔者在这里分享一下. 在PS中打开需要转换格式的视频文件,选择文件选项导出中的导出为We ...

  4. 1、爬虫简介与request模块

    一 爬虫简介 概述 近年来,随着网络应用的逐渐扩展和深入,如何高效的获取网上数据成为了无数公司和个人的追求,在大数据时代,谁掌握了更多的数据,谁就可以获得更高的利益,而网络爬虫是其中最为常用的一种从网 ...

  5. 【转】jquery cookie操作

    Cookie是网站设计者放置在客户端的小文本文件.Cookie能为用户提供很多的使得,例如购物网站存储用户曾经浏览过的产品列表,或者门户网站记住用户喜欢选择浏览哪类新闻. 在用户允许的情况下,还可以存 ...

  6. mtime参数的理解

    mtime参数的理解应该如下:-mtime n 按照文件的更改时间来找文件,n为整数.n表示文件更改时间距离为n天, -n表示文件更改时间距离在n天以内,+n表示文件更改时间距离在n天以前.例如:-m ...

  7. 2298: [HAOI2011]problem a

    Description 一次考试共有n个人参加,第i个人说:"有ai个人分数比我高,bi个人分数比我低."问最少有几个人没有说真话(可能有相同的分数) 这句话的意思就等于是说第i个 ...

  8. easyui combotree combobox 使用例子

    <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> &l ...

  9. Arduino入门笔记(3):单LED闪烁

    转载请注明:@小五义http://www.cnblogs.com/xiaowuyi 欢迎加入讨论群 64770604 在搭建好arduino开发环境(http://www.cnblogs.com/xi ...

  10. P2176 [USACO14FEB]路障Roadblock

    题目描述 每天早晨,FJ从家中穿过农场走到牛棚.农场由 N 块农田组成,农田通过 M 条双向道路连接,每条路有一定长度.FJ 的房子在 1 号田,牛棚在 N 号田.没有两块田被多条道路连接,以适当的路 ...