小程序引入外部文件的方式是:

  只需要在其css文件写上: @import "外部css地址.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样式是通用的, 因此把它放在了css文件夹下:

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

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

解决方案如下:

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

通过 add fonts把需要转化的ttf文件添加进去

将文件下载, 打开stylesheet.css文件, 将内容复制粘贴到style.css上

最终效果:

[微信小程序] -- wxss引用外部css文件及iconfont的更多相关文章

  1. 【微信小程序】——wxss引用外部CSS文件及iconfont

    小程序引入外部文件的方式是:@import "*/*.wxss"; 因为业务需要,正在开发的小程序中需要使用iconfont,很容易想到了H5的引入方式: ```` @font-f ...

  2. 【微信小程序】——wxss引用外部CSS文件及iconfont,图文教程

    小程序引入外部文件的方式是:@import “/.wxss”; 小程序的wxss文件font-face的url不接受http地址作为参数,可以接受base64,因此可以先将字体文件下载后,转换为bas ...

  3. 微信小程序如何引用其他js文件

    1.我们先建立一个common.js文件,在common.js编写我们的程序, function myfunc() { console.log("myfunc....");} mo ...

  4. 微信小程序-WXSS

    WXSS(WeiXin Style Sheets)是一套样式语言,用于描述 WXML 的组件样式. WXSS 用来决定 WXML 的组件应该怎么显示. 为了适应广大的前端开发者,我们的 WXSS 具有 ...

  5. 微信小程序----wxss设置样式

    一.wxml 界面结构wxmL比较容易理解,主要是由八大类基础组件构成: 一.视图容器(View Container): 二.基础内容(Basic Content) 组件名 说明 组件名 说明 vie ...

  6. 微信小程序wxss设置样式

    微信小程序wxss设置样式 对于以前搞客户端开发的来说,有着客户端的逻辑,就是不知道怎么设置样式,把对应的控件显示出来 一.wxml 界面结构wxmL比较容易理解,主要是由八大类基础组件构成: 一.视 ...

  7. 微信小程序wxss样式详解

    一.wxml 界面结构wxmL比较容易理解,主要是由八大类基础组件构成: 一.视图容器(View Container): 二.基础内容(Basic Content) 组件名 说明 组件名 说明 vie ...

  8. less文件编译成微信小程序wxss文件

    2016年9月21日,微信小程序正式开启内测.在微信生态下,触手可及.用完即走的微信小程序引起广泛关注,刷爆朋友圈子.在这样的火爆氛围中,作为一个前端开发者的我,也悄悄地去尝鲜.在做demo小示例的过 ...

  9. 前端笔记之微信小程序(一)初识微信小程序&WXSS与CSS|WXML与HTML的差异&像素和DPR

    一.小程序概述 2017 年 1 月 9 日小程序正式上线,腾讯开放了个人开发者开发小程序,小程序从此就开始火爆,这一年,小程序狂揽 4 亿用户.1.7 亿的日常活跃,上线 58 万个.这是一个巨大的 ...

随机推荐

  1. open source libraries: BIAS

    The Basic Image AlgorithmS C/C++ Library (BIAS) is the code base for research and software developme ...

  2. nginx+django+uwsgi

    最近来了兴致,想搞一下django开发,so,  搭建一下环境 1.安装django,可能通过pip install 或者源码安装(因为环境是python2.6.6的环境,所以这里采用django 1 ...

  3. DataTable对象的操作问题

    DataTable,DataRow,DataClomun三种对象都是引用类型. C#中值的传递方式分为值传递与引用传递. 1.复制DataTable对象   //以下做法是错误的,dt1和dt2引用的 ...

  4. 第04章-面向切面的Spring

    1. 什么是面向切面编程 AOP是什么 切面帮助我们模块化横切关注点. 横切关注点可被描述为影响应用[多处的]功能.如安全,应用许多方法会涉及安全规则. 继承与委托是最常见的实现重用 通用功能 的面向 ...

  5. 用maven将项目安装到本地仓库,为什么老是在默认仓库地址(C:\Users\userName\.m2\repository)

    使用mvn clean install安装项目到本地的时候,在idea中配置好了本地仓库地址,见下图: 但是安装时,还是安装到了C:\Users\userName\.m2\repository路径下, ...

  6. Head First Python之2函数模块

    模块就是一个包含Python代码的文本文件,以.py结尾. 第三方模块都在PyPI(python package index)上,可使用PyPI发布你的模块,供他人使用. 注释代码 # coding= ...

  7. [Lua快速了解一下]Lua的语法

    -注释 -- 两个减号是行注释 -块注释 --[[ 这是块注释 这是块注释 --]] -变量 Lua的数字只有double型,64bits, Lua的字符串string支持双引号或者单引号 以下例子会 ...

  8. 服务器控件数据回发实现IPostBackDataHandler需注意的

    我写的服务器控件(未完,模型如此) using System; using System.Collections.Generic; using System.Collections.Specializ ...

  9. C# 微信openid 用户信息

    前段demo index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...

  10. 端口以及服务常用cmd

    netstat -ano                           列出所有端口的情况 netstat -aon|findstr "49157"   查出特定端口的情况 ...