公告列表
公告列表
收藏
回答

【BUG】+cover-view中使用font-awsome无效

框架类型 问题类型 API/组件名称 终端类型 微信版本 基础库版本
小程序 Bug cover-view 工具 6.6.6 1.9.94

cover-view中使用font-awsome无效。现象：

  1. 开发工具中可看，在预览和调试中看不到。

  2. 当在开发工具的cover-view下使用badge时，开发工具提示错误如下：

Wed May 23 2018 10:46:38 GMT+0800 (中国标准时间) 渲染层网络层错误

Failed to load local font resource /FontAwesome.eot-do-not-use-local-path-./style/fontawesome.wxss&5&9 

 net::ERR_CACHE_MISS 

点击console的链接，在源码页面显示信息：

console.group("Wed May 23 2018 10:46:38 GMT+0800 (中国标准时间) 渲染层网络层错误")

          console.error(`Failed to load local font resource /FontAwesome.eot-do-not-use-local-path-./style/fontawesome.wxss&5&9 

 net::ERR_CACHE_MISS 

`)

        console.groupEnd()


因小程序片段限制不能大于100k，无法共享。出错的片段代码已经打包共享如下：

链接：https://pan.baidu.com/s/1Lux6nx2anhknp1aMCtyyKA 密码：xhbi

回答关注问题邀请回答
收藏

2 个回答

  • 得鹿梦鱼
    得鹿梦鱼
    2021-03-22

    朋友们，终极解决方案来了。

    把ttf字体（woff格式的也可以）转换成base64格式 解决了这个问题。

    这个是字体转base64格式的网址：https://transfonter.org/

    这一次再次编译就不会有报错提示了。


    2021-03-22
    有用
    回复
  • 疯狂的小辣椒
    疯狂的小辣椒
    2018-05-23

    把你出现问题wxml结构截图上来看一下

    2018-05-23
    有用
    回复 4
    • 和江涛
      和江涛
      2018-05-23
      首先说一句感谢！ 原始出问题的代码，和问题无关的代码已经注释掉了。我试了，问题可重现。 <!--page/takephoto/takephoto.wxml--> < view > < camera device-position = "back" flash = "off" binderror = "error" style = "width:100%; height:100vh;"> < cover-view style = "width:100%; height:100vh;"> < cover-view style = 'height:calc(100% - 68px);' / > <!-- <cover-view class='card-line-container nopadding' style='width:100%;height:64px;justify-content:space-around;'> --> <!-- 预览 --> <!-- <cover-view class="card-operlist" style='width:calc(50% - 48px);background:black;height:36px;border-radius: 4px;opacity: 0.5;justify-content:flex-end;align-items:center;padding:2px 2px 0px 2px;color:white;'> --> < cover-view class = "fa.fa-2x fa-image" style = 'display: block'> < cover-view class = "weui-badge" style = "position: absolute;left:calc(50% - 59px);top:calc(100% - 54px);"> {{count}} </ cover-view > </ cover-view > </ cover-view > <!-- 拍照 --> <!-- <cover-view style='width:64px;background:black;height:64px;border-radius: 8px;opacity: 0.5;color:white;'> <cover-view class="fa.fa-3x fa-camera" style='padding:8px 6px 8px 6px' /> </cover-view> --> <!-- 其他操作 --> <!-- <cover-view class="card-operlist" style='width:calc(50% - 48px);background:black;height:36px;border-radius: 4px;opacity: 0.5;justify-content:flex-start;align-items:center;padding:2px 2px 0px 4px;color:white;'> --> <!-- 浏览文件 --> <!-- <cover-view class="fa.fa-2x fa-folder-open" /> --> <!-- 上传 --> <!-- <cover-view class="fa.fa-2x fa-cloud-upload" wx-if='{{count>0}}' /> --> <!-- <cover-image image="../../image/icon/submit.png" style="width: 28px; height: 28px; background-color;color:white;" wx-if='{{count>0}}' /> </cover-view> --> <!-- </cover-view> --> <!-- </cover-view> --> </ camera > </ view > 小程序片段的代码内容如下。原帖最后的百度盘链接中有完整的小程序片段代码。因为fontawsome.wxss太大，无法直接共享给您。 index.wxml: < view > < view class = "fa.fa-2x fa-image" / > < camera device-position = "back" flash = "off" binderror = "error" style = "width:100%; height:50vh;"> < cover-view style = 'width:100%;height:64px;justify-content:space-around;background:black;color:white'> < cover-view class = "fa.fa-2x fa-image" / > < cover-view class = "fa.fa-2x fa-camera" / > < cover-view class = "fa.fa-2x fa-folder-open" / > < cover-view class = "fa.fa-2x fa-cloud-upload"> < cover-view class = "weui-badge" style = "position: absolute;left:calc(50% - 59px);top:calc(100% - 54px);"> 8 </ cover-view > </ cover-view > </ cover-view > </ camera > </ view > app.wxss @import ' style / fontawesome . wxss ';
      2018-05-23
      赞
      回复
    • 疯狂的小辣椒
      疯狂的小辣椒
      2018-05-24回复和江涛
      无法加载本地字体资源，你的 资源加载出错啦，你好好检查下
      2018-05-24
      赞
      回复
    • 和江涛
      和江涛
      2018-05-24回复疯狂的小辣椒
      在cover-view以外使用是没问题的。我放在阿里云上的那段代码，在cover-view前面我专门放了个普通的view，加载相同的图标，就没问题。 <view> <view class="fa.fa-2x fa-image" /> <-----这一句就没问题，开发工具，预览，远程调试都正常 <camera device-position="back" flash="off" binderror="error" style="width:100%; height:50vh;"> <cover-view style='width:100%;height:64px;justify-content:space-around;background:black;color:white'> <cover-view class="fa.fa-2x fa-image" /> <----这一句，开发工具可见，预览看不到，但是不报错 <cover-view class="fa.fa-2x fa-camera" /> <cover-view class="fa.fa-2x fa-folder-open" /> <cover-view class="fa.fa-2x fa-cloud-upload"> <--- 这一句，开发工具可见，预览看不到，同时开发工具会报错 <cover-view class="weui-badge" style="position: absolute;left:calc(50% - 59px);top:calc(100% - 54px);">8</cover-view> </cover-view> </cover-view> </camera> </view>
      2018-05-24
      赞
      回复
    • 和江涛
      和江涛
      2018-05-24回复疯狂的小辣椒
      实在没有办法，我已经改用png图标了，但是我还是希望小程序能力越来越强啊
      2018-05-24
      赞
      回复
请 登录 后发表内容
相关问题
相关文档