01-字体图标配置和使用

一、什么叫做字体图标?

可以像使用字体一样使用图标

一般辨别是否是字体图标主要是看图标是否是纯色

二、字体图标有那些优点?

① 轻量性
一个图标字体比一系列的图像（特别是在Retina屏中使用双倍图像）要小。一旦图标字体加载了，图标就会马上渲染出来，不需要下载一个图像。可以减少HTTP请求，还可以配合HTML5离线存储做性能优化。

② 灵活性
图标字体可以用过font-size属性设置其任何大小，还可以加各种文字效果，包括颜色、Hover状态、透明度、阴影和翻转等效果。可以在任何背景下显示。使用位图的话，必须得为每个不同大小和不同效果的图像输出一个不同文件。

③ 兼容性
网页字体支持所有现代浏览器，包括IE低版本。

三、字体图标有那些缺点?

① 图标字体只能被渲染成单色或者CSS3的渐变色，由于此限制使得它不能广泛使用。

② 使用版权上有限制，有好多字体是收费的。当然也有很多免费开源的精美字体图标供下载使用。

③ 创作自已的字体图标很费时间，重构人员后期维护的成本偏高。

四、字体图标如何使用?

@font-face

@font-face {
      font-family: <YourWebFontName>;
      src: <source> [<format>][,<source> [<format>]]*;
      [font-weight: <weight>];
      [font-style: <style>];
}

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

五、字体图标使用步骤

字体图标使用和生成主要使用两个站点https://www.iconfont.cn/ 这个站点主要是下载自己需要的SVG和AI图标或者UI设计SVG图标和[https://icomoon.io/] 生成字体图标文件的站点

登录阿里巴巴站点下载

SVG.png
下载.png 代码使用.png 导入.png 生成.png 属性设置.png 下载使用.png