脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → 小程序wxss引用外部文件

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

 更新时间：2021年03月10日 10:57:45   作者：iaofy  
这篇文章主要给大家介绍了关于微信小程序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引用外部文件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • 深入理解JavaScript中的for循环

    深入理解JavaScript中的for循环

    这篇文章主要给大家深入的介绍了JavaScript中的for循环，其中包括ES5中的三种for循环，分别是简单for循环、for-in以及forEach，另外还详细介绍了ES6新增的一种循环：for-of ，有需要的朋友可以参考借鉴，下面来一起看看吧。
    2017-02-02
  • 激活 ActiveX 控件

    激活 ActiveX 控件

    激活 ActiveX 控件...
    2006-10-10
  • JS实现点击链接取消跳转效果的方法

    JS实现点击链接取消跳转效果的方法

    有时候我们仅仅希望将链接<a>作为一个按钮使用，但是在默认状态下，点击链接会出现跳转效果，下面就通过代码实例，介绍一下如何实现此效果
    2014-01-01
  • js利用canvas制作一个实时时钟

    js利用canvas制作一个实时时钟

    Canvas是HTML5中强大的绘图工具,它让我们能够在网页上创建各种精美的图形和动画效果,本文将向您展示如何使用Canvas制作一个实时时钟,感兴趣的可以了解下
    2023-08-08
  • javascript面向对象三大特征之封装实例详解

    javascript面向对象三大特征之封装实例详解

    这篇文章主要介绍了javascript面向对象三大特征之封装,简单描述了封装的基本概念、原理,并结合实例形式详细分析了javascript面向对象程序设计中封装的用法与相关操作注意事项,需要的朋友可以参考下
    2019-07-07
  • js合并两个数组生成合并后的key：value数组

    js合并两个数组生成合并后的key：value数组

    这篇文章主要是介绍了js将两个数组合并为类json方式,需要的朋友可以参考下
    2018-05-05
  • 一文了解TypeScript数据类型

    一文了解TypeScript数据类型

    本文主要介绍了TypeScript数据类型，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2021-07-07
  • 详解微信小程序input标签正则初体验

    详解微信小程序input标签正则初体验

    这篇文章主要介绍了详解微信小程序input标签正则初体验，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-08-08
  • javascript和php使用ajax通信传递JSON的实例

    javascript和php使用ajax通信传递JSON的实例

    今天小编就为大家分享一篇javascript和php使用ajax通信传递JSON的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08
  • JS 实现微信扫一扫功能

    JS 实现微信扫一扫功能

    这篇文章主要介绍了JS 实现微信扫一扫功能,代码简单易懂，非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
    2018-09-09

最新评论