使用外部字体首先得有外部字体的包,要得到外部字体的包,无外乎两种途径,一种到付费网站去购买,另一种就是到免费网站下载字体包。收费的傻事我们能做?所以这里给大家上一个免费网址:DaFont.com,目前我都是到这个上面去找自己所需的字体,当然应该还有其他的下载字体的地方。接下来介绍如何引入
1. 首先下载外部字体包
进到上面网址,找到自己需要的字体,然后DownLoad
2. 在src/assets/下新建font文件夹 ,将下载的字体包放入
3. font下新建font.css,将字体包统一引入
@font-face {
font-family: "ysbth";
src: url('ysbth.ttf');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: "ceyy";
src: url('ceyy.ttf');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: "PUHUITI";
src: url('ALIBABA-PUHUITI-HEAVY.TTF');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: "YJSZ";
src: url('液晶数字字体.TTF');
font-weight: normal;
font-style: normal;
}
上面的font-family可以自定义去设置,设置什么,将来使用的时候就用什么
4. main.js全局引入
import '@/assets/font/font.css'
5. 项目中直接使用
<template>
<div>
<div class="date">{{ new Date().toLocaleDateString() }}</div>
<div class="time">{{ new Date().toLocaleTimeString() }}</div>
</div>
</template>
<style scoped>
.date {
font-size: 35px;
color: #2879ff;
font-family: 'YJSZ';
}
.time {
font-size: 30px;
color: #2879ff;
font-family: 'ysbth';
}
</style>
效果: