icon配置存在服务器上，在真机上无法显示icon图标，h5正常显示

因为公司产品拥有多终端，所以一些通用icon图标库存在服务器上了。在用uniapp开发app时，在index.html文件通过link标签获取网络资源iconfont.css

<link rel="stylesheet" href="https://xxxxxxxx/iconfont.css">

然后在h5页面调试的时候一直是正常的，在模拟器和真机上无法显示icon图标，当时也查阅了很多文档，加了以下代码

// App.vue中引入ttf文件   

<style lang="scss">  
    @font-face {  
        font-family: 'iconfont';  
        // 这里网络路径必须加 https，我这里用的服务器缓存文件的地址
        src: url('https://at.alicdn.com/t/font_xxxxxxxx.ttf') format('truetype');  
    }  
    .iconfont {  
        font-family: "iconfont";  
    }  
</style>  

// 页面中使用  
<template>  
    <view>  
        <text class="iconfont icon-xxx"></text>  
    </view>  
</template>

模拟器运行还是不会显示icon图标，我就怀疑是不是app不支持index.html引入网络资源？ 后面我直接去请求JSON配置

// 请求JSON配置缓存
uni.request({
    url: 'https://at.alicdn.com/t/c/font_xxxxxxx.json',
    success: (res:any) => {
        const iconJson:any = {}
        res.data.glyphs.forEach((item:any) => {
            const key = `icon${item.font_class}`
            const value = `&#x${item.unicode};`
            iconJson[key] = value
        })
        iconData.value = iconJson
    }
})
    
// 页面中 
<template>  
    <view>  
        <view class="iconfont" v-html="iconData[item.module_icon]"></view>
    </view>  
</template>

// App.vue中引入ttf文件   
<style lang="scss">  
    @font-face {  
        font-family: 'iconfont';  
        // 这里网络路径必须加 https，我这里用的服务器缓存文件的地址
        src: url('https://at.alicdn.com/t/font_xxxxxxxx.ttf') format('truetype');  
    }  
    .iconfont {  
        font-family: "iconfont";  
    }  
</style>  

到此成功解决icon配置存在服务器上，真机无法正常显示icon图标的问题，有更好的解决办法可以讨论一下