uniapp怎么设置字体

1. uniapp字体概述

在使用uniapp开发应用程序时，可以通过选择不同的字体来提高应用程序的逼格和品质。uniapp支持多种字体的应用，如宋体、黑体、楷体等。本文将重点介绍在uniapp中设置字体的方法和技巧。

2. 设置全局字体

2.1 直接在app.vue中设置

我们可以在app.vue中设置全局字体，这样可以直接将字体应用到整个应用程序中。常见的做法是在globalData中设置字体、字号以及颜色等相关属性。例如：

export default {
  globalData: {
    font: 'SimSun',
    fontSize: '14px',
    fontColor: '#000'
  }
}

然后，我们可以在需要设置字体的地方，通过访问globalData中的字体相关属性，来设置字体。例如：

<view style="font-family:{{globalData.font}};font-size:{{globalData.fontSize}};color:{{globalData.fontColor}}">
  这里是内容
</view>

如果我们想改变字体，只需要修改globalData中相关属性即可。

2.2 在main.js中设置

如果我们想在整个uniapp应用中都使用同一种字体，可以在main.js中设置。主要是通过初始化整个应用程序，来设置全局字体。例如：

import Vue from 'vue'
import App from './App'
Vue.prototype.$font = 'SimSun'
const app = new Vue({
  ...App
})
app.$mount()

然后，在需要设置字体的地方，使用Vue.prototype.$font来访问主js中设置的字体。例如：

<view style="font-family:{{$font}}">
  这里是内容
</view>

如果我们想改变字体，只需要在主js中修改Vue.prototype.$font即可。

3. 设置局部字体

3.1 在page.vue中设置

我们可以在某个vue页面中局部设置字体。首先在page.vue中设置作用域样式，如下：

<style scoped>
  .my-font {
    font-family: 'SimSun';
  }
</style>

然后，在需要设置字体的地方，使用class来引用这个样式，例如：

<view class="my-font">
  这里是内容
</view>

这样，只有在这个页面中设置的内容会应用这个字体。

3.2 在组件中设置

如果我们想在某一个组件中设置字体，可以在组件中定义局部样式。例如：

<template>
  <view :class="myFont">
    这里是内容
  </view>
</template>
<script>
export default {
  data() {
    return {
      myFont: 'my-font'
    }
  }
}
</script>
<style scoped>
.my-font {
  font-family: 'SimSun';
}
</style>

然后，在需要使用字体的地方，使用class来引用这个组件的样式。例如：

<my-component class="my-font" />

这样，只有在这个组件中设置的内容会应用这个字体。

4. 总结

通过本文的介绍，我们可以知道在uniapp中设置字体有两种方式：全局设置和局部设置。全局设置适用于整个应用程序的字体设置，而局部设置适用于某个vue页面或组件中的字体设置。无论使用哪一种方式，都可以根据需要设置不同的字体，使得应用程序更加美观。