uniapp 默认导航栏字体样式修改
时间: 2023-08-05 10:02:58 浏览: 2546
uni-app-custom-navigation-:这是一个基于uni-app的头部自定义导航栏,采用的技术:微信小程序API,结合Vue语法实现;自定义导航进行了封装,任何页面随时都可以引入,并且可通过条件控制进行所需展示与隐藏的。以上只是个demo,具体更多的可以自行添加与缩减并进行相应样式美化~
在 uni-app 中,可以通过修改全局样式来设置导航栏字体样式。具体步骤如下:
1. 打开 `App.vue` 文件,在 `<style>` 标签中添加以下代码:
```css
/* 全局样式 */
/* 设置导航栏字体为微软雅黑 */
.uni-nav-bar__title {
font-family: 'Microsoft YaHei', sans-serif;
font-size: 18px;
font-weight: bold;
color: #333;
}
```
在上面的代码中,我们选择了 `.uni-nav-bar__title` 类,这是导航栏标题的类名。然后,我们通过 `font-family` 属性设置了字体为 “Microsoft YaHei”,`font-size` 属性设置了字体大小为 18px,`font-weight` 属性设置了字体粗细为 bold,`color` 属性设置了字体颜色为 #333。
2. 在页面中使用导航栏时,不需要再设置导航栏标题的样式,全局样式已经生效了。
注意:如果你只想修改某个页面的导航栏字体样式,可以在该页面的 `<style>` 标签中添加相应的样式,覆盖全局样式即可。
阅读全文