vue项目使用外部字体

1、下载字体

https://www.dafont.com/

2、项目中`assets`下添加一个字体样式文件夹`front`

将下载好的文件放到文件夹中，并创建一个front.css字体样式文件：

@font-face {font-family: "jap_trad";src: url('jap_trad.otf');font-weight: normal;font-style: normal;
}@font-face {font-family: "Kami-Geisha";src: url('Kami-Geisha.ttf');font-weight: normal;font-style: normal;
}@font-face {font-family: "Galaxy_dingbats-Regular";src: url('Galaxy_dingbats-Regular.ttf');font-weight: normal;font-style: normal;
}@font-face {font-family: "Birthdaze";src: url('Birthdaze.ttf');font-weight: normal;font-style: normal;
}@font-face {font-family: "DS-DIGI";src: url('DS-DIGI.ttf');font-weight: normal;font-style: normal;
}@font-face {font-family: "DS-DIGIB";src: url('DS-DIGIB.ttf');font-weight: normal;font-style: normal;
}@font-face {font-family: "DS-DIGII";src: url('DS-DIGII.ttf');font-weight: normal;font-style: normal;
}@font-face {font-family: "DS-DIGIT";src: url('DS-DIGIT.ttf');font-weight: normal;font-style: normal;
}

3、将样式引入到`main.s`文件中

import '@/styles/index.scss'

4、使用字体

<template><div class="fonts-box"><!-- https://www.dafont.com/ --><input class="input" type="text" v-model="text" /><button class="btn" @click="text=''">重置</button><h3 class="jap-trad">{{text}}</h3><h3 class="kami-geisha">{{text}}</h3><!-- https://www.dafont.com/galaxy-dingbats.font --><h3 class="Galaxy_dingbats-Regular">{{text}}</h3><!-- https://www.dafont.com/birthdaze.font --><h3 class="Birthdaze">{{text}}</h3><!-- https://www.dafont.com/ds-digital.font --><h3 class="DS-DIGI">{{text}}</h3><h3 class="DS-DIGII">{{text}}</h3><h3 class="DS-DIGIB">{{text}}</h3><h3 class="DS-DIGIT">{{text}}</h3></div>
</template><script>
export default {name: '',components: {},data () {return {text: 'f k l o r w z o 2'}},mounted () {},methods: {}
}
</script><style scoped lang="scss">
.fonts-box {padding: 30px;
}
.input {height: 36px;padding: 0px 20px;border-radius: 5px;
}.btn {height: 36px;padding: 0px 16px;
}.jap-trad {font-size: 35px;font-family: 'jap_trad';
}.kami-geisha {font-size: 35px;font-weight: 500;font-family: 'Kami-Geisha';
}.Galaxy_dingbats-Regular {font-size: 60px;font-weight: 500;font-family: 'Galaxy_dingbats-Regular';
}.Birthdaze {font-weight: 500;font-size: 60px;font-family: 'Birthdaze';
}.DS-DIGI{font-size: 35px;font-weight: 500;font-family: 'DS-DIGI';
}.DS-DIGIB{font-size: 35px;font-weight: 500;font-family: 'DS-DIGIB';
}.DS-DIGII{font-size: 35px;font-weight: 500;font-family: 'DS-DIGII';
}.DS-DIGIT{font-size: 35px;font-weight: 500;font-family: 'DS-DIGIT';
}
</style>

最终效果：

vue项目使用外部字体相关推荐

vue项目引入外部字体文件
1.在根目录的assets中新建fonts目录 /* // 注意:font-family: 'XXX'; 将字体名字自定义为XXX,使用时要用这个名字 */ @font-face {font-fami ...
Vue项目引入自定义字体 tinymce自定义字体的使用
字体也不是随便就能使用的,如果是有版权的字并且进行了大规模商用,很有可能面临着一大笔的赔偿金,所以公司会购买一些字体的使用权,所以在日常做项目时会经常使用到自定义字体引入的问题.我遇到的是Vue项目的 ...
在新版Vue中引入外部字体
**第一步:**下载相应的ttf文件,如我下载的华文行楷字体第二步添加响应的font-css文件 @font-face {font-family: "华文行楷";src: url ...
vue项目中引入字体包
问题: 项目开发过程中,因UI的显示要求,需要引入一些字体,那如何引入外部字体呢?很简单,只需要以下3步一下载对应的字体包文件,放置到我们的项目中比如我需要PingFangSC的系列字体,我 ...
webpack打包VUE项目读取外部配置文件，灵活配置域名
参考方案一作为一个兼职前端和运维的java程序员,今天我司测试人员提出了一个需求,当后台服务地址ip地址改变后,webpack打包的VUE项目得更改地址重新打包,太麻烦了,最好可以读取外部配置文件的 ...
Vue中引入外部字体
使用外部字体首先得有外部字体的包,要得到外部字体的包,无外乎两种途径,一种到付费网站去购买,另一种就是到免费网站下载字体包.收费的傻事我们能做?所以这里给大家上一个免费网址:DaFont.com,目前 ...
Vue项目引入自定义字体
1. 问设计先要到字体文件(woff2|eot|ttf|otf) 因为项目对浏览器支持性要求不高,所以笔者只用了ttf文件(仅以苹方字体举例),一般情况ttf和woff就够用注: 如果要求支持Ope ...
vue项目导入谷歌字体包
实现导入谷歌字体谷歌字体链接:http://www.googlefonts.cn/chinese App.vue <style>@import '/common/font/font.cs ...
vue项目设置全局字体样式font-family
直接在app.vue文件中加上一下代码即可,这是我收集的比较全的字体样式,从第一个向后找,系统有就默认显示第一个,依次往后找: <style lang="scss"> ...

vue项目使用外部字体

1、下载字体

2、项目中`assets`下添加一个字体样式文件夹`front`

3、将样式引入到`main.s`文件中

4、使用字体

vue项目使用外部字体相关推荐

最新文章

热门文章

vue项目使用外部字体

1、下载字体

2、项目中assets下添加一个字体样式文件夹front

3、将样式引入到main.s文件中

4、使用字体

vue项目使用外部字体相关推荐

最新文章

热门文章

2、项目中`assets`下添加一个字体样式文件夹`front`

3、将样式引入到`main.s`文件中