微信小程序打开红包的css_【微信小程序】——wxss引用外部CSS文件及iconfont

小程序引入外部文件的方式是&＃xff1a;&＃64;import "*/*.wxss";

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

&＃96;&＃96;&＃96;&＃96;

&＃64;font-face {font-family: "iconfont";

src: url(&＃39;iconfont.eot?t&＃61;1485242349767&＃39;); /* IE9*/

src: url(&＃39;iconfont.eot?t&＃61;1485242349767#iefix&＃39;) format(&＃39;embedded-opentype&＃39;), /* IE6-IE8 */

url(&＃39;iconfont.woff?t&＃61;1485242349767&＃39;) format(&＃39;woff&＃39;), /* chrome, firefox */

url(&＃39;iconfont.ttf?t&＃61;1485242349767&＃39;) format(&＃39;truetype&＃39;), /* chrome, firefox, opera, Safari, Android, iOS 4.2&＃43;*/

url(&＃39;iconfont.svg?t&＃61;1485242349767#iconfont&＃39;) format(&＃39;svg&＃39;); /* iOS 4.1- */

}

.iconfont {

font-family:"iconfont" !important;

font-size:16px;

font-style:normal;

-webkit-font-smoothing: antialiased;

-moz-osx-font-smoothing: grayscale;

}

&＃96;&＃96;&＃96;&＃96;

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

通过&＃64;import 的方式引入到需要用到的文件里&＃xff0c;但是并没有效果。

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

解决方案如下&＃xff1a;

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

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

三、在lib文件中引入

四、在wxss加入字体

五、显示效果