一. 背景
項目引用了第三方UI框架Vant-weapp，但是前幾天Vant的cdn被運營商封禁，導致van-icon無法使用。
有贊官方在Github上給出了在小程序app.wxss上添加以下代碼的臨時解決方案:
1 @font-face { 2 font-weight: normal; 3 font-family: 'vant-icon-temp'; 4 font-style: normal; 5 font-display: auto; 6 src: url('https://img.yzcdn.cn/vant/vant-icon-84f687.woff2') format('woff2'), 7 url('https://img.yzcdn.cn/vant/vant-icon-84f687.woff') format('woff'), 8 url('https://img.yzcdn.cn/vant/vant-icon-84f687.ttf') format('truetype'); 9 } 10 11 .van-icon { 12 font-family: 'vant-icon-temp' !important; 13 }
我更新代碼后，van-icon無法使用的問題解決了。
但是，終究是使用了第三方的cdn，存在cdn又掛了或者有贊停止維護的風險。
因此，決定將字體圖標文件本地化部署(我這邊項目要求不高，因為本小程序是給公司內部人員使用，如果是面向外界人員的，建議還是使用專業cdn服務)。
二. 嘗試解決
解決方案： 使用上面vant官方提供的代碼，把相應的ttf,woff,woff2文件下載下來放到本地服務器，替換相應cdn地址為我自己本地化后地址：
然后調試，無法正常顯示，提示以下錯誤：
.woff2提示404，但是woff文件OK。把鏈接拿到瀏覽器上依然不行，懷疑是文件類型問題；
因為后端服務器是IIS的，檢查一下,發現不支持.woff2格式文件，在MIME類型中加上：
再調試，不再提示錯誤，微信開發工具端正常顯示。
真機調試，顯示出現異常，原本圖標的地方顯示成了一個個×或空白。
查閱資料，懷疑是因為跨域的問題，因為我的小程序開發跨域的Origin有一個，又不能開放所有的origin，那么到底是哪一個origin，
嘗試了一下加入https://weixin.qq.com，結果問題就解決了！萬萬沒想到是微信跨域的問題。。。
至此，問題解決。
另外還有一種本地化的方式是把ttf,woff等字體文件轉為base64放在小程序源文件中打包，但是我原本一個20k的ttf轉base64后差不多60k，不能接受，所以還是使用了本地服務器部署網絡化的方式。
1.
參考鏈接：
1. 字體文件跨域問題：https://blog.csdn.net/weixin_39015132/article/details/82657681
2. 字體文件base64后本地化： https://www.jianshu.com/p/3f7e7e559098