前言
uni-app开发的项目是多端通用的,但我们知道每个端对代码的兼容性不大一样;
app端不支持在main.js引入的css样式,需要在style中引用;
微信小程序不支持本地的字体图标文件,不支持相对路径,需要换成网络路径;
为了一套样式多端适用,我们使用下面这种方式来实现
首先打开阿里巴巴矢量图官网
复制图中的代码,那个是网络路径;
在uni-app项目中,app.vue文件下,style中粘贴网络地址并加上https:
并修改成如下样式
/*每个页面公共css */
@font-face {
font-family: 'iconfont';
src: url('https://at.alicdn.com/t/font_2036521_10twsb1mz07.eot');
src: url('https://at.alicdn.com/t/font_2036521_10twsb1mz07.eot?#iefix') format('embedded-opentype'),
url('https://at.alicdn.com/t/font_2036521_10twsb1mz07.woff2') format('woff2'),
url('https://at.alicdn.com/t/font_2036521_10twsb1mz07.woff') format('woff'),
url('https://at.alicdn.com/t/font_2036521_10twsb1mz07.ttf') format('truetype'),
url('https://at.alicdn.com/t/font_2036521_10twsb1mz07.svg#iconfont') format('svg');
}
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
你可以将矢量图标项目下载到本地,将其中iconfont.css文件打开,路径修改成上述网络路径,在style中引用即可:注意使用绝对路径
import url('@/static/iconfont/iconfont.css')
在页面内使用方式为
<text class="iconfont" style="font-size: 100rpx;"></text>
<text class="iconfont icon-chazishanchudaibiankuang"></text>
目前,H5,app,wx小程序都能正常显示……待更新