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 相关文章推荐
JQuery 选项卡效果(JS与HTML的分离)
Apr 01 Javascript
javascript cookies操作集合
Apr 12 Javascript
文本框根据输入内容自适应高度的代码
Oct 24 Javascript
Js冒泡事件详解及阻止示例
Mar 21 Javascript
AngularJS学习笔记之TodoMVC的分析
Feb 22 Javascript
JQuery中ajax方法访问web服务实例
Jul 18 Javascript
微信小程序 下拉菜单简单实例
Apr 13 Javascript
js求数组中全部数字可拼接出的最大整数示例代码
Aug 25 Javascript
Es6 Generator函数详细解析
Feb 24 Javascript
Angular 组件之间的交互的示例代码
Mar 24 Javascript
解决vue-cli脚手架打包后vendor文件过大的问题
Sep 27 Javascript
antdesign-vue结合sortablejs实现两个table相互拖拽排序功能
Jan 08 Vue.js
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应用JSON技巧讲解
2013/02/03 PHP
PHP实现支持SSL连接的SMTP邮件发送类
2015/03/05 PHP
PHP使用pear自带的mail类库发邮件的方法
2015/07/08 PHP
Span元素的width属性无效果原因及解决方案
2010/01/15 Javascript
Firefox中autocomplete="off" 设置不起作用Bug的解决方法
2011/03/25 Javascript
面向对象Javascript核心支持代码分享
2012/05/23 Javascript
javascript继承之为什么要继承
2012/11/10 Javascript
jQuery支持动态参数将函数绑定到事件上的方法
2015/03/17 Javascript
用JavaScript判断CSS浏览器类型前缀的两种方法
2015/10/08 Javascript
浅谈jQuery中Ajax事件beforesend及各参数含义
2016/12/03 Javascript
AngularJS中的缓存使用
2017/01/11 Javascript
ionic实现底部分享功能
2017/05/11 Javascript
详解vue axios中文文档
2017/09/12 Javascript
Vue filter介绍及详细使用
2018/04/04 Javascript
vue-cli2.0转3.0之项目搭建的详细步骤
2018/12/11 Javascript
怎么使用javascript深度拷贝一个数组
2019/06/06 Javascript
layui点击左侧导航栏,实现不刷新整个页面,只刷新局部的方法
2019/09/25 Javascript
Vue根据条件添加click事件的方式
2019/11/09 Javascript
python list排序的两种方法及实例讲解
2017/03/20 Python
Python matplotlib通过plt.scatter画空心圆标记出特定的点方法
2018/12/13 Python
python实现生成字符串大小写字母和数字的各种组合
2019/01/01 Python
基于YUV 数据格式详解及python实现方式
2019/12/09 Python
Python semaphore evevt生产者消费者模型原理解析
2020/03/18 Python
让Django的BooleanField支持字符串形式的输入方式
2020/05/20 Python
keras输出预测值和真实值方式
2020/06/27 Python
python怎么自定义捕获错误
2020/06/29 Python
土木工程师职业规划范文
2014/03/07 职场文书
好听的队名和口号
2014/06/09 职场文书
师德师风整改措施
2014/10/24 职场文书
年底个人总结范文
2015/03/10 职场文书
演讲开场白和结束语
2015/05/29 职场文书
结婚主持人致辞
2015/07/28 职场文书
祝福语集锦:给妹妹结婚的祝福语
2019/12/18 职场文书
Python函数式编程中itertools模块详解
2021/09/15 Python
JavaScript 对象创建的3种方法
2021/11/17 Javascript
Mongodb 迁移数据块的流程介绍分析
2022/04/18 MongoDB