Vue项目中引入字体文件的几种方法总结_Javascript

1. 引入本地字体文件

在项目中引入本地字体文件，通常需要通过 css 将字体文件引入，确保正确地加载字体资源。

第一步：将字体文件放入项目目录

首先，你需要准备好字体文件（例如 .ttf, .woff, .woff2, .otf 等格式）。可以在项目的 assets 文件夹中创建一个 fonts 文件夹，用于存放字体文件。

/src
  /assets
    /fonts
      yourfont.woff2
      yourfont.ttf

第二步：使用 css 引入字体文件

接下来，在你的项目中通过 css 引入这些字体文件。你可以在 src/assets 下创建一个新的样式文件，例如 fonts.css，然后在其中通过 @font-face 规则定义字体：

@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';

或者，如果你在项目中已经使用了全局样式文件（如 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 href="https://fonts.googleapis.com/css2?family=roboto:wght@400;700&display=swap" 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 href="https://fonts.googleapis.com/css2?family=roboto:wght@400;700&display=swap" 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 预处理器引入字体文件

如果你的项目使用了 sass、less 等 css 预处理器，也可以在预处理器中引入字体文件。与普通 css 引入字体的方式类似，只是文件的结构和语法有所不同。以 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;
}

通过这种方式，你可以利用预处理器的功能，像变量或嵌套等，来更灵活地管理字体样式。