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库.当项目变得复杂庞大,通常会将代码进行模块化拆分.可能还需要跑在不同的环境下,比如 ...
随机推荐
- 练习:javascript轮播图效果
javascript轮播自动播放切换滑过停止,上一页/下一页 <!DOCTYPE html> <html lang="en"> <head> & ...
- luogu P5294 [HNOI2019]序列
传送门 这个什么鬼证明直接看uoj的题解吧根本不会证明 首先方案一定是若干段等值的\(B\),然后对于一段,\(B\)的值应该是\(A\)的平均值.这个最优方案是可以线性构造的,也就是维护以区间平均值 ...
- 查看和设置MySQL数据库字符集(转)
查看和设置MySQL数据库字符集作者:scorpio 2008-01-21 10:05:17 标签: 杂谈 Liunx下修改MySQL字符集:1.查找MySQL的cnf文件的位置find / -ina ...
- eclipse下classes文件夹无法发布到tomcat的问题--tomcat发布慢的问题
=== 解决eclipse下classes文件夹无法发布到tomcat的问题_Nautilus_新浪博客http://blog.sina.com.cn/s/blog_484d8777010130n5. ...
- Faster RCNN 学习笔记
下面的介绍都是基于VGG16 的Faster RCNN网络,各网络的差异在于Conv layers层提取特征时有细微差异,至于后续的RPN层.Pooling层及全连接的分类和目标定位基本相同. 一). ...
- 第四节,目标检测---YOLO系列
1.R-CNN回顾 适应全卷积化CNN结构,提出全卷积化设计 共享ResNet的所有卷积层 引入变换敏感性(Translation variance) 位置敏感分值图(Position-sensiti ...
- python 读写文件中 w与wt ; r与rt 的区别
w,r,wt,rt都是python里面文件操作的模式.w是写模式,r是读模式.t是windows平台特有的所谓text mode(文本模式),区别在于会自动识别windows平台的换行符.类Unix平 ...
- Linux 虚拟机上安装linux系统 (ip:子网掩码,网关,dns,交换机,路由知识回顾)
一 安装虚拟机 二 虚拟机上配置好在安装linux系统 三 知识回顾 交换机:主机在局域网内的身份是MAC地址(可以通过[交换机广播:交换机通过被动学习来建立一张“接口号”和“MAC地址”的对照表]或 ...
- lnmp.org 安装环境的,root权限都没法删除网站文件夹,问题解决-转
rm -rf删除网站目录时出现rm: cannot remove `.user.ini': Operation not permitted rm -rf删除网站目录时出现rm: cannot remo ...
- 最短路-spfa
关于spfa它已经死了 #include<bits/stdc++.h> using namespace std; const int maxn = 1e5+5,maxm = 1e6+5,i ...