vue 引用自定义ttf、otf、在线字体的方法


Posted in Javascript onMay 09, 2019

 1. 将下载好的字体放到本地目录

分别是两种字体

vue 引用自定义ttf、otf、在线字体的方法

放到项目的 assets 目录中

vue 引用自定义ttf、otf、在线字体的方法

2. 引入字体文件

首先创建一个 styles 文件夹,之后也可以用于存放一些公共的样式文件。再新建一个 index.less 文件,引入字体。

vue 引用自定义ttf、otf、在线字体的方法

@font-face {
 font-family: Snickles;
 src: url('../assets/Snickles-webfont.ttf');
}
@font-face {
 font-family: Ronda;
 src: url('../assets/RondaITCbyBT-Roman.otf');
}

3. 在项目中(main.js)引入刚刚加载进来的字体

vue 引用自定义ttf、otf、在线字体的方法

4. 测试

vue 引用自定义ttf、otf、在线字体的方法

效果图:

vue 引用自定义ttf、otf、在线字体的方法

vue 引用自定义ttf、otf、在线字体的方法

效果图:

vue 引用自定义ttf、otf、在线字体的方法

总结

以上所述是小编给大家介绍的vue 引用自定义ttf、otf、在线字体的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
js数组转json并在后台对其解析具体实现
Nov 20 Javascript
禁止IE用右键的JS代码
Dec 30 Javascript
jquery禁用右键单击功能屏蔽F5刷新
Mar 17 Javascript
页面js遇到乱码问题的解决方法是和无法转码的情况
Apr 30 Javascript
javascript的switch用法注意事项分析
Feb 02 Javascript
node.js 和HTML5开发本地桌面应用程序
Dec 13 Javascript
强大的JavaScript响应式图表Chartist.js的使用
Sep 13 Javascript
jquery实现回车键触发事件(实例讲解)
Nov 21 jQuery
利用jquery如何从json中读取数据追加到html中
Dec 01 jQuery
AngularJS select加载数据选中默认值的方法
Feb 28 Javascript
JS实现数组的增删改查操作示例
Aug 29 Javascript
使用jQuery给Table动态增加行、清空table的方法
Sep 05 jQuery
bootstrap-table formatter 使用vue组件的方法
May 09 #Javascript
详解es6新增数组方法简便了哪些操作
May 09 #Javascript
Vue函数式组件-你值得拥有
May 09 #Javascript
12个提高JavaScript技能的概念(小结)
May 09 #Javascript
Vue 处理表单input单行文本框的实例代码
May 09 #Javascript
使用vuex解决刷新页面state数据消失的问题记录
May 08 #Javascript
微信小程序网络层封装的实现(promise, 登录锁)
May 08 #Javascript
You might like
PHP防盗链的基本思想 防盗链的设置方法
2015/09/25 PHP
php记录搜索引擎爬行记录的实现代码
2018/03/02 PHP
PDO::_construct讲解
2019/01/27 PHP
学习YUI.Ext 第七天--关于View&JSONView
2007/03/10 Javascript
json-lib出现There is a cycle in the hierarchy解决办法
2010/02/24 Javascript
通过length属性判断jquery对象是否存在
2013/10/18 Javascript
JavaScript中三个等号和两个等号的区别(== 和 ===)浅析
2016/09/22 Javascript
判断数组的最佳方法(推荐)
2016/10/11 Javascript
微信小程序之仿微信漂流瓶实例
2016/12/09 Javascript
jQuery给表格添加分页效果
2017/03/02 Javascript
利用node.js+mongodb如何搭建一个简单登录注册的功能详解
2017/07/30 Javascript
vue实现图片滚动的示例代码(类似走马灯效果)
2018/03/03 Javascript
JavaScript实现简单的文本逐字打印效果示例
2018/04/12 Javascript
JavaScript检查数据中是否存在相同的元素(两种方法)
2018/10/07 Javascript
javascript动态创建对象的属性详解
2018/11/07 Javascript
vue element-ui table组件动态生成表头和数据并修改单元格格式 父子组件通信
2019/08/15 Javascript
Angular封装表单控件及思想总结
2019/12/11 Javascript
[01:06:26]全国守擂赛第二周 Team Coach vs DeMonsTer
2020/04/28 DOTA
python中的迭代和可迭代对象代码示例
2017/12/27 Python
Python中实现switch功能实例解析
2018/01/11 Python
Python+tkinter模拟“记住我”自动登录实例代码
2018/01/16 Python
Python使用Tkinter实现机器人走迷宫
2018/01/22 Python
python钉钉机器人运维脚本监控实例
2019/02/20 Python
使用Python进行体育竞技分析(预测球队成绩)
2019/05/16 Python
PyQT5 QTableView显示绑定数据的实例详解
2019/06/25 Python
django 使用全局搜索功能的实例详解
2019/07/18 Python
Python+unittest+requests 接口自动化测试框架搭建教程
2020/10/09 Python
分享一个页面平滑滚动小技巧(推荐)
2019/10/23 HTML / CSS
One.com挪威:北欧成长最快的网络托管公司
2016/11/19 全球购物
新西兰航空中国官网:Air New Zealand China
2018/07/24 全球购物
学校门卫岗位职责
2014/03/16 职场文书
2014迎国庆演讲稿
2014/09/19 职场文书
安全教育日主题班会
2015/08/13 职场文书
一封真诚的自荐信帮你赢得机会
2019/05/07 职场文书
德劲DE1102数字调谐收音机机评
2022/04/07 无线电
golang连接MySQl使用sqlx库
2022/04/14 Golang