可行路径是启用自定义导航栏后用css控制font-weight。需在pages.json设navigationstyle为custom,页面中手写导航栏结构,并在style中明确设置font-weight值,同时注意字体文件字重完整性、基础库版本及真机渲染差异。

uni-app 微信小程序中 navigationBar 字体变粗的可行路径
微信小程序原生 navigationBar 不支持直接设置 font-weight,uni-app 的 pages.json 里也没有对应字段。所谓“导航栏字体变粗”,本质是绕过原生限制,用自定义方案接管渲染权。
为什么 pages.json 的 navigationBarTextStyle 无效
这个配置项只控制文字颜色(black / white),和粗细完全无关。哪怕你写成:
"navigationBarTextStyle": "black"
它也只会改颜色,不会影响字重。试图在 app-plus 或其他平台配置项里找 fontWeight 字段,同样徒劳——这些字段对微信小程序不生效。
真正能生效的两种方式:自定义导航栏 + CSS 控制
必须启用自定义导航栏,才能用 CSS 精确控制字体粗细。关键步骤如下:
- 在
pages.json对应页面或全局配置中设"navigationStyle": "custom" - 在页面
<template></template>顶部手动写一个<view class="nav-bar"></view>,替代原生栏 - 在
<style></style>中明确指定font-weight,例如:.nav-bar .title { font-weight: 600; } - 注意:如果使用
<nav-bar></nav-bar>组件(如 uView、uView3),需确认其是否透出title-style属性;部分组件支持传入{ "font-weight": "bold" }对象,但底层仍是内联样式覆盖
容易被忽略的兼容性细节
即使启用了自定义导航栏,仍可能遇到字体“看起来没变粗”的情况:
- 所用字体本身不包含 bold 字重(比如某些 iconfont 或特殊中文字体),
font-weight: bold会 fallback 到模拟加粗,效果差且模糊 - 微信基础库低于 2.10.0 时,部分机型对
font-weight渲染不一致,建议最低兼容设为2.12.0 - 若同时用了
page-meta设置root-font-size,而标题又用了rem单位,加粗可能被缩放弱化,建议标题统一用rpx或固定px - 真机调试时,iOS 微信有时会强制降级渲染,导致加粗不明显;优先在安卓机上验证效果
最稳妥的做法是:关闭原生导航栏 → 手写结构 → 显式声明 font-weight → 挑选带完整字重的字体文件(如思源黑体 Bold)并预加载。










