UniApp CSS 字体修改指南：三种方法轻松实现

UniApp 中 CSS 字体修改指南：三种方法轻松实现

在 UniApp 开发过程中，您可以通过以下三种方法轻松改变 CSS 字体样式：

1. 全局 CSS 样式设置字体

在 App.vue 或 main.js 等全局样式文件中，您可以使用 font-family 属性设置默认字体：

body {
  font-family: '微软雅黑', sans-serif;
}

2. 在组件内部样式中设置字体

您可以在组件的 <style> 标签内使用 CSS 规则为特定元素设置字体样式：

<template>
  <div class='content'>
    <p class='text'>这是一段文字</p>
  </div>
</template>

<style>
.content {
  font-family: '微软雅黑', sans-serif;
}

.text {
  font-size: 16px;
}
</style>

3. 使用 UniApp 提供的字体库

UniApp 支持使用外部字体库，例如 Google Fonts。您可以使用 @import 导入字体库，并将其应用于元素：

<template>
  <div class='content'>
    <p class='text'>这是一段文字</p>
  </div>
</template>

<style>
@import url('https://fonts.googleapis.com/css?family=Roboto');

.text {
  font-family: 'Roboto', sans-serif;
  font-size: 16px;
}
</style>

总结

以上是 UniApp 中修改 CSS 字体的三种常用方法，您可以根据实际需求选择最适合您的方法。