微信小程序如何引用外部iconfont文件
发布/
小网
数据源/原创
微信小程序是一种全新的连接用户与服务的方式,它可以在微信内被便捷地获取和传播,同时具有出色的使用体验。
近期接触开发小程序项目,不对原H5开发都是用阿里的iconfont制作小图标使用,想在小程序上继续延用。但是在实际过程中发现使用自己的外部域名时,在手机端上无法正常显示,但是引用iconfont官方提供的CDN地址可以正常显示。那么问题出在哪里?
通过HTTP请求分析发现有两个可参考的地方:
1. 允许任何跨域请求;
2. Content-Type为application/octet-stream
找到参考信息号,开始修改自己的Web服务器。
首先,只添加支持跨域请求配置。
location ~* ^.+\.(eot|ttf|otf|woff|svg)$ { add_header Access-Control-Allow-Origin *; access_log off; expires max; }
修改配置重启后,发现在手机上还是不显示出来,继续增加header配置,配置如下:
location ~* ^.+\.(eot|ttf|otf|woff|svg)$ { add_header Access-Control-Allow-Origin *; add_header Content-Type application/octet-stream; access_log off; expires max; }
重新编绎小程序后,用手机端访问正常。
至此 DONE...
@font-face { font-family: "basefont"; src: url('https://yourdomain.com/static/v1.0/fonts/iconfont.eot?t=R18B0406'); /* IE9*/ src: url('https://yourdomain.com/static/v1.0/fonts/iconfont.eot?t=R18B0406#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('https://yourdomain.com/static/v1.0/fonts/iconfont.woff?t=R18B0406') format('woff'), /* chrome, firefox */ url('https://yourdomain.com/static/v1.0/fonts/iconfont.ttf?t=R18B0406') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/ url('https://yourdomain.com/static/v1.0/fonts/iconfont.svg?t=R18B0406#basefont') format('svg'); /* iOS 4.1- */ }.icofont::before, .icofont::after{ cursor: inherit; font-family: "basefont"; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }.nodata{ height: 400rpx; } .nodata::before{ content: "\e6b3"; font-size: 128rpx; margin-top: 20rpx; } .moredata{ height: 88rpx; } .moredata.loading text::before{ content: "\e667"; margin-right: 6rpx; display: inline-block; -webkit-transform-origin: center center; transform-origin: center center; -webkit-animation: icofont-spin 2s infinite linear; animation: icofont-spin 2s infinite linear; }