uni-app nvue 和 vue 页面数字字体显示不一致

在 uni-app 中，nvue 和 vue 页面的渲染机制不同，这可能导致在显示数字字体时出现不一致的问题。以下是可能的原因和解决方案：

1. 渲染机制不同

• vue 页面：基于 WebView 渲染，使用标准 CSS 样式规则。
• nvue 页面：基于原生渲染（如 Weex），使用原生组件的样式规则。

由于渲染机制不同，默认的字体样式（如 font-family、font-weight、font-size）在 nvue 和 vue 中可能表现不一致。

2. 默认字体差异

• vue 页面：通常使用系统默认的 Web 字体（如 sans-serif），数字字体的显示效果可能与原生页面不同。
• nvue 页面：使用原生字体，数字字体的显示效果更接近系统原生样式。

3. 解决方案

方案 1：统一字体样式

为 vue 和 nvue 页面指定相同的字体，确保数字字体显示一致。

• 在 vue 页面中，使用 font-family 指定字体。
• 在 nvue 页面中，使用 text 组件的 font-family 属性指定字体。

例如：

/* vue 页面 */
.text {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* nvue 页面 */
<text class="text" style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;">12345</text>

方案 2：使用自定义字体

如果默认字体无法满足需求，可以引入自定义字体文件，并在 vue 和 nvue 页面中统一使用。

• 在 vue 页面中，通过 @font-face 引入字体。
• 在 nvue 页面中，通过 dom 模块加载字体。

例如：

/* vue 页面 */
@font-face {
  font-family: 'CustomFont';
  src: url('/static/fonts/CustomFont.ttf');
}
.text {
  font-family: 'CustomFont';
}

/* nvue 页面 */
<text class="text" style="font-family: CustomFont;">12345</text>

方案 3：调整字体大小和粗细

通过调整 font-size 和 font-weight，使 vue 和 nvue 页面的数字字体显示效果更接近。

/* vue 页面 */
.text {
  font-size: 16px;
  font-weight: 500;
}

/* nvue 页面 */
<text class="text" style="font-size: 16px; font-weight: 500;">12345</text>