uni-app "nvueStyleCompiler"编译模式下iconfont显示异常

uni-app "nvueStyleCompiler"编译模式下iconfont显示异常

开发环境 版本号 项目创建方式
Windows win10 HBuilderX 
产品分类：uniapp/App

PC开发环境操作系统：Windows

HBuilderX类型：正式

HBuilderX版本号：4.08

手机系统：Android

手机系统版本号：Android 10

手机厂商：realme

手机机型：neo5se

页面类型：nvue

vue版本：vue2

打包方式：云端

项目创建方式：HBuilderX

### 示例代码：

```js
const domModule = uni.requireNativePlugin('dom');
domModule.addRule('fontFace', {
fontFamily: 'jgj-iconfont',
src:"url('https://at.alicdn.com/t/c/font_1153018_at9****.ttf')"
});

.jgj-iconfont {
font-family: jgj-iconfont;
}

操作步骤：

使用自己的图标库和uview的uicon都显示异常

预期结果：

显示正常图标

实际结果：

图标显示的X

bug描述：

nvue页面在使用"nvueStyleCompiler": "uni-app"编译的情况下，用nvue的引入字体图标方式，字体无法正常显示，去掉这种变异模式就能正常显示


更多关于uni-app "nvueStyleCompiler"编译模式下iconfont显示异常的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

可以用文档示例测试看下是否正常 https://uniapp.dcloud.net.cn/tutorial/nvue-api.html#addrule

更多关于uni-app "nvueStyleCompiler"编译模式下iconfont显示异常的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在 uni-app 中使用 nvue 页面时，如果遇到 iconfont 显示异常的问题，特别是在 nvueStyleCompiler 编译模式下，可能是由于以下几个原因导致的。以下是一些可能的解决方案：

1. 检查 nvueStyleCompiler 配置

  • nvueStyleCompiler 是 nvue 页面的样式编译模式，默认情况下可能不支持某些 CSS 特性。
  • 确保你的 manifest.json 文件中 nvueStyleCompiler 配置正确。你可以尝试将其设置为 uni-app 默认的编译模式：
    {
  "nvueStyleCompiler": "uni-app"
}

2. 使用 text 标签代替 iconfont

  • 在 nvue 页面中，iconfont 可能需要通过 text 标签来显示，而不是直接使用 view 或 image 标签。
  • 示例：
    <text class="iconfont">&#xe600;</text>

3. 确保字体文件正确引入

  • 确保你的 iconfont 字体文件已经正确引入到项目中。
  • 在 App.vue 或全局样式中引入字体文件：
    [@font-face](/user/font-face) {
  font-family: 'iconfont';
  src: url('path/to/iconfont.ttf') format('truetype');
}
.iconfont {
  font-family: 'iconfont' !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

4. 检查 nvue 页面的样式限制

  • nvue 页面的样式支持与 vue 页面有所不同，某些 CSS 属性可能不被支持。
  • 确保你使用的 CSS 属性在 nvue 中受支持。可以参考 uni-app 官方文档 了解支持的样式属性。

5. 使用 weex 原生组件

  • 如果你在 nvue 页面中遇到样式问题，可以尝试使用 weex 的原生组件来实现 iconfont 的显示。
  • weex 组件库中可能提供了更原生的解决方案。

6. 调试与排查

  • 使用 uni-app 提供的调试工具，查看 nvue 页面的渲染结果，检查是否有样式冲突或错误。
  • 在 HBuilderX 中，可以通过真机调试来查看页面的实际渲染效果。

7. 更新 uni-app 版本

  • 确保你使用的是最新版本的 uni-app，因为新版本可能修复了旧版本中的某些问题。

8. 使用 image 标签代替 iconfont

  • 如果 iconfont 在 nvue 页面中无法正常显示，可以考虑使用 image 标签来显示图标，将图标转换为图片格式。

示例代码

以下是一个简单的 nvue 页面中使用 iconfont 的示例：

<template>
  <view>
    <text class="iconfont">&#xe600;</text>
  </view>
</template>

<style>
[@font-face](/user/font-face) {
  font-family: 'iconfont';
  src: url('path/to/iconfont.ttf') format('truetype');
}
.iconfont {
  font-family: 'iconfont' !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
</style>
回到顶部