uni-app nvue和vue字体粗度不一致

uni-app nvue和vue字体粗度不一致

开发环境 版本号 项目创建方式
Windows win10 HBuilderX

同样的字体粗度nvue比vue要粗

操作步骤：

Total:

预期结果：

粗度一样

实际结果：

nvue粗
2 回复

平台有差异，详见font-weight

更多关于uni-app nvue和vue字体粗度不一致的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在 uni-app 中，使用 nvue 和 vue 页面时，字体的粗度（font-weight）可能会表现不一致，这主要是因为 nvue 和 vue 的渲染机制不同。

1. nvue 和 vue 的渲染机制差异

  • vue 页面：使用的是 WebView 渲染，支持标准的 CSS 样式，包括 font-weight，表现与普通的网页一致。
  • nvue 页面：使用的是原生渲染（Native Render），其样式支持是基于原生平台的样式系统，因此在某些情况下，font-weight 的表现可能与 WebView 不同。

2. 可能的原因

  • 字体支持的差异：nvue 使用的是原生平台字体，而 vue 使用的是 WebView 的字体。不同平台对字体的支持程度不同，可能导致 font-weight 表现不一致。
  • CSS 支持差异：nvue 的 CSS 支持是有限的，部分 CSS 属性在 nvue 中可能不支持或表现不同。例如，font-weight 在某些平台上可能只支持 normal 和 bold，而不支持具体的数值（如 500, 600 等）。
  • 默认样式差异：nvue 和 vue 的默认样式可能不同，导致字体的粗度表现不一致。

3. 解决方案

  • 统一字体：确保在 nvue 和 vue 中使用相同的字体，可以通过引入自定义字体来实现。
  • 使用 bold 和 normal：在 nvue 中，尽量使用 font-weight: bold 或 font-weight: normal，而不是具体的数值，以确保兼容性。
  • 平台判断：通过 uni.getSystemInfoSync().platform 判断当前平台，针对不同平台设置不同的 font-weight 值。
  • 使用 weex 原生样式：在 nvue 中，可以使用 weex 的原生样式属性来设置字体样式，确保一致。

4. 示例代码

<template>
  <view class="content">
    <text class="text">Hello, uni-app!</text>
  </view>
</template>

<style>
/* vue 页面 */
.text {
  font-weight: 500; /* 支持具体数值 */
}
</style>

<style scoped>
/* nvue 页面 */
.text {
  font-weight: bold; /* 使用 bold 或 normal */
}
</style>

5. 平台判断示例

<template>
  <view class="content">
    <text :class="textClass">Hello, uni-app!</text>
  </view>
</template>

<script>
export default {
  data() {
    return {
      platform: uni.getSystemInfoSync().platform
    };
  },
  computed: {
    textClass() {
      return this.platform === 'ios' ? 'text-ios' : 'text-android';
    }
  }
};
</script>

<style>
.text-ios {
  font-weight: 500;
}

.text-android {
  font-weight: bold;
}
</style>
回到顶部