项目中的字体图标都是通过导入阿里爸爸的iconfont字体矢量图标来解决的,但是文件下有几个样式的文件引起了我的注意:

1.个人感觉iconfont最大的优势有三点 
- 矢量图标。相比切图,至少不会糊。 
- 可控颜色。相比切图,至少可以换颜色。 
- 方便管理和调用。相比切图,至少不会忘。 
- 减少请求。所有的图标只用一个请求。

2.1 在项目中使用:

  导出的包的demo.html中有三种使用方式;个人更加喜欢使用第二种,在需要的地方添加类。

<div class='iconfont icon-xxx'></div>

没写iconfont只会显示一个框

2.2 svg、eot、ttf、woff比较
注意,这里的SVG指的是svg字体。

2.2.1 介绍
SVG / SVGZ
SVG(Scalable Vector Graphics),即矢量图,是用于描述二维矢量图形的一种图形格式。在 Web 中使用 SVG 可以解决位图放大失真的问题。

TTF / OTF
TTF(TrueTypeFont)是Apple公司和Microsoft公司共同推出的字体文件格式,随着windows的流行,已经变成最常用的一种字体文件表示方式。部分的因为这种格式容易被非法复制,因此催生了后来的WOFF字体格式。

EOT
EOT(Embedded Open Type),是微软创造的字体格式。这种格式只在IE6-IE8里使用。

WOFF
WOFF(Web Open Font Format)是一种网页所采用的字体格式标准。此字体格式发展于2009年,现在正由万维网联盟的Web字体工作小组标准化,以求成为推荐标准。此字体格式不但能够有效利用压缩来减少档案大小,并且不包含加密也不受DRM(数位著作权管理)限制。WOFF字体通常比其它字体加载要快,因为使用了OTF和TTF字体里的存储结构和压缩算法。这种字体格式还可以加入元信息和授权信息。

WOFF2(*)
WOFF2(Web Open Font Format 2.0),相比woff最大的优化应该是加强了字体的压缩比。

2.2.2 大小

woff2(*) < woff < ttf ≈ eot < svg

从请求量上来看,woff\woff2格式的图标库最小

转载于:https://www.cnblogs.com/ginkgo-leaves/p/10716531.html

关于iconfont的一些东西相关推荐

  1. iOS App 瘦身实践总结

    文章最后有我的 12 条小总结. 原文始发地址:我的 GitHub 写在前面 最近公司需求不多,正好研究一下 App 瘦身的办法,写了点小总结. 如果你不知道下面几个问题,不妨可以看看文章. 使用 . ...

  2. iconfont 图标宽高出问题_细节猎人04期 | PPT图标的分类和使用注意事项 上篇

    哈喽大家好,我是二木,前几天我在钉钉群做了一场改稿直播,比较有趣的是这场改稿并不是修改真实的PPT案例,而是把收藏夹吃灰的模板拿出来做进一步视觉美化: Before↑ & After↓ 在线直 ...

  3. vue-cli 该如何正确打包iconfont?

    其实这种问题应该问google的: got wrong bootstrap font path after building · Issue #166 · vuejs-templates/webpac ...

  4. ionic如何使用第三方iconfont,以及图标微调 (转载)

    本文转自: http://www.ayqy.net/blog/ionic%E5%A6%82%E4%BD%95%E4%BD%BF%E7%94%A8%E7%AC%AC%E4%B8%89%E6%96%B9i ...

  5. iconfont 图标转为字体_iconfont图标字体

    一.iconfont的优缺点 优点 矢量性 屏幕适配(缩放) 字体性 样式控制(颜色,阴影,甚至浮雕) 文件小 一般20-50KB,比图片小很多,例如typicons库有308个icon,字体文件大小 ...

  6. 踩坑 微信小程序开发mpvue使用iconfont,顺便解决偶现图标显示不正确

    刚刚接触iconfont, 发现它真是个好东西. 使用字体图标的好处: 改颜色,改大小 都可以随时所欲,写个多态按钮分分钟搞定,爽的不要太过分! 阿里的字体图库 https://www.iconfon ...

  7. 首页布局跟小程序如何配置Iconfont—小程序入门与实战(七)

    4-1 经过上一章节的学习我们已经搭建了项目的整个框架,雏形已成.接下来我们只需要的往里面堆东西就可以了. 设计稿网址(14天分享有效,过期的可以找我拿): https://lanhuapp.com/ ...

  8. 字体图标的引入和使用-svg是个好东西

    第一步,拥有svg格式的图片 途径一:ui给你 途径二:自己去阿里巴巴下载 网址:https://www.iconfont.cn/home/index?spm=a313x.7781069.199891 ...

  9. 阿里图标库在旧有的iconfont中添加新的图标

    1.先去阿里巴巴矢量图标库官网挑选自己需要的图标 iconfont-阿里巴巴矢量图标库iconfont-国内功能很强大且图标内容很丰富的矢量图标库,提供矢量图标下载.在线存储.格式转换等功能.阿里巴巴 ...

最新文章

  1. StingBuffer
  2. [关于SQL]查询成绩都大于80分的学生
  3. sublime交互执行python文件方法
  4. 【渝粤题库】陕西师范大学201941 Java程序设计 作业(专升本)
  5. Linux下部署Kafka分布式集群,安装与测试
  6. python 乘法内置函数_Python内置函数--reversed()
  7. sql2008性能计数器注册表配置单元一致性失败
  8. codeforces 486 E. LIS of Sequence(dp)
  9. delphi 消息列表中文说明
  10. 2021-06-22Oracle常用函数
  11. 梯度提升决策树GBDT
  12. 接口测试之postman
  13. Win10小喇叭红叉叉显示未安装任何音频输出设备怎么解决?
  14. Java的全局异常处理(统一异常处理)+登陆拦截鉴权+注解实现记录日志
  15. sort函数的用法(C++排序库函数的调用)对数组进行排序,在c++中有库函数帮我们实现,这们就不需要我们自己来编程进行排序了。
  16. iOS的常用运算函数
  17. python读文件夹图片,做数据集
  18. 为什么摸了一天的鱼,你还是感觉这么累?
  19. 小程序页面中时间戳-获取当前年月日
  20. dropdownList获取值

热门文章

  1. Mycat适合场景及不适合场景
  2. 汉威电子持续发力智慧城市产业链
  3. python(源码包安装 基本使用 循环)
  4. 快速使用redis保存session信息
  5. 我父亲的新发明--玉米点播器
  6. Hotmail怎么进不去?!
  7. python批量转换文件编码
  8. L3-020 至多删三个字符 (30 分)-PAT 团体程序设计天梯赛 GPLT
  9. 蓝桥杯 ADV-237 算法提高 三进制数位和
  10. 蓝桥杯 ALGO-107 算法训练 9-7链表数据求和操作