导入iconfont字体

字体下载

选择字体，进入

这里我们使用阿里妈妈刀隶体举例，点击进入

下载后会得到压缩包，解压，得到如下格式的文件

创建字体目录

进入vue项目，src目录下创建文件夹fonts，目录结构如下：

将解压后的两个文件复制到该文件夹下

创建fonts.css

@font-face {
	font-family: 'AlimamaDaoLiTi';
	font-weight: 400;
	src: url("AlimamaDaoLiTi.woff2") format("woff2"),
	url("AlimamaDaoLiTi.woff") format("woff");
	font-display: swap;
}

main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'

// 加入这一句
import './fonts/fonts.css'

Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

使用

<template>
  <div class="about">
    <div class='test'>测试测试测试</div>
  </div>
</template>

<style>
.test {
  font-family: 'AlimamaDaoLiTi';
}
</style>

成功！！！

电子时钟字体

下载字体

通过百度网盘分享的文件：字体
链接：https://pan.baidu.com/s/1F5PzxFI4dq4mAPLXuJ1EVQ?pwd=stvv 
提取码：stvv

下载后得到如下两个文件：

将其添加到src/fonts目录下

fonts.css

@font-face {
	font-family: 'AlimamaDaoLiTi';
	font-weight: 400;
	src: url("AlimamaDaoLiTi.woff2") format("woff2"),
	url("AlimamaDaoLiTi.woff") format("woff");
	font-display: swap;
}

@font-face {
	font-family: 'Digitial';
	src:url(UnidreamLED.eot);
	src:url(UnidreamLED.eot?#iefix)format('embedded-opentype'),
	url('UnidreamLED.woff') format('woff'), 
	local('UnidreamLED'), url("UnidreamLED.woff");/***默认使用本地的***/
  }

使用

<template>
  <div class="about">
    <div class='test'>测试测试测试</div>
    <div class="time">2012-10-01 10:01:12</div>
  </div>
</template>

<style>
.test {
  font-family: 'AlimamaDaoLiTi';
}

.time {
  font-family: 'Digitial';
  font-size: large;
  color: aquamarine;
}
</style>