uni-app nvue不能读取自定义的字体信息，vue页面可以

uni-app nvue不能读取自定义的字体信息，vue页面可以

类别 信息
产品分类 uniapp/App
PC开发环境 Windows
PC系统版本 window 10教育版
HBuilderX 正式
HBuilderX版本 3.1.2
手机系统 Android
手机系统版本 Android 10
手机厂商 华为
手机机型 荣耀play
页面类型 nvue
打包方式 云端
项目创建方式 HBuilderX

示例代码：

<template>
<view class="content">
<uni-icons type="search"></uni-icons>
</view>
</template> 
<script>
import uniIcons from '../../components/uni-icons/uni-icons.vue'
export default {
components: {
uniIcons
},
data() {
return {
title: 'Hello'
}
},
onLoad() {

},
methods: {

}
}
</script> 
<style>
.content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}

.logo {  
height: 200rpx;  
width: 200rpx;  
margin-top: 200rpx;  
margin-left: auto;  
margin-right: auto;  
margin-bottom: 50rpx;  
}  

.text-area {  
display: flex;  
justify-content: center;  
}  

.title {  
font-size: 36rpx;  
color: #8f8f94;  
}  
</style>

操作步骤：

用官方字体可以


### 预期结果：


正常读取

实际结果：

不能读取


### bug描述：


nvue不能读取自定义的字体信息，vue页面可以

附件：


更多关于uni-app nvue不能读取自定义的字体信息，vue页面可以的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

附上自定义字体

更多关于uni-app nvue不能读取自定义的字体信息，vue页面可以的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在uni-app中，nvue和vue页面处理字体的方式确实存在差异。nvue是基于weex的渲染引擎，其字体处理机制与webview不同。

对于nvue页面：

  1. 自定义字体需要使用weex支持的加载方式
  2. 字体文件需要放在static目录下
  3. 需要使用weex的fontFace规则声明字体

正确使用方法示例：

[@font-face](/user/font-face) {
  font-family: 'MyFont';
  src: url('/static/myfont.ttf');
}

.text {
  font-family: 'MyFont';
}
回到顶部