在 vue 2中如何设置字体的样式

在Vue 2中，你可以通过几种不同的方式来设置字体样式：

1. **内联样式**：你可以直接在元素上使用`style`属性来设置内联样式。这种方式非常直接，适用于直接在单个元素上应用样式。

<template>
  <div :style="{ color: fontColor, fontSize: fontSize + 'px' }">Hello World!</div>
</template>

<script>
export default {
  data() {
    return {
      fontColor: 'red',
      fontSize: 20
    };
  }
};
</script>

2. **CSS 文件**：你可以在Vue组件的`<style>`标签中编写CSS，并通过类名或元素ID应用这些样式。这是最常见的方法，适用于组件中的大部分样式需求。

<template>
  <div class="text-red">Hello World!</div>
</template>

<style scoped>
.text-red {
  color: red;
  font-size: 20px;
}
</style>

3. **全局样式**：如果你想要设置的样式是全局性的，比如在应用的多个组件中都使用相同的字体，你可以在全局的CSS文件中添加样式，或者在Vue实例中通过`Vue.mixin`来全局混入样式。

/* 在全局CSS文件中设置 */
.global-font-style {
  font-family: 'Arial', sans-serif;
}

然后在你的Vue组件中使用这个全局类名：

<template>
  <div class="global-font-style">Hello World!</div>
</template>

或者在`main.js`中使用`Vue.mixin`：

// main.js
import Vue from 'vue';

Vue.mixin({
  created() {
    document.body.classList.add('global-font-style');
  }
});

这样，在应用的任何地方创建的组件都会自动应用这个全局字体样式。

4. **动态加载的Web字体**：如果你需要从外部服务（如Google Fonts）加载字体，可以使用`mounted`生命周期钩子函数来在组件创建后加载字体。

<template>
  <div>Web Font Example</div>
</template>

<script>
export default {
  mounted() {
    const fontFace = new FontFace('MyWebFont', 'url(/path/to/font.woff2)');
    document.fonts.add(fontFace);
    fontFace.load().then(() => {
      document.documentElement.classList.add('my-web-font-loaded');
    });
  }
};
</script>

<style>
.my-web-font-loaded {
  font-family: 'MyWebFont', sans-serif;
}
</style>

确保替换`/path/to/font.woff2`为实际字体文件的路径。