vue2中使用vue2SourceHanSansSC-VF.otf如何设置粗体

在Vue 2中使用`vue2SourceHanSansSC-VF.otf`字体文件，并设置粗体，你需要先将该字体文件添加到项目资源目录中，然后通过CSS将字体样式关联到元素上。这里是一个基本步骤：

1. **添加字体文件**：
- 将`vue2SourceHanSansSC-VF.otf`复制到项目的`static`或`assets`目录下，通常推荐放至`src/assets/fonts`。

2. **引用字体**：
在`main.js`或全局CSS中，使用`@font-face`规则声明新字体：

   import Vue from 'vue'
   import SourceHanSans from '@/assets/fonts/vue2SourceHanSansSC-VF.otf'

   Vue.prototype.$font = {
     sourceHanSans: () => `url(${SourceHanSans})`
   }

或者在CSS中：

   @font-face {
     font-family: 'Source Han Sans SC';
     src: url('@/assets/fonts/vue2SourceHanSansSC-VF.otf') format('opentype');
   }

3. **在HTML或组件中使用**：
使用`v-bind:class`结合自定义的CSS类来控制元素的粗体样式，比如创建一个`.bold`类：

   <p :class="{ bold: isBold }">这是一段文字</p>

   .bold {
     font-weight: bold;
     font-family: 'Source Han Sans SC', sans-serif; /* 如果需要指定字体 */
   }

4. **控制粗体状态**：
在JavaScript里，你可以通过`isBold`等变量来动态切换`.bold`类的显示与否：

   data() {
     return {
       isBold: false // 默认非粗体
     };
   },
   methods: {
     toggleBold() {
       this.isBold = !this.isBold;
     }
   },
   // 然后在模板中添加按钮点击事件来触发toggleBold方法
   // `<button @click="toggleBold">加粗/取消加粗</button>`