[WeChat applet] -- wxss references external css files and iconfont

The way the applet introduces external files is as follows:

　　Just write in its css file: @import "external css address.wxss";

Because of the needs of the project, iconfont needs to be used in the applet, it is easy to think of the introduction of 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;
}

Because this css style is common, it is placed in the css folder:

Introduced into the file that needs to be used by @import, but it has no effect.

Reason: The url of the wxss file font-face of the applet does not accept the http address as a parameter, but can accept base64, so you can download the font file first, convert it to base64, and then refer to it.

The solution is as follows:

Go to this platform https://transfonter.org/ and convert the font file to base64 format

Add the ttf file that needs to be converted through add fonts

Download the file, open the stylesheet.css file, copy and paste the content to style.css

final effect: