必须用 page、.uni-app、.uni-page-body 三类选择器联合声明并加 !important 才能跨端生效；自定义字体需用 @/ 路径且多格式声明；动态调大字体须用 rem + page-meta，原生区域需 pages.json 单独配置。
直接在 App.vue 的 <style></style> 中用 page、.uni-app、.uni-page-body 三类选择器联合声明，加 !important，才能真正跨端生效。 其他写法——比如只设 body 或 html——在小程序和 App 端基本不起作用。
为什么 body { font-size: 16px } 在小程序里不生效
微信/支付宝小程序的渲染根节点是 page，不是 body；body 是伪元素，样式不继承；App（nvue）用原生控件渲染，完全忽略 Web 标准 DOM 结构；H5 虽然能读 body，但 uni-app 实际内容挂载在 .uni-app 容器下，且很多组件（如 uni-nav-bar）自带内联样式或 scoped style，会覆盖继承值。
必须同时覆盖这三类容器：
-
page：小程序唯一合法根选择器 -
.uni-app：H5 和 App（vue 渲染模式）最外层包裹类 -
.uni-page-body：uni-app 内部承载页面主体的类，部分版本中才是实际文本父容器
示例写法：
page, .uni-app, .uni-page-body {
font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Microsoft YaHei', sans-serif;
font-size: 14px !important;
color: #333 !important;
line-height: 1.6;
}
自定义字体（如方正、思源黑体）在 App 端不显示？检查路径和 @font-face 声明
App 端（Android/iOS 真机）加载字体失败，90% 是路径写错。不能用 url('/static/fonts/xxx.ttf')，必须用别名写法：url('@/static/fonts/xxx.ttf')——这个 @/ 会被构建系统解析为正确资源路径，而普通斜杠路径在原生 WebView 中无法访问。
其他关键点：
- 字体文件必须放在
/static/fonts/下（/assets/不会被复制进 App 包） -
@font-face中的format()必须与真实扩展名严格一致：format('truetype')对应.ttf，format('woff2')对应.woff2；混用会导致 iOS 或安卓某端失效 - 为保兼容，建议多格式并列声明，并确保所有文本容器都应用该字体：
@font-face {
font-family: 'SourceHanSansSC';
src: url('@/static/fonts/SourceHanSansSC-Normal.woff2') format('woff2'),
url('@/static/fonts/SourceHanSansSC-Normal.woff') format('woff'),
url('@/static/fonts/SourceHanSansSC-Normal.ttf') format('truetype');
}
page, .uni-app, .uni-page-body, view, text {
font-family: 'SourceHanSansSC', 'Microsoft YaHei', sans-serif;
}
需要支持用户动态调大字体（如老年模式）？别碰 px 和 rpx
用 px 或 rpx 写死字号，后期无法统一缩放；想实现“小/中/大/超大”一键切换，必须转向 rem 单位体系。
核心逻辑是：通过 page-meta 组件动态设置根字体大小（即 html 的 font-size），再把项目中所有字体单位替换成 rem。注意两点：
-
page-meta只在当前页面生效，需在每个页面的<template></template>顶部显式添加：<page-meta :root-font-size="rootFontSize"></page-meta> - 全局状态（如用户选的字号档位）要用
Vuex或uni.setStorageSync持久化，否则切页或重启就丢失
简单起见，若只做三档预设（小/中/大），可直接在 App.vue 的 data 中定义 rootFontSize，配合 watch 同步更新，避免引入复杂状态管理。
最容易被忽略的是：原生导航栏（uni-nav-bar）、TabBar、下拉刷新头这些非 Vue 渲染区域，page-meta 和 CSS 无法控制其字体大小，必须单独在 pages.json 中配置 titleNView 或使用自定义原生插件——这点在上线前务必真机验证。
