微信小程序引入外部iconfont 字体 不显示原因分析

模拟器上正常 真机不显示 原因

安卓手机不显示，显示为 一个框中的X

@font-face {

    font-family: "iconfont";

    src: url('https://xxx/iconfont.eot'); /* IE9*/

    src: url('https://xxx/iconfont.eot?#iefix') format('embedded-opentype'),

    url('https://xxx/iconfont.woff') format('woff'), /* chrome, firefox */

    url('https://xxx/iconfont.ttf') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/

    url('https://xxx/iconfont.svg#iconfont') format('svg') /* iOS 4.1- */

}

解决思路：要在安卓下能正常显示要设置服务器允许跨域,

或者将字体文件转出base64直接引入

苹果手机不显示

@font-face {
 font-family:'iconfont';  /* project id 563821 */
 src:url('http://xxx/xxx.eot');
 src:url('http://xxx/xxx.eot?#iefix')format('embedded-opentype'),
 url('http://xxx/xxx.woff')format('woff'),
 url('http://xxx/xxx.ttf')format('truetype'),
 url('http://xxx/xxx.svg#iconfont')format('svg');
}

解决思路：苹果要https 的才能显示