H5页面在自己APP中图标显示正常，接入钉钉请求.woff图标字体报错

需求

将移动端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页面和移动端提供字体图标，相较于传统图片方式有以下优点：

1. 字体图标为矢量，可无限放大缩小
2. 颜色可随意设置
3. 替换方便，只需在项目中直接编辑图标即可
4. 相较于图片占用更少的内存和网络带宽

iconfont本质和微软雅黑、苹方的歌字体没有什么区别。都要用字体文件和实体字符的组合显示

使用方式

分两种使用方式：

1. 在线方式
   无需下载，只需引入项目生成的在线CDN链接即可，如下：

//at.alicdn.com/t/font_657724_qu7s0osa1w.css

这种方式适合外网环境、并且客户端浏览器为现代浏览器的场合。因为本质是把字体文件编码为了base64，只有现代浏览器支持

2. 离线方式
   需要下载四个字体文件和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。不正常显示效果

总结：

1. 如果不考虑IE8以及以下版本，不需要引入任何一个字体，只需base64即可正常显示
2. 如果考虑IE8，不能使用base64数据（必须去掉）。然后引入.eot和.ttf文件，即可在常规浏览器下显示正常
3. .woff文件的作用尚不明朗
4. .svg主要时为了在IOS4.1以下显示用