vue 引入字体库
1.先下载字体文件所需的.ttf文件
2.将字体文件引入
自己定义一个文件夹,放入下载好的.ttf文件
先自己定义一个font.css文件,将下载好的字体文件的路径引入
@font-face {
font-family: 'fzcjh';
src: url('../font/fzcjh.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 引入字体库的更多相关文章
- VUE引入字体图标库
1. 下载阿里图标 2. 解压文件,并复制文件到VUE项目内 3. 找到添加的字体图标的.css文件,将.iconfont改成[class^="iconfont"], [class ...
- vue引入ElementUI库
element国内网站:https://element.eleme.cn/#/zh-CN 引入ElementUI命令:npm install element-ui --save (网速不好用cnp ...
- 使用ui给定的字体,通过css引入字体库
@font-face { font-family: 'LCDMonoNormal'; src: url('../../assets/fonts/LCDM2N__.eot'); src: url('.. ...
- vue 引入iconfont字体库
1.登录官网 https://www.iconfont.cn/ 2.选择所需要的图标加入图库 新建项目 选择fontClass 并下载到本地 目录如下 3.项目 assets目录下 新建 ico ...
- VUE 引入阿里图标库
本身项目是VUE, Element-UI项目, 所以内置Element-UI图标库 地址如下, https://element.eleme.cn/#/zh-CN/component/icon 使用时: ...
- vue 项目引入字体报错
vue 项目引入特殊字体,总是提示有问题 原因是,在webpack 里面的配置有问题 在项目文件里面引入字体的时候,应该写url-loader 而不能是url
- Vue引入第三方JavaScript库和如何创建自己的Vue插件
一 第三方JavaScript库 前言 .vue文件 中不解析 script标签引入js文件,只能用 import 引入 有两种用法: 1.import a from '../a' 2.import ...
- vue中引入字体图标报错,找不到字体文件
在用vue + webpack进行开发的时候,在引用字体图标遇到字体无法加载的问题: 报以下错误 搞了好久没搞定,最后才找到解决方法(还是没有找到原因) 修改字体图标的css中引入字体文件的路径 以前 ...
- 必备技能六、Vue框架引入JS库的正确姿势
在Vue.js应用中,可能需要引入Lodash,Moment,Axios,Async等非常好用的JavaScript库.当项目变得复杂庞大,通常会将代码进行模块化拆分.可能还需要跑在不同的环境下,比如 ...
随机推荐
- gzip 压缩
nginx 开启静态 gzip 配合 Vue 构建 在站点配置添加如下代码: location ~* \.(css|js)$ { gzip_static on; } 这是 nginx 的静态 gz ...
- 如果在ie上报错又找不到问题原因该怎么办?
我司项目需要兼容IE浏览器 QQ浏览器 360浏览器,调了几天发现QQ跟360都没问题了然后只剩下一个问题就是IE上报错了!!! 然后去百度找了各种原因 最后发现在IE浏览器这种引入方式无法解析会报 ...
- Oracle 数据文件迁移
背景 这两天做一个oracle数据库迁移,以前都是用exp.imp来走,这次用到了expdp.impdp,的确有些优势,但同时又想起了只是拷贝数据文件迁移的方式,其实这个方式不常用做迁移,更多用在磁盘 ...
- zabbix使用自动发现监控esxi的磁盘存储storage
zabbix使用自动发现监控esxi的磁盘存储storage 在任意一台可以访问vcenter的zabbix-agent服务器上添加exsi的磁盘监控模板即可 创建模板过程: custom.esxi. ...
- mysql收集统计信息
一.手动 执行Analyze table innodb和myisam存储引擎都可以通过执行“Analyze table tablename”来收集表的统计信息,除非执行计划不准确,否则不要轻易执行该 ...
- 初学者如何理解tomcat服务器?
Tomcat介绍:Tomcat服务器是一个免费的开放源代码的Web应用服务器.当配置正确时,Apache为HTML页面服务,而Tomcat实际上运行JSP页面和Servlet.另外,Tomcat和II ...
- svn"database disk image is malformed"错误解决
本文是svn出现类似如下问题的两种解决方案. svn: E200030: database disk image is malformed 一.最简单的方法,复制其它人的.svn/wc.db替换. 二 ...
- 办公用品管理系统VB——库存数量导出EXCEL,SaveEXCEL
办公用品管理系统VB——库存数量导出EXCEL,SaveEXCEL 总体来说,VB的EXCEL导出效率还是蛮低的,就是一个小型化的办公用品管理软件,不再优化了. 时间紧迫,就没有从头到尾的用C#编写, ...
- figlet
figlet https://aotu.io/notes/2016/11/22/figlet/ 教程 npm i figlet --save-dev var figlet = require('fi ...
- 一条很用的MSSQL语句
select *,ActionName= stuff((select ',' + ActionName from Sys_Action_Table where ModuleId = Sys_Modul ...