const domModule = weex.requireModule('dom')
domModule.addRule('fontFace', {
'fontFamily': "iconfont2",
'src': "url('http://at.alicdn.com/t/font_1469606063_76593.ttf')"
});
z***@126.com
- 发布：2020-08-16 21:49
- 更新：2020-09-12 13:01
- 阅读：2329
产品分类： 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都尝试了，仍无效
z***@126.com (作者) - 没有
这些操作都是基础操作，其实怀疑是我这边都问题，但是官网的例子也无法正常，nvue的数据渲染根本没办法正常，感觉这个性能问题很难提升，也都是基础的入门操作，求官方重视，数据渲染根本没规律可循，打开调试貌似有一些页面是正常的 把手机充电线拔掉，真机运行 就直接空白 也不报错 静态的数据可以正常展示，感觉这个和weex什么的写法无关，没有写任何样式
HX2.8.9已修复该问题
-
-
-
-
-
-
回复 r***@126.com: 我的hbulider2.8.11iconfont还是出不来。显示❓。页面为nuve页面。加了个drawer三方组件。 QQ：792362317
2020-09-21 17:25
-
-
回复 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"></text>
.iconfont{
font-family: iconfont !important;
}
.icon-like {
width: 36px;
height: 36px;
font-size: 34px;
color: red;
}2020-09-22 10:47
-
-
-
-
部分问题是因为icon font 使用方式引发。 可以参考下面的代码示例。
<template>
<view class="content">
<text class="icon"></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
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