前端引入不同的字体风格

为了实现页面更加美观，产品可能希望有不同的字体风格，那么就需要前端去实现不同的字体风格，实现不同的字体风格也非常简单，步骤如下。

1、准备字体文件。

我们首先需要将字体文件放置到项目的某个目录中，比如src/assets/font；字体文件基本上都是.ttf、.otf、.woff或.woff2格式，我这里的文件是.otf文件。

2、创建全局样式文件

在项目中创建一个样式文件，编写自定义字体类型，例如我创建了以下三个自定义字体类型，然后全局默认使用了Source Regular字体

@font-face {
  font-family:"Source Regular"; /* 自定义字体名称 */
  src: url("../font/SourceHanSansCN-Regular.otf");/* 自定义字体的路径 */
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family:"Source Medium";
  src: url("../font/SourceHanSansCN-Medium.otf");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family:"Source Bold";
  src: url("../font/SourceHanSansCN-Bold.otf");
  font-weight: normal;
  font-style: normal;
}
*{
  font-family: "Source Regular" ,Arial, sans-serif;//全局默认字体
}

3、引入全局样式文件

在主入口文件中引入这个全局样式文件，就大功告成了。

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

import './assets/css/fonts.css'; // 引入自定义字体和全局样式


const app = createApp(App)
app.mount('#app')