Vue中引入外部字体

使用外部字体首先得有外部字体的包，要得到外部字体的包，无外乎两种途径，一种到付费网站去购买，另一种就是到免费网站下载字体包。收费的傻事我们能做？所以这里给大家上一个免费网址：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>

效果：

Vue中引入外部字体相关推荐

在新版Vue中引入外部字体
**第一步:**下载相应的ttf文件,如我下载的华文行楷字体第二步添加响应的font-css文件 @font-face {font-family: "华文行楷";src: url ...
在vue中引入外部的css文件
在vue中引入外部的css文件在项目的src文件下,新建一个style文件夹,存放css文件. 1. 全局引入将外部的css文件放到style文件下,引入外部文件只需在main.js文件中 imp ...
项目开发中引入外部字体库
前端web项目下载字体库(如:方正兰亭中黑_GBK.ttf) 全局引入 @font-face {font-family: "方正兰亭中黑_GBK";src: url(" ...
梳理详细 vue中引入第三方字体图标库iconfont
最近在项目中需要使用第三方图标库,我选择了阿里的iconfont.记录下学习过程.在网上查阅资料的时候,发现很多教程写的比较模糊,一些博主只是提供一种可实现的方式,但是并没有完全区分iconfont的 ...
vue项目引入外部字体文件
1.在根目录的assets中新建fonts目录 /* // 注意:font-family: 'XXX'; 将字体名字自定义为XXX,使用时要用这个名字 */ @font-face {font-fami ...
vue中引入第三方字体图标库iconfont，及iconfont引入彩色图标
iconfont字体图标使用就不多说了,大致是几部: 1.在iconfont官网选图标,加入购物车,加入项目,下载到本地,解压 2.在项目assets目录新建目录iconfont,用于存放刚才下载解压 ...
vue中引入外部文件js、css、img的方法
第一种方法,直接放到相对路径下,位置:./static/js/main.js,./static/css/main.css,./static/img/test.png 第二种方式: ES6的import ...
html chrome中引入外部字体,强制Chrome在CSS中使用外部字体
您可以重命名CSS中的字体,仍然使用远程woff文件.例如: @font-face { font-family: 'RobotoBis'; font-style: normal; font-weigh ...
vue实例中调用外部js_vue中引入外部js方法实例
我们在做vue项目时,经常会需要引入js,常用的有以下几种.本文主要和大家分享vue中引入外部js方法实例,希望能帮助到大家. 第一种import XX from "路径" Vue ...

Vue中引入外部字体

1. 首先下载外部字体包

2. 在src/assets/下新建font文件夹，将下载的字体包放入

3. font下新建font.css，将字体包统一引入

4. main.js全局引入

5. 项目中直接使用

Vue中引入外部字体相关推荐

最新文章

热门文章

Vue中引入外部字体

1. 首先下载外部字体包

2. 在src/assets/下新建font文件夹 ，将下载的字体包放入

3. font下新建font.css，将字体包统一引入

4. main.js全局引入

5. 项目中直接使用

Vue中引入外部字体相关推荐

最新文章

热门文章

2. 在src/assets/下新建font文件夹，将下载的字体包放入