关于百度小程序-字体图标不生效

前置操作（正常执行某类操作）

1. 引入字体图标 app.css

@font-face {
  font-family: 'iconfont';
  src:  url(/static/fonts/iconfont.eot);
  src:  url(/static/fonts/iconfont.eot#iefix) format('embedded-opentype'),
    url(/static/fonts/iconfont.woff2) format('woff2'),
    url(/static/fonts/iconfont.ttf) format('truetype'),
    url(/static/fonts/iconfont.woff) format('woff'),
    url(/static/img/iconfont.38db4ade.svg#iconfont) format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

[class^="ion-"], [class*=" ion-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'iconfont' !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.ion-right:before {
  content: "\e932";
}
.ion-right2:before {
  content: "\e933";
}

2. 图标文件存放位置

3.在具体页面使用字体图标

 <view class="btn-list _ul data-v-dcbcfe34">
        <view class="_li data-v-dcbcfe34">
            <view data-event-opts="{{[['tap',[['navigateHandle',['/pagesA/pages/course-order/course-order']]]]]}}"
                bindtap="__e" class="data-v-dcbcfe34">
                <view class="iconfont ion-m-order _i data-v-dcbcfe34"><label
                        class="path1 _span data-v-dcbcfe34"></label><label
                        class="path2 _span data-v-dcbcfe34"></label><label
                        class="path3 _span data-v-dcbcfe34"></label><label
                        class="path4 _span data-v-dcbcfe34"></label><label class="path5 _span data-v-dcbcfe34"></label>
                </view><label id="message" data-count="0" class="_span data-v-dcbcfe34">机构订单</label>
                <view class="ion-right2 _i data-v-dcbcfe34"></view>
            </view>
        </view>
        <view class="_li data-v-dcbcfe34">
            <view data-event-opts="{{[['tap',[['navigateHandle',['../about/about']]]]]}}" bindtap="__e"
                class="data-v-dcbcfe34">
                <view class="ion-m-about _i data-v-dcbcfe34"><label class="path1 _span data-v-dcbcfe34"></label><label
                        class="path2 _span data-v-dcbcfe34"></label><label class="path3 _span data-v-dcbcfe34"></label>
                </view><label id="message" data-count="0" class="_span data-v-dcbcfe34">关于我们</label>
                <view class="ion-right2 _i data-v-dcbcfe34"></view>
            </view>
        </view>
    </view>

预期结果（应该出现的结果）

实际结果（实际出现的异常结果）

解决方案：使用base64格式

1. 将字体图标文件中的ttf文件放在 格式转换网站 transfonter.org/

2. 将转换后的文件，解压，将stylesheet.css文件中的@face代码拷贝到之前项目的字体图标css文件中，本人是app.css

3. 设置一个公共类，保证字体图标的font-family为引入的@face，即 iconfont

/* 需保证 font-family: 'iconfont'; 否则百度会不生效 */
.iconfont {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'iconfont' !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

4. 在页面中 添加类名 iconfont ，如 iconfont ion-right2 结果如下：

字体图标显示正常

PS： 关于转换最小格式应该是 woff2，但考虑到小程序的 X5内核 / nwjs（chrome内核）/ JavaScriptCore，有些对于 woff2格式 会失效，故而使用 woff 格式