微信小程序中使用字体图标

一、字体图标优缺点

• 优点：

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

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

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

• 缺点：

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

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

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

原文：https://www.cnblogs.com/wanan-01/p/7867912.html

二、svg、eot、ttf、woff比较

注意，这里的SVG指的是svg字体。

1. 介绍

• SVG / SVGZ
  SVG（Scalable Vec