vue项目引入字体.ttf的方法

这里提供 Vue 项目中引入 .ttf 字体文件的完整攻略。

一、将字体文件添加到 Vue 项目中

在 Vue 项目中引入自定义字体文件，需要先将字体文件添加到项目中。可以将 .ttf 文件放置在项目的 assets/fonts 文件夹中。

二、在项目中引入字体文件

可以在 main.js 中引入字体文件，并全局注册，也可以在组件中单独引入。

1. 在 main.js 中引入字体文件

// 在 main.js 中引入字体文件
import '@/assets/fonts/myfont.ttf'

并在 App.vue 文件中进行全局注册，以便于在组件中使用。

/* App.vue */
<style>
  /* 声明全局字体样式 */
  @font-face {
    font-family: 'myfont'; /* 字体名称 */
    src: url('./assets/fonts/myfont.ttf'); /* 字体文件相对路径 */
  }
  /* 使用全局字体 */
  body {
    font-family: 'myfont', sans-serif; /* 优先使用自定义字体，若无则使用系统默认字体 */
  }
</style>

2. 在单独的组件中引入字体文件

在需要使用字体的组件中单独引入字体文件。

/* MyComponent.vue */
<template>
  <div class="my-font">
    Hello, world!
  </div>
</template>

<style>
  /* 引入字体 */
  @font-face {
    font-family: 'myfont'; /* 字体名称 */
    src: url('../assets/fonts/myfont.ttf'); /* 字体文件相对路径 */
  }

  .my-font {
    font-family: 'myfont', sans-serif; /* 使用自定义字体 */
  }
</style>

三、示例说明

示例一：在全局引入字体文件

在 main.js 文件中引入字体文件，并在 App.vue 文件中声明并使用全局字体。

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

import '@/assets/fonts/myfont.ttf' // 引入字体文件

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

<!-- App.vue -->
<template>
  <div id="app">
    <div class="my-font">Hello, world!</div>
  </div>
</template>

<style>
  /* 声明全局字体样式 */
  @font-face {
    font-family: 'myfont'; /* 字体名称 */
    src: url('./assets/fonts/myfont.ttf'); /* 字体文件相对路径 */
  }
  /* 使用全局字体 */
  .my-font {
    font-family: 'myfont', sans-serif; /* 优先使用自定义字体，若无则使用系统默认字体 */
  }
</style>

示例二：在组件中引入字体文件

在 MyComponent.vue 中单独引入字体文件，并声明使用自定义字体。

<!-- MyComponent.vue -->
<template>
  <div class="my-font">
    Hello, world!
  </div>
</template>

<style>
  /* 引入字体 */
  @font-face {
    font-family: 'myfont'; /* 字体名称 */
    src: url('../assets/fonts/myfont.ttf'); /* 字体文件相对路径 */
  }

  .my-font {
    font-family: 'myfont', sans-serif; /* 使用自定义字体 */
  }
</style>