小程序wxss引用外部文件微信小程序wxss怎样引用外部CSS文件以及iconfont

iaofy 2021-03-15 我要评论

想了解微信小程序wxss怎样引用外部CSS文件以及iconfont的相关内容吗，iaofy在本文为您仔细讲解小程序wxss引用外部文件的相关知识和一些Code实例，欢迎阅读和指正，我们先划重点：微信小程序引用外部,小程序css样式文件,小程序iconfont，下面大家一起来学习吧。

起因

小程序引入外部文件的方式是：@import "*/*.wxss";

因为业务需要，正在开发的小程序中需要使用iconfont，很容易想到了H5的引入方式：

````
@font-face {font-family: "iconfont";
 src: url('iconfont.eot?t=1485242349767'); /* IE9*/
 src: url('iconfont.eot?t=1485242349767#iefix') format('embedded-opentype'), /* IE6-IE8 */
 url('iconfont.woff?t=1485242349767') format('woff'), /* chrome, firefox */
 url('iconfont.ttf?t=1485242349767') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
 url('iconfont.svg?t=1485242349767#iconfont') format('svg'); /* iOS 4.1- */
}

.iconfont {
 font-family:"iconfont" !important;
 font-size:16px;
 font-style:normal;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
}

````

因为此段css样式是通用的，就把它放在了lib/style/font.wxss中，此时文件目录如下：