收藏
回答

skyline模式,wxsss引入多个iconfont时,只有一个能生效,如何处理?

skyline模式引入iconfont字体图标,当同时引入多个fontface时,只有第一个能生效。后续的都无法正常渲染

webview模式能正常展示

正常应该如下展示:

在手机上就只能展示出上面的图标了

当将上方图标对应的css生效时,下方的才能展示


在多个手机上都能复现此问题,测试的手机信息如下:


代码片段:https://developers.weixin.qq.com/s/aWC9tqmW7uR5

测试时,需要手机上使用skyline模式查看

index.wxss文件中的顶部样式注释后可查看下方图标展示


尝试过将不同的iconfont放入不同的自定义组件,然后引用组件,但是还是会显示错误。

如何能够让这个字体图标在skyline模式上能全部正确的显示出来?


临时解决方案:

将iconfont的 font-family 改为不同名称的,引用时的位置也需要修改,并将css名称也改为不同

第一个font.wxss

第二个font.wxss

使用时

最后一次编辑于  06-14
回答关注问题邀请回答
收藏

2 个回答

  • Eric Huang
    Eric Huang
    05-24

    应该是 @font-face 里的 font-family 同名导致的,可以先换个 font-family 规避下。 我们看看怎么处理

    05-24
    有用
    回复 3
    • 沉冰
      沉冰
      05-27
      好的,主要是老项目,已经找不到图标源文件了,只有css。如果不能兼容,100多个图标实在是不好再重新做一遍
      05-27
      回复
    • Eric Huang
      Eric Huang
      06-04回复沉冰
      @font-face 里的 family-name 换一个就可以,不用修改字体文件
      06-04
      回复
    • 沉冰
      沉冰
      06-05回复Eric Huang
      好的,我一会试试
      06-05
      回复
  • 社区技术运营专员-Jahozheng
    社区技术运营专员-Jahozheng
    05-24

    请具体描述问题出现的流程,并提供能复现问题的简单代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html)。

    05-24
    有用
    回复 1
登录 后发表内容