vue 引用自定义ttf、otf、在线字体的方法

下面是详细的 vue 引用自定义字体（包括ttf、otf、在线字体）的方法攻略说明：

1. 准备字体文件

首先需要准备好自定义字体文件，可以选择在本地寻找，也可以在网上搜索并下载。文件格式可以是ttf、otf等常见的字体文件格式。

2. 引用本地字体

2.1 在 CSS 中引用

首先需要将自定义字体文件放在项目的静态资源目录中，如 public 目录下的 fonts 文件夹，然后在 CSS 文件中使用 @font-face 语法引用。

@font-face {
  font-family: 'MyCustomFont';
  src: url('../fonts/MyCustomFont.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

在引用的时候，只需要在需要使用自定义字体的元素上设置 font-family 为自定义字体的名称即可。

.my-custom-font {
  font-family: 'MyCustomFont', sans-serif;
}

2.2 在 Vue 组件中引用

可以在 Vue 组件中通过 import 引入字体文件，然后在 @font-face 语法中引用该字体文件。在需要使用字体的组件中，可以使用 font-face 样式绑定自定义字体。

<template>
  <div class="my-custom-font">
    <p>Hello, I'm using custom font!</p>
  </div>
</template>

<script>
import MyCustomFont from '@/assets/fonts/MyCustomFont.ttf';

export default {
  name: 'MyComponent',
  created() {
    const myFont = new FontFace('CustomFont', `url(${MyCustomFont})`);
    document.fonts.add(myFont);
  },
  mounted() {
    const myDiv = this.$el.querySelector('.my-custom-font');
    myDiv.style.fontFamily = 'CustomFont';
  },
};
</script>

<style lang="scss">
.my-custom-font {
  font-size: 18px;
  font-weight: 600;
}
</style>

3. 引用在线字体

现在很多字体网站都提供了在线字体引用，只需要将链接地址加入 @font-face 语法中即可。

@font-face {
  font-family: 'MyCustomFont';
  src: url('https://fonts.googleapis.com/css?family=Roboto');
  font-weight: normal;
  font-style: normal;
}

同样，在需要使用字体的元素上设置 font-family 为自定义字体的名称即可。

.my-custom-font {
  font-family: 'MyCustomFont', sans-serif;
}

以上就是在 Vue 中引用自定义字体的方法攻略，希望可以帮到你！