0
点赞
收藏
分享

微信扫一扫

Vue中引入外部字体

minute_5 2022-06-27 阅读 52

使用外部字体首先得有外部字体的包,要得到外部字体的包,无外乎两种途径,一种到付费网站去购买,另一种就是到免费网站下载字体包。收费的傻事我们能做?所以这里给大家上一个免费网址:​​DaFont.com​​,目前我都是到这个上面去找自己所需的字体,当然应该还有其他的下载字体的地方。接下来介绍如何引入

1. 首先下载外部字体包

进到上面网址,找到自己需要的字体,然后DownLoad

Vue中引入外部字体_css2. 在src/assets/下新建font文件夹 ,将下载的字体包放入 

Vue中引入外部字体_vue.js_02

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>

效果: 

Vue中引入外部字体_自定义_03


举报

相关推荐

0 条评论