uni-app 从vue页面路由跳转到nvue页面 引入外部字体不生效

在 uni-app 中，从 Vue 页面跳转到 nvue 页面时，引入外部字体不生效的问题可能是由于 nvue 页面的渲染机制与 Vue 页面不同所导致的。nvue 页面使用的是原生渲染，而 Vue 页面使用的是 WebView 渲染，因此它们的样式和资源加载方式有所不同。

以下是一些可能的解决方案：

1. 在 nvue 页面中引入字体

确保在 nvue 页面中正确引入了字体文件。你可以在 nvue 页面的 <style> 标签中通过 @font-face 引入字体。

<style>
@font-face {
  font-family: 'CustomFont';
  src: url('/static/fonts/CustomFont.ttf');
}

.text {
  font-family: 'CustomFont';
}
</style>

2. 使用 uni.loadFontFace 动态加载字体

uni-app 提供了 uni.loadFontFace API，可以在页面加载时动态加载字体。你可以在 nvue 页面的 onLoad 生命周期中调用这个 API。

export default {
  onLoad() {
    uni.loadFontFace({
      family: 'CustomFont',
      source: 'url("/static/fonts/CustomFont.ttf")',
      success: () => {
        console.log('字体加载成功');
      },
      fail: (err) => {
        console.log('字体加载失败', err);
      }
    });
  }
}

3. 确保字体文件路径正确

确保字体文件的路径是正确的，并且字体文件已经正确放置在项目的 static 目录下。路径应该是相对于 static 目录的。

4. 检查字体文件格式

确保字体文件的格式是 nvue 页面支持的格式。通常，ttf 和 otf 格式的字体文件在 nvue 页面中是可以正常使用的。

5. 使用 weex 的原生样式

nvue 页面使用的是 weex 的原生样式，因此某些 CSS 属性可能不支持。确保你使用的 CSS 属性在 nvue 页面中是有效的。

6. 检查字体是否被正确应用

在 nvue 页面中，确保你正确地将字体应用到了元素上。例如：

<template>
  <view class="text">Hello, World!</view>
</template>

<style>
.text {
  font-family: 'CustomFont';
}
</style>

7. 使用 uni-app 的全局样式

如果你希望在多个页面中使用相同的字体，可以将字体定义在 App.vue 的全局样式中，这样所有页面都可以使用这个字体。

/* App.vue */
<style>
@font-face {
  font-family: 'CustomFont';
  src: url('/static/fonts/CustomFont.ttf');
}
</style>

然后在 nvue 页面中直接使用这个字体：

<template>
  <view class="text">Hello, World!</view>
</template>

<style>
.text {
  font-family: 'CustomFont';
}
</style>

8. 检查 nvue 页面的渲染模式

nvue 页面有两种渲染模式：weex 和 uni-app。确保你使用的是 uni-app 的渲染模式，因为 weex 模式可能不支持某些特性。

{
  "pages": [
    {
      "path": "pages/nvuePage",
      "style": {
        "navigationBarTitleText": "nvuePage",
        "renderer": "native"
      }
    }
  ]
}