1、新建字体文件夹并设置字体css

/**font.css**/@font-face {font-family: 'font1';src: url("./font1.ttf");
}@font-face {font-family: 'font2';src: url("./font2.ttf");
}@font-face {font-family: 'font3';src: url("./font3.ttf");
}@font-face {font-family: 'font4';src: url("./font4.ttf");
}

2、main.js引入为公共资源

//main.jsimport "@/assets/font/font.css"

3.在任何地方即可使用字体了

    <!--html/vue--><div style="font-family: font1">字体1</div><div style="font-family: font2">字体2</div><div style="font-family: font3">字体3</div><div style="font-family: font4">字体4</div>

避大坑！！！

字体文件的后缀一定要是小写，如果是大小的文件后缀手动修改为小写

亲趟大坑，找了俩小时原因

vue使用外部字体文件相关推荐

vue中引入字体文件
在用vue来写一官网的时候,想引入外部字体文件,毕竟总感觉他自己的字体有点难看,在这里记录下 1.先下载字体文件所需的.ttf文件我这里想引入的是华文行楷字体百度后下载了一个3M多的ttf文件 2 ...
php计算时间差js,JavaScript如何计算时间差（引入外部字体文件）？
本章给大家带来用JavaScript如何计算时间差(引入外部字体文件)?有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. JavaScript Date() 对象: new Date() ...
.NET Excel 组件Spire.XLS for .NET v9.7发布上线！支持将外部字体文件应用于图表！
Spire.XLS for .NET是一款专业的 .NET Excel 组件, 它可以用在各种 .NET 框架中,包括 .NET Core.ASP.NET 和 Windows Forms 等相关的 . ...
VUE引用外部字体tff及常见bug解决方案
1. 引用字体步骤 1.1 web.base.conf.js 文件需要有解析tff文件的规则,在module:{ rules:{}}中插入代码 {test: /\.(woff2?|eot|ttf|ot ...
css引入外部字体文件
1.下载您想要的网站字体 100font.com - 免费字体下载 - 免费商用字体下载网站 2.如果下载的字体文件是TTF格式,不能在网站上直接使用,则需要转换成eot.svg.woff格式,这里提 ...
WPF使用外部字体文件（.ttf/.otf）
WPF使用外部字体文件(.ttf/.otf) 1.字体文件(.ttf或者otf)导入到项目中,以.otf文件为例 2.设置文件属性为Resource,不复制 Net 5以上(包括net core)项目 ...
vue项目引入外部字体文件
1.在根目录的assets中新建fonts目录 /* // 注意:font-family: 'XXX'; 将字体名字自定义为XXX,使用时要用这个名字 */ @font-face {font-fami ...
vue 引入外部字体样式
assets静态文件中创建该字体文件 innner.TTF为字体文件 innner.css @font-face {font-family: "inner";src: url(&q ...
vue 引入自定义字体文件
1. 将字体文件放在对应的目录下面 2.新建引入文件如下图 3.main.js引入 4.调用:

vue使用外部字体文件

避大坑！！！

vue使用外部字体文件相关推荐

最新文章

热门文章