需求
将移动端H5页面接入钉钉,就接入钉钉,这里不展开描述,接入钉钉,测试发现图标不显示
问题
发现浏览器network
有iconfont.woff
和iconfont.ttf
,报错404
(其他疑问:为什么我们自己的app上的H5页面并没有请求上诉两种字体,且图标显示正常,而接入钉钉后图标显示不了?钉钉app基于的浏览器内核,没有查到什么有价值的内容,如果有人知道,欢迎留言讨论;扩展知识探究:)
url('iconfont.woff?t=1558522190245') format('woff'),
url('iconfont.ttf?t=1558522190245') format('truetype'),
解决
转base64位后,问题解决
url('data:font/woff2;charset=utf-8;base64,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') format('woff2')
扩展
iconfont是阿里巴巴开源字体图标项目,旨在为web页面和移动端提供字体图标,相较于传统图片方式有以下优点:
- 字体图标为矢量,可无限放大缩小
- 颜色可随意设置
- 替换方便,只需在项目中直接编辑图标即可
- 相较于图片占用更少的内存和网络带宽
iconfont本质和微软雅黑、苹方的歌字体没有什么区别。都要用字体文件和实体字符的组合显示
使用方式
分两种使用方式:
- 在线方式
无需下载,只需引入项目生成的在线CDN链接即可,如下:
//at.alicdn.com/t/font_657724_qu7s0osa1w.css
这种方式适合外网环境、并且客户端浏览器为现代浏览器的场合。因为本质是把字体文件编码为了base64,只有现代浏览器支持
- 离线方式
需要下载四个字体文件和iconfont.css文件。
这种方式适合内网环境,兼容性好。生产环境建议用这种方式。缺点是每次更换图标,都要重新打包下载替换,比较麻烦
文件介绍
文件下载后实际使用的是五个文件:四个字体文件和一个css文件。四个字体文件分别是为了兼容不同的浏览器,例如:.eot
文件是为IE使用,.ttf
是为谷歌、Safari等现代浏览器使用,.woff
是为火狐使用,.svg
是为移动端使用。这四个文件一般情况下都是需要的。iconfont.css
文件中规定了按钮的样式。以便开发者使用
IE8:IE8仅仅在保留.eot
文件,并且去掉iconfont.css中的base64数据之后,才可以正常显示。
IE9: IE9已经可以支持base64数据,去掉4个字体文件,依然可以正常显示。但是去掉base64之后,不能正常显示。加上.eot
文件,可以正常显示
IE11:IE11比较奇葩。不识别base64数据,但和IE8不同的是,在base64存在的时候,不会报错。当且仅当引入.eot
文件时,显示正常
edge: 表现同谷歌浏览器,需要.ttf字体或者base64数据。
谷歌浏览器:支持base64,不引用任何字体文件(保留base64数据)即可显示。去掉之后,加上.ttf
文件,也可正常显示。去掉之后显示效果:
火狐浏览器:支持base64,需要的字体文件:.ttf
。其他均不正常显示,不正常显示效果:
safari浏览器:支持base64,需要的字体文件.ttd
。不正常显示效果
总结:
- 如果不考虑IE8以及以下版本,不需要引入任何一个字体,只需base64即可正常显示
- 如果考虑IE8,不能使用base64数据(必须去掉)。然后引入
.eot
和.ttf
文件,即可在常规浏览器下显示正常 .woff
文件的作用尚不明朗.svg
主要时为了在IOS4.1以下显示用