vue怎么设置字体样式

在Vue.js中，设置字体样式通常涉及到CSS部分。你可以将样式规则放在`.vue`文件的`<style>`标签内，或者利用Vue的单文件组件的 scoped 模式来限制样式的范围。以下是两个常见的方法：

**1. 内部 CSS 样式**

在 `<style>` 标签内直接编写样式，针对当前组件内的元素：

<template>
  <div class="my-text">
    <h1 style="font-family: Arial, sans-serif; font-size: 24px;">Hello, Vue!</h1>
  </div>
</template>

这里，`.my-text h1` 将应用指定的字体和大小。

**2. 使用 scoped CSS (Vue CLI 特性)**

如果你使用Vue CLI构建项目并且开启了`--style scoped`选项，则可以直接在`<template>`中的`<span>`、`<p>`等标签上添加`v-bind:class`来动态绑定字体样式：

<template>
  <div>
    <h1 :class="{ 'custom-font': true }">Hello, Vue!</h1>
    <style scoped>
      .custom-font {
        font-family: Arial, sans-serif;
        font-size: 24px;
      }
    </style>
  </div>
</template>

这里的`:class="{ custom-font: true }"`会使`<h1>`元素在`custom-font`类存在时应用相应的样式。