uniapp默认字体怎么设置

1. uniapp默认字体介绍

在uniapp中，默认字体取决于运行平台，例如在iOS平台上，默认字体为San Francisco字体，而在Android平台上，则为Roboto字体。由于不同平台字体差异较大，因此需要针对不同平台设置不同的字体样式以达到一致性的效果。

2. 设置uniapp默认字体

2.1 修改App.vue样式

可以通过修改App.vue样式，来设置全局默认字体。在App.vue中添加以下代码：

<style lang="scss">
  /*iOS*/
  @media screen and (min-width: 0px) and (max-width: 374px) {
    html,body {
      font-family: "PingFang SC","Helvetica Neue","Hiragino Sans GB","Microsoft YaHei","sans-serif";
      font-size: 12px;
    }
  }
  
  /*Android*/
  @media screen and (min-width: 374px) and (max-width: 750px) {
    html,body {
      font-family: "Droid Sans Fallback","sans-serif";
      font-size: 14px;
    }
  }
</style>

上述代码中，我们使用@media媒体查询来区分iOS和Android平台。在iOS平台上，我们使用了常用的字体，包括苹方字体和Helvetica Neue字体等；在Android平台上，我们使用了Droid Sans Fallback字体。此外，我们还设置了不同平台下的默认字体大小，以确保整体UI表现一致。

2.2 使用uni.scss

uniapp提供了uni.scss文件，在其中封装了一些常用的样式变量和混合器。我们可以通过修改uni.scss文件来设置默认字体。在App.vue中添加以下代码：

<style lang="scss">
  $uni-font-family: PingFang SC,"Helvetica Neue","Hiragino Sans GB","Microsoft YaHei","sans-serif";
  $uni-font-size: 14px;
  @import "uni.scss";
</style>

我们在上述代码中，首先设置了$uni-font-family变量，指定了不同平台下的默认字体；然后设置了$uni-font-size变量，指定了默认字体大小。最后，通过@import导入了uni.scss文件，以使变量生效。

3. 解决第三方组件字体不一致的问题

在使用uniapp过程中，我们经常会使用一些第三方组件库，例如iview和vant等。这些组件库中的字体样式可能与我们所设置的默认字体样式不同，导致整体UI表现不一致。为了解决这个问题，我们可以通过修改主题色来覆盖组件库中的字体样式。

3.1 修改主题色

我们可以通过已有的主题色，添加不同级别的颜色变量，通过设置不同的颜色值来达到样式覆盖的效果。在uni.scss文件中添加以下代码：

$uni-primary-color: #007aff;
$uni-primary-color-dark: #0066cc;
$uni-primary-color-light: #b3daff;

在上述代码中，我们定义了三个主题色变量，分别为$uni-primary-color、$uni-primary-color-dark和$uni-primary-color-light。这三个变量分别对应了主题色、主题色深色和主题色浅色。我们可以通过设置不同的颜色值，来达到样式覆盖的效果。

3.2 使用字体图标

除了修改主题色外，我们还可以使用字体图标来替换文字内容。字体图标是一种矢量图形，可以无限放大和缩小，不失真，并且支持任意颜色的填充。在uniapp中，我们可以使用uni-icons组件库中的字体图标。

在使用uni-icons时，我们需要先在App.vue中导入字体图标的CSS文件（如果使用的是uniapp初始模板，则已自动导入）：

@import "@/uni_modules/uni-icons/fonts/iconfont.css"; 

然后就可以在页面中使用uni-icons提供的图标了。例如：

<uni-icons type="check-in" size="24"></uni-icons>

在上述代码中，我们使用了uni-icons提供的<uni-icons>组件，并使用type属性来指定要使用的图标。此外，我们还指定了大小为24px。

4. 总结

在uniapp中，默认字体取决于运行平台，可以通过修改样式或使用uni.scss文件来设置默认字体。同时，我们还可以通过修改主题色或使用字体图标来解决第三方组件字体不一致的问题。