Vue3项目引入并使用自定义字体文件

目录

效果

一、准备工作

1、 准备好需要引入并使用的字体文件

2、创建相应的文件夹

二、使用步骤

1、将字体文件放在全局的字体文件目录（如src/assets/fonts）

2、全局样式文件（如src/assets/css/fonts.css）中定义这两个字体

3、在项目的入口文件（如main.ts）中导入这个CSS文件

4、在Vue组件中使用上述字体

  欢迎关注VX公众号：前端小知识营地

---

效果

一、准备工作

1、 准备好需要引入并使用的字体文件

2、创建相应的文件夹

二、使用步骤

1、将字体文件放在全局的字体文件目录（如src/assets/fonts）

2、全局样式文件（如src/assets/css/fonts.css）中定义这两个字体

/* 定义DINPro-Bold字体 */
@font-face {
  font-family: 'DINPro-Bold';
  src: url('../fonts/DINPro-Bold.otf') format('opentype');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

/* 定义优设标题黑字体 */
@font-face {
  font-family: 'YouSheBiaoTiHei';
  src: url('../fonts/YouSheBiaoTiHei.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

注：上面的路径是相对于字体CSS文件的位置。务必确保文件路径是正确的哦！

3、在项目的入口文件（如main.ts）中导入这个CSS文件

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

// 全局导入字体样式
import '/@/assets/css/fonts.css'

createApp(App).mount('#app');

4、在Vue单页面中使用上述字体

<template>
  <div style="margin-bottom: 20px">
    <p>使用默认字体</p>
    <div>This is not DINPro-Bold 666 !!!</div>
    <div>这不是优设标题黑!!!</div>
  </div>
  <div>
    <p>使用自定义字体</p>
    <div class="din-font">This is DINPro-Bold 666 !!!</div>
    <div class="youshe-font">这是优设标题黑!!!</div>
  </div>
</template>

  欢迎关注VX公众号：前端小知识营地