uni-app导航栏标题自定义字体

发布于 1周前 作者 itying888 来自 Uni-App

uni-app导航栏标题自定义字体

如题，用原生自带的导航栏，css全局设置自定义字体不生效，离线打包iOS在didFinishLaunchingWithOptions设置全局导航栏也不生效，到底要怎么修改啊？？？官方文档这块好像也没说明

Harmonyos Next教程
3 回复

原生好像改不了 要自定义导航栏才能改


自定义改动太多了，项目初期有这个需求的话还差不多

在uni-app中，默认情况下导航栏标题使用的是系统字体。如果需要自定义导航栏标题的字体，可以通过一些变通的方法来实现，例如使用自定义导航栏组件。下面是一个简单的示例，展示如何通过自定义导航栏来实现标题字体的自定义。

步骤一：隐藏系统导航栏

首先，需要在 pages.json 中配置页面，隐藏系统导航栏。

{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationStyle": "custom"
      }
    }
  ]
}

步骤二：创建自定义导航栏组件

在 components 目录下创建一个名为 CustomNavBar.vue 的组件。

<template>
  <view class="custom-navbar">
    <view class="navbar-title">{{ title }}</view>
  </view>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      default: ''
    }
  }
}
</script>

<style scoped>
.custom-navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 44px; /* 根据需要调整高度 */
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff; /* 背景色 */
  border-bottom: 1px solid #ddd; /* 分隔线 */
  z-index: 999;
}

.navbar-title {
  font-size: 18px; /* 字体大小 */
  font-family: 'CustomFont', sans-serif; /* 自定义字体 */
  color: #000; /* 字体颜色 */
}

@font-face {
  font-family: 'CustomFont';
  src: url('~@/static/fonts/custom-font.ttf'); /* 自定义字体文件路径 */
}
</style>

步骤三：在页面中使用自定义导航栏组件

在需要自定义导航栏的页面中引入并使用 CustomNavBar.vue 组件。

<template>
  <view>
    <CustomNavBar title="自定义标题" />
    <!-- 页面内容 -->
  </view>
</template>

<script>
import CustomNavBar from '@/components/CustomNavBar.vue';

export default {
  components: {
    CustomNavBar
  }
}
</script>

注意事项

  1. 确保自定义字体文件（如 custom-font.ttf）已经放置在项目的 static/fonts 目录下。
  2. 根据实际需求调整导航栏组件的样式，如高度、背景色、字体大小等。
  3. 如果需要在多个页面中使用自定义导航栏，可以将组件注册为全局组件。

通过上述步骤，即可在uni-app中实现导航栏标题的自定义字体。

回到顶部