Vue項目中引入字體文件的幾種方法總結(jié)

更新時間：2024年10月15日 10:56:41 作者：前端程序猿i

在 Vue 項目中引入自定義字體文件,可以通過多種方式實現(xiàn),這取決于你的項目結(jié)構(gòu)、構(gòu)建工具以及字體文件的來源,本文將詳細介紹如何通過不同方法引入本地字體文件以及從外部引入字體,需要的朋友可以參考下

1. 引入本地字體文件

在項目中引入本地字體文件，通常需要通過 CSS 將字體文件引入，確保正確地加載字體資源。

第一步：將字體文件放入項目目錄

首先，你需要準備好字體文件（例如 .ttf, .woff, .woff2, .otf 等格式）?？梢栽陧椖康?nbsp;assets 文件夾中創(chuàng)建一個 fonts 文件夾，用于存放字體文件。

/src
  /assets
    /fonts
      YourFont.woff2
      YourFont.ttf

第二步：使用 CSS 引入字體文件

接下來，在你的項目中通過 CSS 引入這些字體文件。你可以在 src/assets 下創(chuàng)建一個新的樣式文件，例如 fonts.css，然后在其中通過 @font-face 規(guī)則定義字體：

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

這里的 url('@/assets/fonts/YourFont.woff2') 使用了 @ 別名來指向 src 目錄下的資源。如果你的 Vue 項目使用了 webpack 或者 Vite，通常會默認配置 @ 指向 src 目錄。

第三步：全局引入字體樣式

如果想要在整個項目中使用這個字體，可以將字體的樣式全局引入。你可以在 src/main.js 中通過 import 引入 fonts.css 文件：

import './assets/fonts/fonts.css';

或者，如果你在項目中已經(jīng)使用了全局樣式文件（如 App.vue 中的樣式），也可以直接在全局樣式中引用：

/* 在 App.vue 或者其他全局樣式文件中 */
@import './assets/fonts/fonts.css';

第四步：在項目中使用字體

引入字體之后，你就可以在項目的組件中使用它。例如：

<template>
  <div class="custom-font">
    這是使用自定義字體的文字。
  </div>
</template>

<style scoped>
.custom-font {
  font-family: 'YourFont', sans-serif;
}
</style>

2. 引入外部字體（如 Google Fonts）

除了本地字體文件，還可以使用 Google Fonts 等第三方字體庫。這些外部字體可以通過 CDN 鏈接引入。

使用 Google Fonts

打開 Google Fonts，選擇你想要使用的字體。
生成一個引入鏈接，例如：

<link  rel="external nofollow"  rel="external nofollow"  rel="stylesheet">

將這個鏈接添加到你的 index.html 文件的 <head> 標簽中（通常在 public/index.html 中找到）：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link  rel="external nofollow"  rel="external nofollow"  rel="stylesheet">
    <title>Vue App</title>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

然后你可以在你的組件中直接使用這個字體：

<template>
  <div class="google-font">
    這是使用 Google Fonts 的文字。
  </div>
</template>

<style scoped>
.google-font {
  font-family: 'Roboto', sans-serif;
}
</style>

3. 使用 CSS 預(yù)處理器引入字體文件

如果你的項目使用了 Sass、Less 等 CSS 預(yù)處理器，也可以在預(yù)處理器中引入字體文件。與普通 CSS 引入字體的方式類似，只是文件的結(jié)構(gòu)和語法有所不同。以 Sass 為例：

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

body {
  font-family: 'YourFont', sans-serif;
}

通過這種方式，你可以利用預(yù)處理器的功能，像變量或嵌套等，來更靈活地管理字體樣式。