vue中引入第三方字体文件的方法示例


Posted in Javascript onDecember 17, 2018

在用vue来写一官网的时候,想引入外部字体文件,毕竟总感觉他自己的字体有点难看,在这里记录下

1.先下载字体文件所需的.ttf文件

我这里想引入的是华文行楷字体

百度后下载了一个3M多的ttf文件

或者https://3water.com/fonts/点击此链接,进行字体下载

2.将字体文件引入

自己定义一个文件夹,放入下载好的.ttf文件

vue中引入第三方字体文件的方法示例

先自己定义一个font.css文件,将下载好的字体文件的路径引入

@font-face {
 font-family: "华文行楷";
 src: url('stxingka.ttf');
 font-weight: normal;
 font-style: normal;
}

在App.vue中的style里引入

<style lang="less" rel="stylesheet/less">
 @import "./common/font/font.css";
</style>

在webpack的配置文件里要加上解析.ttf文件的规则

module: {
 rules: [
  {
   test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
   loader: 'url-loader',
   options: {
    limit: 10000,
    name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
   }
  }
 ]
}

使用的话,就按照原本的字体名称,如我下的是华文行楷,就直接用华文行楷就可以了

在用vue + webpack进行开发的时候,在引用字体图标遇到字体无法加载的问题:

报以下错误

vue中引入第三方字体文件的方法示例

搞了好久没搞定,最后才找到解决方法(还是没有找到原因)

修改字体图标的css中引入字体文件的路径

vue中引入第三方字体文件的方法示例

以前的---->>修改后:

vue中引入第三方字体文件的方法示例

最后改成绝对路径就好了,但是原因还没搞懂

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery 研究心得 取得属性的值
Nov 30 Javascript
关于javascript document.createDocumentFragment()
Apr 04 Javascript
node.js中的fs.readdirSync方法使用说明
Dec 17 Javascript
javascript去除空格方法小结
May 21 Javascript
javascript原型模式用法实例详解
Jun 04 Javascript
jQuery实现新消息在网页标题闪烁提示
Jun 23 Javascript
红黑树的插入详解及Javascript实现方法示例
Mar 26 Javascript
JS构造一个html文本内容成文件流形式发送到后台
Jul 31 Javascript
Vue渲染过程浅析
Mar 14 Javascript
koa+mongoose实现简单增删改查接口的示例代码
May 13 Javascript
微信小程序实现上传word、txt、Excel、PPT等文件功能
May 23 Javascript
vue中filters 传入两个参数 / 使用两个filters的实现方法
Jul 15 Javascript
vue 表单验证按钮事件交由父组件触发的方法
Dec 17 #Javascript
Vue 报错TypeError: this.$set is not a function 的解决方法
Dec 17 #Javascript
vuex 解决报错this.$store.commit is not a function的方法
Dec 17 #Javascript
详解Vue This$Store总结
Dec 17 #Javascript
vue + element-ui的分页问题实现
Dec 17 #Javascript
Vue 中的受控与非受控组件的实现
Dec 17 #Javascript
js实现移动端轮播图
Dec 21 #Javascript
You might like
PHP生成excel时单元格内换行问题的解决方法
2010/08/26 PHP
php保存信息到当前Session的方法
2015/03/16 PHP
PHP读取文件的常见几种方法
2016/11/03 PHP
Laravel框架实现调用百度翻译API功能示例
2019/05/30 PHP
php解决安全问题的方法实例
2019/09/19 PHP
JQuery中的$.getJSON 使用说明
2011/03/10 Javascript
jquery attr 设定src中含有&amp;(宏)符号问题的解决方法
2011/07/26 Javascript
javascript:void(0)是什么意思示例介绍
2013/11/17 Javascript
jquery基础教程之数组使用详解
2014/03/10 Javascript
javascript进行数组追加方法小结
2014/06/16 Javascript
JavaScript实现鼠标点击后层展开效果的方法
2015/05/13 Javascript
详谈jQuery Ajax(load,post,get,ajax)的用法
2017/03/02 Javascript
js实现产品缩略图效果
2017/03/10 Javascript
js鼠标跟随运动效果
2017/03/11 Javascript
js实现华丽的九九乘法表效果
2017/03/29 Javascript
vue调试工具vue-devtools安装及使用方法
2018/11/07 Javascript
vue.js使用v-model实现表单元素(input) 双向数据绑定功能示例
2019/03/08 Javascript
koa+mongoose实现简单增删改查接口的示例代码
2019/05/13 Javascript
Layer.js实现表格溢出内容省略号显示,悬停显示全部的方法
2019/09/16 Javascript
手把手带你入门微信小程序新框架Kbone的使用
2020/02/25 Javascript
vue 获取url里参数的两种方法小结
2020/11/12 Javascript
详解Python编程中基本的数学计算使用
2016/02/04 Python
Python爬取京东的商品分类与链接
2016/08/26 Python
Python  pip安装lxml出错的问题解决办法
2017/02/10 Python
django中的setting最佳配置小结
2017/11/21 Python
对python 各种删除文件失败的处理方式分享
2018/04/24 Python
python+numpy实现的基本矩阵操作示例
2019/07/19 Python
大家都说好用的Python命令行库click的使用
2019/11/07 Python
Python下利用BeautifulSoup解析HTML的实现
2020/01/17 Python
python字典和json.dumps()的遇到的坑分析
2020/03/11 Python
pandas数据处理之绘图的实现
2020/06/15 Python
python为什么会环境变量设置不成功
2020/06/23 Python
python3.4中清屏的处理方法
2020/07/06 Python
Wedgwood英国官方网站:英式精致骨瓷餐具、礼品与生活精品,源于1759年
2019/09/02 全球购物
Haggar官网:美国男装品牌
2020/02/16 全球购物
python爬取企查查企业信息之selenium自动模拟登录企查查
2021/04/08 Python