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库.当项目变得复杂庞大,通常会将代码进行模块化拆分.可能还需要跑在不同的环境下,比如 ...
随机推荐
- CentOS7离线安装MySQL
1.删除原有的mariadb,不然mysql装不进去 mariadb-libs-5.5.52-1.el7.x86_64 rpm -qa|grep mariadb rpm -e --nodeps mar ...
- android TabLayout设置选中标签字体加粗功能
实现 TabLayout 选中tab标签字体加粗功能如下: xml文件中定义: <android.support.design.widget.TabLayout android:id=" ...
- Prisma GraphQL 服务器 生产者 "https://www.prisma.io"
Prisma 一个 GraphQL 服务器 生产者 "https://www.prisma.io" , 关注一下
- shell脚本的小记
作者:邓聪聪 mysql的脚本执行 #!/bin/sh HOST="127.0.0.1" PORT=" UESRNAME="root" PASSWOR ...
- hadoop的master和slave模式
hadoop的集群是基于master/slave模式. namenode和jobtracker属于master,datanode和tasktracker属于slave,master只有一个,而slav ...
- 关于 layer.mask = label.layer 出现空白情况
源代码如下: self.numLabel = [[UILabel alloc]initWithFrame:CGRectMake(0, 0, self.view.frame.size.width/3, ...
- Django—入门
索引 1.搭建环境 2.创建项目 3.设计模型 4.管理站点 5.视图及URL 6.模板 软件框架 问题1:什么是软件框架? 举个简单的例子,对于一个公司来说,公司中有各个职能部门,每个部门各司其职, ...
- 一 .isinstance(obj,cls)和issubclass(sub,super)
class Foo: pass class Bar(Foo): pass obj = Bar() isinstance(obj,cls)检查是否obj是否是类 cls 的对象 print(isinst ...
- 如何在element-ui table 取到对应的ID的最后一个对象
来回切换3个状态值如何得到对应ID的最后一个对象 var is_push = () => { for (var i = 0; i < this.form.FaultDevices.leng ...
- 解决 RecyclerView 在Android Studio已经导入情况下还无法实例引用问题
系统:Windows 10 IDE::android studio 1. 问题:RecyclerView 在Android Studio已经导入情况下还无法实例引用问题 由于RecyclerView是 ...