脚本宝典收集整理的这篇文章主要介绍了微信小程序wxss如何引用外部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中，此时文件目录如下：

通过@import 的方式引入到需要用到的文件里，但是并没有效果。

原因：小程序的wxss文件font-face的url不接受http地址作为参数,可以接受base64,因此可以先将字体文件下载后,转换为base64，然后引用。

解决方案如下：

一、先到阿里巴巴矢量图标库(http://iconfont.cn/)生成自己的字体图标，并下载下来，找到ttf格式文件

二、到这个平台https://transfonter.org/，把字体文件转化成base64格式

三、在lib文件中引入

四、在wxss加入字体

五、显示效果

总结

到此这篇关于微信小程序wxss如何引用外部CSS文件以及iconfont的文章就介绍到这了,更多相关小程序wxss引用外部文件内容请搜索脚本宝典以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本宝典！

脚本宝典总结

以上是脚本宝典为你收集整理的微信小程序wxss如何引用外部CSS文件以及iconfont全部内容，希望文章能够帮你解决微信小程序wxss如何引用外部CSS文件以及iconfont所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。