在前端项目里引入字体

前言

最近做可视化看板产品经理觉得默认字体丑，那么只能在项目里引入一下字体了。

注：

• vue项目
• 项目里使用的是scss，对于css和less 没有进行测试

实现

分享一个下载ppt、字体的网址：第一ppt

在src/assets目录下创建一个文件

我这里创建了一个font文件夹，用来存放字体

下载字体，并创建一个scss文件

在scss文件里设置字体

@font-face {
  font-family: "hyjt";   //给引入的字体起个名字
  src: url("./hyjt.ttf");  //引入字体文件
}

使用

以按需引入为例

全局引入
在main.js里全局引入

按需引入
按需引入有两种方式，一种是在js里引入，一种是在style里引入

//js引入
import '../../../../assets/font/font.scss';

//style引入
@import url('../../../../assets/font/font.scss');

实例

<template>
    <div>
        <div class="a">字体1</div>
        <div class="b">字体2</div>
        <div class="c">字体3</div>
        <div class="d">字体4</div>
    </div>
</template>

<script>
// import '../../../../assets/font/font.scss';
export default {
    data() {
        return {};
    },
    mounted() {},
    methods: {}
};
</script>

<style scoped lang="scss">
@import url("../../../../assets/font/font.scss");

.a {
  font-size: 30px;
  font-family: "jingdan";
}
.b {
  font-size: 30px;
  font-family: "qs";
}
.c {
  font-size: 30px;
  font-family: "sdc";
}

.d {
  font-size: 30px;
  font-family: "hyjt";
}
</style>

效果