小程序 wxss引入（.ttf .woff 等字体文件）

 

先准备
微信不支持外部文件夹的权限，所以先下载一个自己选中的字体，也就是ttf文件或其他的

国外网站（需要用到它把文件转为Base64编码）：https://transfonter.org/

可以看下一张图（有中文的）

步骤：1、添加字体文件如ttf    2、兑换（即下载）               

  A、格式  我选的是ttf 这个根据以前你调用的文件格式选的

 

之后下载回 一个压缩包 解压（只需要css里的内容 ，复制到你调用的小程序对应页面的wxss中）

 

小程序代码

.wxss

@font-face {
    font-family: Muiicons;
    font-weight: normal;
    font-style: normal;

    src: url(data:font/truetype;charset=utf-8;base64,AAEAAAAQAQAABAAARkZUTXp6wjsAAHTgAAAAHEdERUYAJwBjAAB0wAAAAB5PUy8yV3tbfwAAAYgAAABgY21hcHp1ODYHdW5pRTU4Nwd1bmlFNTg4AAEAAf//AA8AAQAAAAwAAAAWAAAAAgABAAEAXAABAAQAAAACAAAAAAAAAAEAAAAA1aQnCAAAAADSa02ZAAAAANJrTZk=) format('truetype');
    

   
}



 /* 设置大小图标样式 */
.mui-icon
{
    font-family: Muiicons;
    font-size: 24px;
    font-weight: normal;
    font-style: normal;
    line-height: 1;

    display: inline-block;

    text-decoration: none;

    -webkit-font-smoothing: antialiased;
}


/* 获取对应图标  这个可以在以前的css中找到 */
.mui-icon-personadd-filled:before
{
    content: '\e132';
}

.mui-icon-info:before
{
    content: '\e504';
}

.wxml                  样式   和   图标  要同时用    即      mui-icon    mui-icon-info

收工。