欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

iconfont

程序员文章站 2024-02-16 13:33:34
...

老早传统的“图标”是一个个的图片组成，iconfont是阿里的一套图标库，而iconfont则是把图标当成一种字体的方式来处理。之所以可以这样处理，是因为 css3 的一个语法@font-face ，它可以自定义字体，因此只需要把图标转换成相对应的字体文件，通过@font-face指定字体文件定义字体，然后就可以像使用普通字体一样使用图标了，使用过程中可以通过unicode或者@font-class来获取相应图标。

一。在iconfont中生成字体文件

Iconfont 是阿里提供了一个图标库，你可以想象成是一个售卖图标的超市，挑选你需要的图标放入购物车，然后 Iconfont 会为你打包你购物车里的图标，自动生成一种新的字体文件。

1.首先进入阿里巴巴矢量图网站：http://www.iconfont.cn/

iconfont

 

2.搜索你分类的关键字---然后加入购物车，这个是免费的

iconfont

 

3.下载代码到本地

iconfont

下载到本地，然后解压。会将合并后的字体文件及自动生成的css全部下载

iconfont

其中，eot，svg，ttf，woff就是4个字体文件，定义字体代码可以参考iconfont.css中的@font-face定义字体和.iconfont类。

为什么会有4种文件？主要是为了兼容不同的浏览器。

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

  • WOFF【支持的浏览器：IE9+,Firefox3.5+,Chrome6+,Safari3.6+,Opera11.1+】

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

  • SVG / SVGZ【支持的浏览器：Chrome4+,Safari3.1+,Opera10.0+,iOS Mobile Safari3.2+】

Scalable Vector Graphics (Font). SVG是一种用矢量图格式改进的字体格式，体积上比矢量图更小，适合在手机设备上使用。

  • EOT 【支持的浏览器：IE4+，只在IE6-IE8里使用。】

Embedded Open Type。这是微软创造的字体格式。

  • OTF / TTF 【支持的浏览器：IE9+,Firefox3.5+,Chrome4+,Safari3+,Opera10+,iOS Mobile Safari4.2+】

OpenType Font 和 TrueType Font。部分的因为这种格式容易被复制(非法的)，这才催生了WOFF字体格式。然而，OpenType有很多独特的地方，受到很多设计者的喜爱。

 

二。使用字体文件

参考官方指南 ：icont-font的代码以应用

列举常用的两种：

1.unicode引用

unicode是字体在网页端最原始的应用方式，特点是：

  • 兼容性最好，支持ie6+，及所有现代浏览器。
  • 支持按字体的方式去动态调整图标大小，颜色等等。
  • 但是因为是字体，所以不支持多色。只能使用平台里单色的图标，就算项目里有多色图标也会自动去色。

注意：新版iconfont支持多色图标，这些多色图标在unicode模式下将不能使用，如果有需求建议使用symbol的引用方式

unicode使用步骤如下：

第一步：拷贝项目下面生成的font-face，即一中iconfont.css中的代码

@font-face {font-family: 'iconfont';
    src: url('iconfont.eot');
    src: url('iconfont.eot?#iefix') format('embedded-opentype'),
    url('iconfont.woff') format('woff'),
    url('iconfont.ttf') format('truetype'),
    url('iconfont.svg#iconfont') format('svg');
}

第二步：定义使用iconfont的样式

.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;}

第三步：挑选相应图标并获取字体编码，应用于页面

<i class="iconfont">&#x33;</i>

2.font-class引用

font-class是unicode使用方式的一种变种，主要是解决unicode书写不直观，语意不明确的问题。

与unicode使用方式相比，具有如下特点：

  • 兼容性良好，支持ie8+，及所有现代浏览器。
  • 相比于unicode语意明确，书写更直观。可以很容易分辨这个icon是什么。
  • 因为使用class来定义图标，所以当要替换图标时，只需要修改class里面的unicode引用。
  • 不过因为本质上还是使用的字体，所以多色图标还是不支持的。

使用步骤如下：

第一步：拷贝项目下面生成的fontclass代码：

//at.alicdn.com/t/font_8d5l8fzk5b87iudi.css

第二步：挑选相应图标并获取类名，应用于页面：

<i class="iconfont icon-xxx"></i>

 

三。使用过程中的跨域问题

由于浏览器存在同源策略，所以如果 css静态资源（里面含图标字体文件）所在的地址与你当前的页面地址不在同一个域下，即会出现图标跨域问题。所以要么你就把 css静态资源（里面含图标字体文件） 与网站放在同一服务器，要么就对 静态资源存放所在的资源服务器的 Response Headers 加上属性：Access-Control-Allow-Origin: *。

 

四。参考文章

第104天：web字体图标使用方法

认识 Iconfont 以及什么是 .eot、.woff、.ttf、.svg

 

 

相关标签： iconfonts使用 iconfonts字体文件 阿里图标 iconfonts图标文件跨域

上一篇： 详解spring boot集成ehcache 2.x 用于hibernate二级缓存

下一篇： iOS实现手指点击出现波纹的效果

推荐阅读