服务器之家:专注于服务器技术及软件下载分享
分类导航

node.js|vue.js|jquery|angularjs|React|json|js教程|

服务器之家 - 编程语言 - JavaScript - js教程 - 微信小程序wxss如何引用外部CSS文件以及iconfont

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

2022-02-15 18:15iaofy js教程

这篇文章主要给大家介绍了关于微信小程序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中,此时文件目录如下:

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

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

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

解决方案如下:

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

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

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

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

三、在lib文件中引入

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

四、在wxss加入字体

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

五、显示效果

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

总结

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

原文链接:https://www.cnblogs.com/fayin/p/6347359.html

延伸 · 阅读

精彩推荐
  • js教程JS中箭头函数与this的写法和理解

    JS中箭头函数与this的写法和理解

    这篇文章主要给大家介绍了关于JS中箭头函数与this的写法和理解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需...

    limingru10442021-12-31
  • js教程原生js canvas实现简单贪吃蛇

    原生js canvas实现简单贪吃蛇

    这篇文章主要为大家详细介绍了原生js canvas实现简单贪吃蛇,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...

    深夜猿6462022-02-15
  • js教程JavaScript 中的六种循环方法

    JavaScript 中的六种循环方法

    这篇文章主要介绍了JavaScript 中的六种循环方法,帮助大家更好的理解和使用JavaScript,感兴趣的朋友可以了解下...

    Saku8752021-12-27
  • js教程一篇文章看懂JavaScript中的回调

    一篇文章看懂JavaScript中的回调

    这篇文章主要给大家介绍了如何通过一篇文章看懂JavaScript中的回调,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,...

    疯狂的技术宅4842021-12-27
  • js教程原生JavaScript实现轮播图

    原生JavaScript实现轮播图

    这篇文章主要为大家详细介绍了原生JavaScript实现轮播图,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...

    栋栋很优秀啊7032021-12-29
  • js教程JavaScript中clientWidth,offsetWidth,scrollWidth的区别

    JavaScript中clientWidth,offsetWidth,scrollWidth的区别

    这篇文章主要介绍了Element中clientWidth,offsetWidth,scrollWidth的区别,帮助大家更好的理解和使用JavaScript,感兴趣的朋友可以了解下...

    guo&qi7952022-01-06
  • js教程JavaScript中layim之整合右键菜单的示例代码

    JavaScript中layim之整合右键菜单的示例代码

    这篇文章主要介绍了JavaScript中layim之整合右键菜单的示例代码,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以...

    踮脚敲代码11522022-01-19
  • js教程JavaScript实现下拉列表

    JavaScript实现下拉列表

    这篇文章主要为大家详细介绍了JavaScript实现下拉列表,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...

    编程的牛牛11762022-01-05