z***@126.com
z***@126.com
  • 发布:2020-08-16 21:49
  • 更新:2020-09-12 13:01
  • 阅读:2055

【报Bug】nvue下无法加载iconfont字体图标

分类:uni-app

产品分类: uniapp/App

PC开发环境操作系统: Mac

PC开发环境操作系统版本号: 10.15.6

HBuilderX类型: Alpha

HBuilderX版本号: 2.8.6

手机系统: iOS

手机系统版本号: iOS 13.2

手机厂商: 苹果

手机机型: iphone 6s

页面类型: nvue

打包方式: 云端

项目创建方式: HBuilderX

示例代码:

const domModule = weex.requireModule('dom')
domModule.addRule('fontFace', {
'fontFamily': "iconfont2",
'src': "url('http://at.alicdn.com/t/font_1469606063_76593.ttf')"
});

操作步骤:

const domModule = weex.requireModule('dom')
domModule.addRule('fontFace', {
'fontFamily': "iconfont2",
'src': "url('http://at.alicdn.com/t/font_1469606063_76593.ttf')"
});

预期结果:

加载字体图标

实际结果:

无法加载

bug描述:

nvue模式下 按照官网操作,无一次成功,找遍资料 都是一样都操作
const domModule = weex.requireModule('dom')
domModule.addRule('fontFace', {
'fontFamily': "iconfont2",
'src': "url('http://at.alicdn.com/t/font_1469606063_76593.ttf')"
});

结果都是一个方框中间是问号,确定都是 字体文件地址引入正确 https和http都尝试了,仍无效

2020-08-16 21:49 负责人:DCloud_Android_DQQ 分享
已邀请:
z***@126.com

z***@126.com (作者) - 没有

求官方先看那个数据渲染的问题,很奇怪为什么很少又人提,是用nvue的人少吗,但是官网插件又有很多nuve的项目,

  • 1***@qq.com

    我搞字体踩过一些坑,参考一下吧。https://ask.dcloud.net.cn/article/36735看我帖子参考一下吧。然后就是资源有多大,资源太大也加载慢,然后就是引入方式,fontFamily在css中不要带引号。

    2020-08-17 09:06

  • 虚若影

    回复 1***@qq.com: 老铁666,就这个引号问题坑了我差不多一天,现在是下午5点!

    2020-09-17 17:04

  • 1***@qq.com

    回复 虚若影: 慢慢踩才有趣

    2020-11-06 08:50

z***@126.com

z***@126.com (作者) - 没有

这些操作都是基础操作,其实怀疑是我这边都问题,但是官网的例子也无法正常,nvue的数据渲染根本没办法正常,感觉这个性能问题很难提升,也都是基础的入门操作,求官方重视,数据渲染根本没规律可循,打开调试貌似有一些页面是正常的 把手机充电线拔掉,真机运行 就直接空白 也不报错 静态的数据可以正常展示,感觉这个和weex什么的写法无关,没有写任何样式

8***@qq.com

8***@qq.com

遇到同样的问题

天蓝水更蓝

天蓝水更蓝

遇到同样问题了

DCloud_uniAD_HDX

DCloud_uniAD_HDX

时机问题导致,nvue页面字体加载完成后不会重新渲染,把字体文件放到本地试试

  • 旺仔牛奶

    我之前是可以的 升级到最新版的 HBuilder 2.8.8 就不行了

    2020-08-23 16:50

DCloud_Android_ST

DCloud_Android_ST

HX2.8.9已修复该问题

  • r***@126.com

    调试的时候还是没有

    2020-09-02 15:22

  • DCloud_Android_DQQ

    回复 r***@126.com: 你用的什么版本。2.8.8?

    2020-09-02 16:08

  • r***@126.com

    回复 DCloud_Android_DQQ: 2.8.9

    2020-09-02 16:22

  • DCloud_Android_DQQ

    回复 r***@126.com: 留一下qq. 我看一下什么问题

    2020-09-02 16:23

  • r***@126.com

    回复 DCloud_Android_DQQ: 1963196695

    2020-09-02 16:24

  • oldsix

    回复 r***@126.com: 我的hbulider2.8.11iconfont还是出不来。显示❓。页面为nuve页面。加了个drawer三方组件。 QQ:792362317

    2020-09-21 17:25

  • DCloud_Android_DQQ

    回复 oldsix: 你贴一下复现的代码。 我试试

    2020-09-22 10:46

  • oldsix

    回复 DCloud_Android_DQQ: beforecreated() {

    const domModule = weex.requireModule('dom')

    domModule.addRule('fontFace', {

    'fontFamily': "iconfont",

    'src': "url('http://at.alicdn.com/t/font_2034014_1i6rua9qpdx.ttf')"

    });

    },


    <text class="iconfont icon-like">&#xe642;</text>


    .iconfont{

    font-family: iconfont !important;

    }


    .icon-like {

    width: 36px;

    height: 36px;

    font-size: 34px;

    color: red;

    }

    2020-09-22 10:47

  • oldsix

    回复 oldsix: 写的是不是没有什么问题,但是就是出不来

    2020-09-22 13:59

  • DCloud_Android_DQQ

    回复 oldsix: 你用下面的代码。 我下面的代码换成你的 参数,可以正常展示出来那个 盾牌图标。

    2020-09-22 15:53

  • oldsix

    回复 DCloud_Android_DQQ: 我试了。还是❓,nvue页面

    2020-09-23 09:24

  • oldsix

    回复 oldsix: 问题已解决,谢谢,beforecreated生命周期错了。应该是beforecreate

    2020-09-23 10:52

DCloud_Android_DQQ

DCloud_Android_DQQ

部分问题是因为icon font 使用方式引发。 可以参考下面的代码示例。

<template>  
        <view class="content">  
                <text class="icon">&#xe600;</text>  
            </view>  
</template>  
<script>  

export default {  

    data() {  
        return {}  
    },  
    beforeCreate() {  
            // #ifdef APP-NVUE  
            const domModule = weex.requireModule('dom')  
            domModule.addRule('fontFace', {  
                fontFamily: 'iconfont',  
                src: "url('https://at.alicdn.com/t/font_1799369_jntyy3zx82.ttf')"  
            });  
            // #endif  
    },  
    //下拉刷新  
    onPullDownRefresh() {  

    },  
    onShow() {  

    },  
    methods: {  

    }  
};  
</script>  
<style>  
.icon{  
        font-size: 22px;  
        color: #DD524D;  
        font-family: iconfont!important;  
    }  
</style>  
  • 雨夜敬清秋

    nvue下应该使用base64最稳妥

    domModule.addRule('fontFace', {

    fontFamily: 'iconfont',

    src: "url('data:font/truetype;charset=utf-8;base64,asdfadf')"

    })

    2020-09-02 17:33

p***@126.com

p***@126.com

确实有问题了

DCloud_uniAD_HDX

DCloud_uniAD_HDX

Bug已确认,当前版本解决方案,暂时把字体文件放到项目中,例如 /static/xxx.ttf

  • chenli

    你们的@dcloudio/uni-ui库的uni-icons组件在vue页面下也是无法加载字体文件(app-plus环境下),修改成base64文件引用就正常

    2020-08-24 11:10

  • chenli

    相关问题:https://ask.dcloud.net.cn/question/101975

    2020-08-24 11:18

alexbai

alexbai

打正式包没有问题,只是在手机调试会出现问题

v***@qq.com

v***@qq.com - 蓝牙

可能是你http://at.alicdn.com/t/font_1469606063_76593.ttf
字体库

命名了iconfont而非iconfont2

1***@qq.com

1***@qq.com - 一枚瓜皮

我的变成叉了怎么回事

d***@163.com

d***@163.com

回复

该问题目前已经被锁定, 无法添加新回复