uni-app 引入字体后行距会出现问题

在 uni-app 中引入自定义字体后，行距（line-height）可能会出现不一致或异常的情况，这通常是由于字体本身的特性或 CSS 设置不匹配导致的。以下是一些可能的原因和解决方案：

1. 字体文件本身的问题

某些字体文件可能设计时行高不一致，或者字体的基线（baseline）与默认字体不同，导致行距异常。

解决方案：

• 检查字体文件是否正常，可以尝试使用其他字体文件替换测试。
• 如果字体文件有问题，可以联系字体设计师或选择其他合适的字体。

2. CSS 行高（line-height）未适配

引入自定义字体后，字体的高度可能与默认字体不同，导致行高看起来不一致。

解决方案：

• 明确设置 line-height，例如：

  .text {
      font-family: 'CustomFont', sans-serif;
      line-height: 1.5; /* 根据实际情况调整 */
  }

• 如果行高仍然不理想，可以尝试使用具体的像素值（如 line-height: 24px;）进行调整。

3. 字体加载时机问题

如果字体文件是通过网络加载的，可能会出现字体加载完成前后行距不一致的情况。

解决方案：

• 使用 [@font-face](/user/font-face) 预加载字体，并确保字体加载完成后再显示文本。
• 可以通过 JavaScript 监听字体加载完成事件，例如：

  document.fonts.ready.then(() => {
      // 字体加载完成后执行的操作
  });

4. 字体缩放问题

在某些设备或浏览器中，字体可能会被缩放，导致行距异常。

解决方案：

• 检查是否有全局的字体缩放设置（如 font-size 或 zoom），并确保它们不会影响行距。
• 使用 text-size-adjust: 100%; 防止字体被自动缩放：

  body {
      text-size-adjust: 100%;
  }

5. uni-app 平台差异

uni-app 支持多端编译（如 H5、小程序、App 等），不同平台对字体的渲染方式可能不同，导致行距不一致。

解决方案：

• 针对不同平台调整 CSS 样式，例如：

  /* H5 平台 */
  /* #ifdef H5 */
  .text {
      line-height: 1.6;
  }
  /* #endif */
  
  /* 小程序平台 */
  /* #ifdef MP-WEIXIN */
  .text {
      line-height: 1.5;
  }
  /* #endif */

6. 字体基线对齐问题

自定义字体的基线可能与默认字体不同，导致行距异常。

解决方案：

• 使用 vertical-align 调整文本的垂直对齐方式，例如：

  .text {
      vertical-align: middle;
  }

7. 字体文件格式问题

不同格式的字体文件（如 TTF、WOFF、WOFF2）在不同平台上的渲染效果可能不同。

解决方案：

• 确保使用适合目标平台的字体格式。例如，H5 平台推荐使用 WOFF2 格式，小程序平台推荐使用 TTF 格式。

示例代码

以下是一个完整的示例，展示如何在 uni-app 中引入字体并调整行距：

/* 引入字体 */
[@font-face](/user/font-face) {
    font-family: 'CustomFont';
    src: url('/static/fonts/CustomFont.woff2') format('woff2'),
         url('/static/fonts/CustomFont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

/* 应用字体并调整行距 */
.text {
    font-family: 'CustomFont', sans-serif;
    line-height: 1.5; /* 根据实际情况调整 */
}