微信小程序wxss如何引用外部CSS及iconfont转换成长尾？

本文共计373个文字，预计阅读时间需要2分钟。

原因+小程序引入外部文件的方式是：@import /*.wxss*/；

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

css@font-face { font-family: iconfont; src: url('iconfont.eot');}

起因

小程序引入外部文件的方式是：@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不接受iconfont.cn/)生成自己的字体图标，并下载下来，找到ttf格式文件

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

三、在lib文件中引入

四、在wxss加入字体

五、显示效果

总结

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