uni-app开发的APP字体无法随着手机变化主题字体后跟着变化

uni-app开发的APP字体无法随着手机变化主题字体后跟着变化

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

bug描述：

uniapp开发的app离线打包后安装在手机里，然后手机设置主题切换字体后uniapp开发的app还是原来的字体，只有系统自带的api字体发生了变化，比如提示框文字uni.showToast等。

4 回复

参考下 https://ask.dcloud.net.cn/question/176429

更多关于uni-app开发的APP字体无法随着手机变化主题字体后跟着变化的实战教程也可以访问 https://www.itying.com/category-93-b0.html


看过了，不是解决问题的办法，自定义字体也没用，无法解决系统更换字体后，APP字体全局变成更换的字体

回复 lihai: ostcss-px-to-viewport 你研究下这个插件，之前看到过，不过我也没试过

在uni-app中，要确保APP的字体能够随着手机系统主题字体的变化而自动调整，可以利用CSS变量和系统的主题设置监听功能。不过，由于uni-app主要面向跨平台开发，直接监听系统主题变化并作出响应在某些平台上可能并不直接支持。因此，通常需要通过平台特定的API或事件监听来实现。

以下是一个基本的思路和代码示例，但请注意，具体的实现可能会根据平台（如iOS、Android）和uni-app的版本有所不同。

思路

  1. 使用CSS变量：定义字体大小的CSS变量。
  2. 监听系统主题变化：在支持的平台上监听系统主题变化事件。
  3. 更新CSS变量：根据系统主题变化更新CSS变量。

示例代码

1. 定义CSS变量

在App.vue或全局样式文件中定义字体大小的CSS变量：

:root {
  --font-size-base: 16px;
}

body {
  font-size: var(--font-size-base);
}

2. 监听系统主题变化（示例为Android，iOS需使用其他方法）

由于uni-app没有直接监听系统主题变化的API，以下示例假设在Android平台上使用原生插件或JavaScript接口来监听系统主题变化。具体实现需要依赖平台特定的API。

// 伪代码示例，具体实现需依赖平台API
if (process.platform === 'android') {
  // 假设有一个监听系统主题变化的函数
  window.addEventListener('systemThemeChanged', (event) => {
    if (event.darkMode) {
      document.documentElement.style.setProperty('--font-size-base', '18px');
    } else {
      document.documentElement.style.setProperty('--font-size-base', '16px');
    }
  });
}

注意：上述代码是一个概念性的示例，window.addEventListener('systemThemeChanged', ...)并不是实际存在的API。在Android上，你可能需要通过原生插件或JNI调用Android的Configuration.uiMode来获取当前主题，并在主题变化时触发JavaScript事件。

3. iOS平台

对于iOS，你可能需要使用WKWebView的contentModeDidChange回调或者通过其他方式监听系统主题变化，并通知uni-app应用更新样式。

结论

由于uni-app的跨平台特性，直接监听和处理系统主题变化可能需要依赖平台特定的解决方案。在实际开发中，你可能需要与原生开发团队合作，或者使用第三方插件来实现这一功能。确保在开发和测试阶段充分验证不同平台和版本上的兼容性。

回到顶部