vue3 怎樣使用自己的字體

要使用自己的字體，首先需要將字體文件放在項目中，例如我們將字體文件放在src/assets/fonts/目錄下。

接著，在public/index.html文件中添加以下代碼，以引入字體文件：

<link rel="stylesheet" href="<%= BASE_URL %>assets/fonts/font-name/font-name.css">

這裡的font-name就是你的字體名稱，需要替換成你自己的字體名稱。

然後，在src/main.js文件中添加以下代碼，以全局註冊字體：

import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)

// 全局註冊字體
app.config.globalProperties.$fontFamily = 'font-name'

app.mount('#app')

這裡的font-name也是你的字體名稱，需要替換成你自己的字體名稱。

最後，在你的組件中使用你的字體，例如：

<template>
  <div :style="{ fontFamily: $fontFamily }">
    This is my custom font.
  </div>
</template>

這樣就可以使用你自己的字體了。需要注意的是，如果你的字體文件不是.woff或.woff2格式，需要在font-name.css中指定字體格式。例如：

@font-face {
  font-family: 'font-name';
  src: url('./font-name.ttf') format('truetype');
}