需求

將移動(dòng)端H5頁面接入釘釘，就接入釘釘，這里不展開描述，接入釘釘，測試發(fā)現(xiàn)圖標(biāo)不顯示

問題

發(fā)現(xiàn)瀏覽器network有iconfont.woff和iconfont.ttf，報(bào)錯(cuò)404
（其他疑問：為什么我們自己的app上的H5頁面并沒有請求上訴兩種字體，且圖標(biāo)顯示正常，而接入釘釘后圖標(biāo)顯示不了？釘釘app基于的瀏覽器內(nèi)核，沒有查到什么有價(jià)值的內(nèi)容，如果有人知道，歡迎留言討論；擴(kuò)展知識(shí)探究：）

url('iconfont.woff?t=1558522190245') format('woff'),url('iconfont.ttf?t=1558522190245') format('truetype'),

解決

轉(zhuǎn)base64位后，問題解決

url('data:font/woff2;charset=utf-8;base64,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') format('woff2')

擴(kuò)展

iconfont是阿里巴巴開源字體圖標(biāo)項(xiàng)目，旨在為web頁面和移動(dòng)端提供字體圖標(biāo)，相較于傳統(tǒng)圖片方式有以下優(yōu)點(diǎn)：

字體圖標(biāo)為矢量，可無限放大縮小

顏色可隨意設(shè)置

替換方便，只需在項(xiàng)目中直接編輯圖標(biāo)即可

相較于圖片占用更少的內(nèi)存和網(wǎng)絡(luò)帶寬

iconfont本質(zhì)和微軟雅黑、蘋方的歌字體沒有什么區(qū)別。都要用字體文件和實(shí)體字符的組合顯示

使用方式

分兩種使用方式：

在線方式
無需下載，只需引入項(xiàng)目生成的在線CDN鏈接即可，如下：

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

這種方式適合外網(wǎng)環(huán)境、并且客戶端瀏覽器為現(xiàn)代瀏覽器的場合。因?yàn)楸举|(zhì)是把字體文件編碼為了base64，只有現(xiàn)代瀏覽器支持

離線方式
需要下載四個(gè)字體文件和iconfont.css文件。
這種方式適合內(nèi)網(wǎng)環(huán)境，兼容性好。生產(chǎn)環(huán)境建議用這種方式。缺點(diǎn)是每次更換圖標(biāo)，都要重新打包下載替換，比較麻煩

文件介紹

文件下載后實(shí)際使用的是五個(gè)文件：四個(gè)字體文件和一個(gè)css文件。四個(gè)字體文件分別是為了兼容不同的瀏覽器，例如：.eot文件是為IE使用，.ttf是為谷歌、Safari等現(xiàn)代瀏覽器使用，.woff是為火狐使用，.svg是為移動(dòng)端使用。這四個(gè)文件一般情況下都是需要的。iconfont.css文件中規(guī)定了按鈕的樣式。以便開發(fā)者使用

IE8：IE8僅僅在保留.eot文件，并且去掉iconfont.css中的base64數(shù)據(jù)之后，才可以正常顯示。
IE9: IE9已經(jīng)可以支持base64數(shù)據(jù)，去掉4個(gè)字體文件，依然可以正常顯示。但是去掉base64之后，不能正常顯示。加上.eot文件，可以正常顯示
IE11：IE11比較奇葩。不識(shí)別base64數(shù)據(jù)，但和IE8不同的是，在base64存在的時(shí)候，不會(huì)報(bào)錯(cuò)。當(dāng)且僅當(dāng)引入.eot文件時(shí)，顯示正常
edge: 表現(xiàn)同谷歌瀏覽器，需要.ttf字體或者base64數(shù)據(jù)。
谷歌瀏覽器：支持base64，不引用任何字體文件（保留base64數(shù)據(jù)）即可顯示。去掉之后，加上.ttf文件，也可正常顯示。去掉之后顯示效果：

火狐瀏覽器：支持base64，需要的字體文件：.ttf。其他均不正常顯示，不正常顯示效果：

safari瀏覽器：支持base64，需要的字體文件.ttd。不正常顯示效果

總結(jié)：

如果不考慮IE8以及以下版本，不需要引入任何一個(gè)字體，只需base64即可正常顯示

如果考慮IE8，不能使用base64數(shù)據(jù)（必須去掉）。然后引入.eot和.ttf文件，即可在常規(guī)瀏覽器下顯示正常

.woff文件的作用尚不明朗

.svg主要時(shí)為了在IOS4.1以下顯示用

總結(jié)

以上是生活随笔為你收集整理的H5页面在自己APP中图标显示正常，接入钉钉请求.woff图标字体报错的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。