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 相关文章推荐
js自带函数备忘 数组
Dec 29 Javascript
[原创]提供复制本站内容时出现,该文章转自脚本之家等字样的js代码
Mar 27 Javascript
JS基础随笔(菜鸟必看篇)
Jul 13 Javascript
Bootstrap导航条学习使用(一)
Feb 08 Javascript
vue实现简单表格组件实例详解
Apr 16 Javascript
Bootstrap多级菜单的实现代码
May 23 Javascript
vue.js 上传图片实例代码
Jun 22 Javascript
JavaScript中使用Async实现异步控制
Aug 15 Javascript
vue如何集成raphael.js中国地图的方法示例
Aug 15 Javascript
如何用Node写页面爬虫的工具集
Oct 26 Javascript
浅谈vue异步数据影响页面渲染
Oct 29 Javascript
js实现盒子滚动动画效果
Aug 09 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
WML,Apache,和 PHP 的介绍
2006/10/09 PHP
PHP 采集程序原理分析篇
2010/03/05 PHP
Warning: session_destroy() : Trying to destroy uninitialized sessionq错误
2011/06/16 PHP
php实现购物车功能(上)
2020/07/23 PHP
如何实现动态删除javascript函数
2007/05/27 Javascript
JavaScript的面向对象方法以及差别
2008/03/31 Javascript
Javascript中的相等与不等运算
2010/04/25 Javascript
使用基于jquery的gamequery插件做JS乒乓球游戏
2011/07/31 Javascript
EasyUI 中 MenuButton 的使用方法
2012/07/14 Javascript
JS中window.open全屏命令解析及使用示例
2013/12/11 Javascript
jQuery+jRange实现滑动选取数值范围特效
2015/03/14 Javascript
JavaScript中的slice()方法使用详解
2015/06/06 Javascript
JavaScript中setFullYear()方法的使用详解
2015/06/11 Javascript
canvas压缩图片转换成base64格式输出文件流
2017/03/09 Javascript
Angular实现的简单定时器功能示例
2017/12/28 Javascript
深入koa-bodyparser原理解析
2019/01/16 Javascript
JS自定义对象创建与简单使用方法示例
2020/01/15 Javascript
JS操作JSON常用方法(10w阅读)
2020/12/06 Javascript
Vue+penlayers实现多边形绘制及展示
2020/12/24 Vue.js
用于统计项目中代码总行数的Python脚本分享
2015/04/21 Python
Python实现删除文件但保留指定文件
2015/06/21 Python
基于python的Tkinter编写登陆注册界面
2017/06/30 Python
pandas.loc 选取指定列进行操作的实例
2018/05/18 Python
详解python中递归函数
2019/04/16 Python
Python3+Pycharm+PyQt5环境搭建步骤图文详解
2019/05/29 Python
Python pandas.DataFrame调整列顺序及修改index名的方法
2019/06/21 Python
利用Python计算KS的实例详解
2020/03/03 Python
实例讲解使用HTML5 Canvas绘制阴影效果的方法
2016/03/25 HTML / CSS
阿迪达斯意大利在线商店:adidas意大利
2016/09/19 全球购物
澳大利亚Mocha官方网站:包、钱包、珠宝和配饰
2019/07/18 全球购物
单位实习证明怎么写
2014/01/17 职场文书
运动会入场词100字
2014/02/06 职场文书
Nginx反向代理多个服务器的实现方法
2021/03/31 Servers
MySQL基础(二)
2021/04/05 MySQL
SQL Server中的游标介绍
2022/05/20 SQL Server
如何用H5实现好玩的2048小游戏
2022/07/23 HTML / CSS