vue中引入第三方字体文件的方法示例
在用vue来写一官网的时候,想引入外部字体文件,毕竟总感觉他自己的字体有点难看,在这里记录下
1.先下载字体文件所需的.ttf文件
我这里想引入的是华文行楷字体
百度后下载了一个3M多的ttf文件
或者https://www.jb51.net/fonts/点击此链接,进行字体下载
2.将字体文件引入
自己定义一个文件夹,放入下载好的.ttf文件
先自己定义一个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进行开发的时候,在引用字体图标遇到字体无法加载的问题:
报以下错误
搞了好久没搞定,最后才找到解决方法(还是没有找到原因)
修改字体图标的css中引入字体文件的路径
以前的---->>修改后:
最后改成绝对路径就好了,但是原因还没搞懂
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。
相关推荐
-
Vue 中如何正确引入第三方模块的方法步骤
方法一:配置 webpack ProvidePlugin 全局引入 假设要使用到 jquery,那么可以通过配置 webpack 的 ProvidePlugin 的插件来全局引入: https://webpack.js.org/plugins/provide-plugin/ new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery' }) 方法二:包装成插件在 Vue 中调用 use 方法安装 另外一种比较靠谱的方法是将第三方模块打包成插件
-
Vue cli 引入第三方JS和CSS的常用方法分享
第一种方法: 直接在index.html中引入 js <script type="text/javascript" src="static/mui.min.js" ></script> css <link rel="stylesheet" href="static/mui.min.css" rel="external nofollow" /> 第二种 在单页面中用impo
-
Vue 第三方字体图标引入 Font Awesome的方法
Font Awesome 用过Bootstrap字体图符的小伙伴肯定很熟悉字体图符的便利,不管是在加载还是修改方面,字体图符远远优于图片.但是饿了吗封装的Element UI提供的字体图符少之又少,又不想用图片,只能自己扩展图符咯. Font Awesome 提供了675个可缩放的矢量图标,可以使用CSS所提供的所有特性对它们进行更改,包括:大小.颜色.阴影或者其它任何支持的效果.还有很多优点不一一举例,可自行查看文档:http://fontawesome.dashgame.com/ npm 安
-
VUE引入第三方js包及调用方法讲解
VUE引入第三方js包及调用方法 1.首先是第三方js包存放的位置 一定要放在 static 目录下否则引用不到 2.网上查找到的引用第三方包的四种方式 实测部分第三方js包没法使用,较稳定的方式是在 index.html 中引入js包 <script src="static/xxxxx.js"></script> 3.mounted 是初始化加载的方法 可以理解为jquery 中的页面加载完的初始化方法 如果第三方包有初始化需要调用的一些函数等 需要写在mou
-
vue中引入第三方字体文件的方法示例
在用vue来写一官网的时候,想引入外部字体文件,毕竟总感觉他自己的字体有点难看,在这里记录下 1.先下载字体文件所需的.ttf文件 我这里想引入的是华文行楷字体 百度后下载了一个3M多的ttf文件 或者https://www.jb51.net/fonts/点击此链接,进行字体下载 2.将字体文件引入 自己定义一个文件夹,放入下载好的.ttf文件 先自己定义一个font.css文件,将下载好的字体文件的路径引入 @font-face { font-family: "华文行楷"; src:
-
vue中引用阿里字体图标的方法
想在vue中引用阿里的iconfont,却出现报错 ,原因是没有对应的loader处理字体文件. 解决办法 1.引入css文件 import 'font-awesome/css/font-awesome.min.css' 2.在webpack.config中配置 { test: /\.(eot|svg|ttf|woff|woff2)$/, loader: 'file-loader' } 总结 以上所述是小编给大家介绍的vue中引用阿里字体图标的方法,希望对大家有所帮助,如果大家有任何疑问请给我留
-
Android.mk文件中添加第三方jar文件的方法
先添加: LOCAL_STATIC_JAVA_LIBRARIES += clib clib为jar文件名,没有后缀 然后下面语句中间添加 LOCAL_PREBUILT_STATIC_JAVA_LIBRARIES :=clib:libs/clib.jar include $(CLEAR_VARS) include $(BUILD_MULTI_PREBUILT) 即: include $(CLEAR_VARS) LOCAL_PREBUILT_STATIC_JAVA_LIBRARIES := clib
-
在Vue中使用icon 字体图标的方法
1.使用线上的阿里iconfont图标库 1.打开 iconFont官网 选择自己喜欢的图标,并且添加购物车 2.点击购物车,添加至项目 3 生成链接 4在我们的vue项目中,找到index.html文件,引入css样式,记住这里要放上你的链接地址 5接下来我们就可以在任何组件地方使用我们的图标了,我这里就是用上面生成的三个图标其中的一个. 2但是考虑网络及用户体验 阿里iconfont下载本地使用 1 阿里iconfont图标直接下载到本地 2 在assets文件下创建iconfont文件夹
-
Vue中引入第三方JS库的四种方式
目录 一.绝对路径直接引入,全局可用 二.绝对路径直接引入,配置后,import 引入后再使用 三.webpack中配置 alias,import 引入后再使用 四.webpack 中配置 plugins,无需 import 全局可用 结论 我们以 jQuery 为例,来讲解 一.绝对路径直接引入,全局可用 主入口页面 index.html 中用 script 标签引入: <script src="./static/jquery-1.12.4.js"></script
-
Clion(CMake工具)中引入第三方库的详细方法
前言 因为自己最近在学Redis,想要在C++中获取到Redis内存数据库中的数据,需要使用Redis客户端来连接Redis传输命令并接收数据,在Redis官方网站上推荐的客户端中选择了acl-redis.而Clion是一款非常优秀的C++集成开发环境,Clion选择了CMake作为构建工具,所以需要在CMake配置文件中进行配置. 如何配置 CMake的所有配置都写在一个叫CMakeLists.txt的文件当中,所有的配置都写在该文件当中. 这是我的工程目录结构,Include文件夹为acl-
-
在vue中读取本地Json文件的方法
其实关于这个问题,网上已经可以找到些方法,不过基本上没有完整的,或者是其中有些坑,下面写一下自己的亲身实践. 使用vue读取本地json文件需要安装vue-resource插件,然后使用它的$http.get来读取json文件. json文件应该是必须放在static目录下 然后使用npm install 命令安装vue-resource,太慢的话就使用淘宝镜像安装,安装完成后先引用这个组件. 在main.js文件中添加: import VueResource from 'vue-resourc
-
python中解析json格式文件的方法示例
前言 JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式.它基于JavaScript(Standard ECMA-262 3rd Edition - December 1999)的一个子集. JSON采用完全独立于语言的文本格式,但是也使用了类似于C语言家族的习惯(包括C, C++, C#, Java, JavaScript, Perl, Python等).这些特性使JSON成为理想的数据交换语言.易于人阅读和编写,同时也易于机器解析和生成. 本文主要介
-
vue中添加mp3音频文件的方法
有的时候我们需要在vue中添加音频文件,但是直接将音频文件放置了assets目录下的时候,会发现并不能正常播放,下面是两种常用的配置方法: 方法一.将音频文件放置在static目录中,然后进行调用,如下所示 <audio class="success" src="/static/audios/do_wrong.mp3"> </audio> 以上这种方式就能够解决这个问题了. 方法二.给项目配置mp3格式的解析器 1.在webpack.base
-
C++从一个文件夹中读出所有txt文件的方法示例
前言 前段时间做项目需要读取一个文件夹里面所有的txt文件,查询资料后得到以下实现方法: 首先了解一下这个结构体 struct _finddata_t { unsigned attrib; time_t time_create; time_t time_access; time_t time_write; _fsize_t size; char name[260]; }; 其中各成员变量的含义如下: unsigned atrrib: 文件属性的存储位置.它存储一个unsigned单元,用于表示文
随机推荐
- Jekyll静态网站后台引擎使用教程
- 最全的常用正则表达式大全
- 冒泡排序算法原理及JAVA实现代码
- JavaScript.Encode手动解码技巧
- 移动端效果之Swiper详解
- 如何用phpmyadmin设置mysql数据库用户的权限
- mysql 5.7.17 安装配置方法图文教程(ubuntu 16.04)
- mysql获得60天前unix时间思路及代码
- 极验验证码 安装部署详细介绍
- 详解字典树Trie结构及其Python代码实现
- 用<TABLE>语句来实现圆角表格可以省去制作圆角图片之苦!
- 写的不错批处理教程一
- MSSQL段落还原脚本,SQLSERVER段落脚本
- MYSQL中 TYPE=MyISAM 错误的解决方法
- 21条MySQL优化建议(经验总结)
- EasyUI中combobox默认值注意事项
- JQuery浮动DIV提示信息并自动隐藏的代码
- jQuery设置单选按钮radio选中/不可用的实例代码
- 简单介绍JavaScript中字符串创建的基本方法
- JavaScript DOM 学习第二章 编辑文本