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 引入字体库的更多相关文章

  1. VUE引入字体图标库

    1. 下载阿里图标 2. 解压文件,并复制文件到VUE项目内 3. 找到添加的字体图标的.css文件,将.iconfont改成[class^="iconfont"], [class ...

  2. vue引入ElementUI库

    element国内网站:https://element.eleme.cn/#/zh-CN 引入ElementUI命令:npm install element-ui --save   (网速不好用cnp ...

  3. 使用ui给定的字体,通过css引入字体库

    @font-face { font-family: 'LCDMonoNormal'; src: url('../../assets/fonts/LCDM2N__.eot'); src: url('.. ...

  4. vue 引入iconfont字体库

    1.登录官网 https://www.iconfont.cn/ 2.选择所需要的图标加入图库 新建项目 选择fontClass 并下载到本地   目录如下 3.项目 assets目录下 新建  ico ...

  5. VUE 引入阿里图标库

    本身项目是VUE, Element-UI项目, 所以内置Element-UI图标库 地址如下, https://element.eleme.cn/#/zh-CN/component/icon 使用时: ...

  6. vue 项目引入字体报错

    vue 项目引入特殊字体,总是提示有问题 原因是,在webpack 里面的配置有问题 在项目文件里面引入字体的时候,应该写url-loader 而不能是url

  7. Vue引入第三方JavaScript库和如何创建自己的Vue插件

    一 第三方JavaScript库 前言 .vue文件 中不解析 script标签引入js文件,只能用 import 引入 有两种用法: 1.import a from '../a' 2.import ...

  8. vue中引入字体图标报错,找不到字体文件

    在用vue + webpack进行开发的时候,在引用字体图标遇到字体无法加载的问题: 报以下错误 搞了好久没搞定,最后才找到解决方法(还是没有找到原因) 修改字体图标的css中引入字体文件的路径 以前 ...

  9. 必备技能六、Vue框架引入JS库的正确姿势

    在Vue.js应用中,可能需要引入Lodash,Moment,Axios,Async等非常好用的JavaScript库.当项目变得复杂庞大,通常会将代码进行模块化拆分.可能还需要跑在不同的环境下,比如 ...

随机推荐

  1. 利用pyinstaller 打包Python文件

    1.下载安装pyinstaller模块 cmd 命令: pip install pyinstaller cmd命令: pip list 查看自己安装的模块 2.建议把要大包的Python文件单独放到新 ...

  2. brew install

    1. 访问  https://brew.sh/ 命令行下运行: /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.co ...

  3. 【原创】大数据基础之Spark(2)Spark on Yarn:container memory allocation容器内存分配

    spark 2.1.1 最近spark任务(spark on yarn)有一个报错 Diagnostics: Container [pid=5901,containerID=container_154 ...

  4. 洛谷P5206 [WC2019]数树 [容斥,DP,生成函数,NTT]

    传送门 Orz神仙题,让我长了许多见识. 长式子警告 思路 y=1 由于y=1时会导致后面一些式子未定义,先抓出来. printf("%lld",opt==0?1:(opt==1? ...

  5. Java_Scanner和System类

    目录 Scanner类(util包) System类(lang包) Scanner类(util包) Scanner类是一个不可变的类,实现了迭代器接口.一个简单的文本扫描器,可以使用正则表达式解析原始 ...

  6. ffmpeg学习目录收集

    ffmpeg工具参数中文详细解释 雷霄骅 - [总结]FFMPEG视音频编解码零基础学习方法

  7. SQL insert

    INSERT INTO 插入语句 INSERT INTO语句用于在表中插入新记录. 可以用两种方式编写INSERT INTO语句. 第一种方法指定列名和要插入的值: 1 2 INSERT INTO t ...

  8. 华为交换机批量加入 Vlan 方法

    华为交换机单独加入vlan太麻烦,思科有批量加入vlan的方法,华为也有.要求 1~6口划分到vlan2,6~12口划分到vlan3,13~18口划分到vlan4,19~24口划分到vlan5.25, ...

  9. 4337: BJOI2015 树的同构

    题解: 树的同构的判定 有根树从根开始进行树hash 先把儿子的f进行排序 $f[i]=\sum_{j=1}^{k} { f[j]*prime[j]} +num[i]$(我没有仔细想这样是不是树是唯一 ...

  10. Linux 内存释放命令非常不错具有参考借鉴价值

    这篇文章主要介绍了Linux 内存释放命令的相关资料,非常不错具有参考借鉴价值,需要的朋友可以参考下(http://www.120xcjl.com) 我使用的是CentOS 6.5 ,由于卸载Solr ...