微信小程序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引用外部文件内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 微信小程序 less文件编译成wxss文件实现办法

    微信小程序 less文件编译成wxss文件实现办法

    less文件编译成微信小程序wxss文件 2016年9月21日,微信小程序正式开启内测.在微信生态下,触手可及.用完即走的微信小程序引起广泛关注,刷爆朋友圈子.在这样的火爆氛围中,作为一个前端开发者的我,也悄悄地去尝鲜. 在做demo小示例的过程中,我发现了一个极为让人为难的事儿:**如何让 less/sass 文件转成小程序的 wxss 文件**.</font> 对于基本不使用原生css,而习惯编写less的我,这个事儿让我的样式编写相当的吃力. 在尝试配置koala (一个可以编译less

  • 微信小程序实现通过js操作wxml的wxss属性示例

    微信小程序实现通过js操作wxml的wxss属性示例

    本文实例讲述了微信小程序实现通过js操作wxml的wxss属性.分享给大家供大家参考,具体如下: 微信小程序如何通过js操作html的css属性: 在web端.手机端.webApp中可以通过js获取dom的方式设置dom属性. 微信小程序中,不能通过这种方式进行操作. 如何在微信小程序中在wxml中操作wxss的属性. 实现思路: 通过利用数据绑定实现动态改变样式, 1.在wxxml标签内嵌css属性上绑定js的date值 2.通过js中绑定css属性的date值改变wxml标签内嵌的css属性

  • 微信小程序中使用wxss加载图片并实现动画效果

    记录微信小程序中使用wxss加载图片并实现动画的方式,最终实现loading效果. 代码 .weui-loading { margin: 0 5px; width: 20px; height: 20px; display: inline-block; vertical-align: middle; animation: a 1s steps(12) infinite; background: transparent url(data:image/svg+xml;base64,PHN2ZyB4bW

  • 微信小程序 WXML、WXSS 和JS介绍及详解

    前几天折腾了下.然后列出一些实验结果,供大家参考. 0. 使用开发工具模拟的和真机差异还是比较大的.也建议大家还是真机调试比较靠谱. 1. WXML(HTML) 1.1 小程序的WXML没有HTML的宽容度​那么高,单标签必需是 /> 结尾的.不然会报错. 1.2 ​官方推荐使用的基础标签<view>是块标签,给了<text>作为文本标签,但是使用其他标签比如div也是可以使用的,并且都是inline标签.并且wxml的parser会把标签上的不在白名单上的属性都去掉,cla

  • 微信小程序WXSS样式文件教程

    目录 WXSS官方文档 1. WXSS 1.1. 尺寸单位 1.2. 样式导入 1.3. 内联样式 1.4. 选择器 1.5. 全局样式与局部样式 WXSS官方文档 https://developers.weixin.qq.com/miniprogram/dev/framework/ 1. WXSS WXSS(WeiXin Style Sheets)是一套样式语言,用于描述 WXML 的组件样式. 与 CSS 相比,WXSS 扩展的特性有: 尺寸单位 样式导入 1.1. 尺寸单位 rpx(res

  • 微信小程序引入模块中wxml、wxss、js的方法示例

    先描述下目录结构,见下图 UI页面见下图 其中ok按键是引入的log模块,log模块非page页 indexButton是index页本身拥有的组件,index页直接导入Log模块中的组件,css,事件响应函数. 显示效果如下 app.json的内容如下 下面附上 index.js.index.wxml.index.wxss的代码 下面附上 log.js.log.wxml.log.wxss的代码 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们.

  • 实现微信小程序的wxml文件和wxss文件在webstrom的支持

    实现微信小程序的wxml文件和wxss文件在webstrom的支持

    微信小程序的wxml文件和wxss文件在webstrom的支持 ebstrom默认不支持wxml文件和wxss文件,所以要进入设置里面手动添加支持. 对wxml文件的支持: 文件 -> 设置 -> 编辑器 -> 文件类型, 然后选择XML文件,然后点击下面的绿色添加按钮,如下图添加通配符设置,点击确认即可,然后点击确定按钮即可配置成功,就可看到webstrom支持wxml文件了 文件 -> 设置 -> 编辑器 -> 文件和代码模板, 点击上面的绿色添加按钮,如下图所示填

  • 微信小程序 教程之WXSS

    系列文章: 微信小程序 教程之WXSS 微信小程序 教程之引用 微信小程序 教程之事件 微信小程序 教程之模板 微信小程序 教程之列表渲染 微信小程序 教程之条件渲染 微信小程序 教程之数据绑定 微信小程序 教程之WXML WXSS WXSS(WeiXin Style Sheets)是MINA设计的一套样式语言,用于描述WXML的组件样式. WXSS用来决定WXML的组件应该怎么显示. 为了适应广大的前端开发者,我们的WXSS具有CSS大部分特性. 同时为了更适合开发微信小程序,我们对CSS进行

  • 微信小程序wxss如何引用外部CSS文件以及iconfont

    微信小程序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('embedd

  • 微信小程序 教程之引用

    系列文章: 微信小程序 教程之WXSS 微信小程序 教程之引用 微信小程序 教程之事件 微信小程序 教程之模板 微信小程序 教程之列表渲染 微信小程序 教程之条件渲染 微信小程序 教程之数据绑定 微信小程序 教程之WXML 引用 WXML提供两种文件引用方式import和include. import import可以在该文件中使用目标文件定义的template,如: 在item.wxml中定义了一个叫item的template: <!-- item.wxml --> <template

  • 微信小程序 ES6Promise.all批量上传文件实现代码

    微信小程序 ES6Promise.all批量上传文件实现代码 客户端 Page({ onLoad: function() { wx.chooseImage({ count: 9, success: function({ tempFilePaths }) { var promise = Promise.all(tempFilePaths.map((tempFilePath, index) => { return new Promise(function(resolve, reject) { wx.

  • 微信小程序实现上传多个文件 超过10个

    本文实例为大家分享了微信小程序实现上传多个文件超过10个的具体代码,供大家参考,具体内容如下 [小程序笔记]wx.uploadFile(OBJECT) 先说说遇到的问题: 小程序可通过wx.uploadFile(OBJECT)接口上传手机文件至服务器,但是在文档中关于请求中有这么一段说明: request.uploadFile.downloadFile 的最大并发限制是 10 个 意思就是这三个接口请求并发数不能超过10个,否则报以下错误 uploadFile:fail exceed max u

  • 微信小程序实现云开发上传文件、图片功能

    目录 一.前言 二.功能简介 1.选择微信聊天记录中的文件 2.选择本地相册/拍照图片 3.上传功能 三.实现代码 1.选择聊天文件函数(js) 2.选择相册函数(js) 3.上传文件函数(js) 4.调用示例 4-1.云存储新建文件夹 4-2.完整调用代码 4-3.实现效果 四.结语 一.前言 今天的博客所实现的功能很简单,但是也很常用. 本文将这常用的代码进行了封装,可以放入自己utils类中使用,加快开发速度. 实现的功能有两个: 一.选择微信聊天文件并上传. 二.选择本地相册/拍摄图片上

  • 微信小程序的WXSS和全局、页面配置详细讲解

    微信小程序的WXSS和全局、页面配置详细讲解

    目录 一,WXSS 1.1 rpx尺寸单位 1.2 样式导入@import 1.3 全局样式 补充:wxss的扩展-样式导入 二,全局配置 2.1 属性 三,页面配置 总结 一,WXSS 首先我们先介绍一下wxss,wxss是微信小程序独有的模板样式,它类似于web开发中的CSS,具备CSS大部分的功能,同时,它还拓展出了几个内容功能,接下来牛牛介绍一下新增的rpx尺寸单位以及样式导入@import. 1.1 rpx尺寸单位 rpx尺寸单位是微信独有的,主要用来解决屏适配问题.怎么回事呢?我们知

  • 使用微信小程序开发前端【快速入门】

    使用微信小程序开发前端【快速入门】

    前言 2016年9月22日凌晨,微信官方通过"微信公开课"公众号发布了关于微信小程序(微信应用号)的内测通知.整个朋友圈瞬间便像炸开了锅似的,各种揣测.介绍性文章在一夜里诞生.而真正收到内测邀请的公众号据说只有200个. 虽然内测名额十分稀少,但依赖中国广大开发者的破解和分享精神,在网络上很快出现了开发工具的破解版本和API文档.然而可能是微信的妥协或者早已预料,9月24日微信官方发布了不需要破解就可以使用的微信小程序开发者工具和文档,对于费劲心思破解完的开发者来说应该瞬间整个人都不好

随机推荐