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. 函数语法:JS获取浏览器窗口大小 获取屏幕,浏览器,网页高度宽度(转载)

    网页可见区域宽:document.body.clientWidth 网页可见区域高:document.body.clientHeight 网页可见区域宽:document.body.offsetWid ...

  2. 如何使用AB PLC仿真软件Studio 5000 Logix Emulate

    前言:在学习PLC编程或程序开发过程中,如果身边没有实体PLC,又想验证程序逻辑,这时,仿真软件是不错的选择.针对AB PLC的仿真软件Studio 5000 Logix Emulate,有的同学说: ...

  3. ado.net 之 oracle 数据库

    ado.net 操作oracle 数据库 跟操作mssql 的原来基本一样.只是使用不同的命名空间而已.下面举几个例子: 一. C#读取oracle数据库的表格 ///ado.net 读取table ...

  4. django/python日志logging 的配置以及处理

    日志在程序开发中是少不了的,通过日志我们可以分析到错误在什么地方,有什么异常.在生产环境下有很大的用处.在java 开发中通常用 log4j,logback 等三方组件.那么在 django中是怎么处 ...

  5. MS SQL Server 查询元数据

    use test -- 查询数据库中所有的表和架构名称select SCHEMA_NAME(schema_id) as table_schema_name, name as table_name fr ...

  6. 【原创】大叔问题定位分享(3)Kafka集群broker进程逐个报错退出

    kafka0.8.1 一 问题现象 生产环境kafka服务器134.135.136分别在10月11号.10月13号挂掉: 134日志 [2014-10-13 16:45:41,902] FATAL [ ...

  7. Flask+Nginx+Supervisor+Gunicorn+HTTPS部署教程(CentOs)

    写在前面 之前的文章中,我们详细讲述了怎样安装 Nginx,Python,Supervisor,Gunicorn,HTTPS.经本人多次测试是完全可以跑通的,那么本篇将介绍怎样将这些组合起来运行一个H ...

  8. ubuntu 16.04系统下解决MySQL 5.7版本的root用户重置密码问题

    最近在ubuntu系统上安装了MySQL,但是安装时没有提示输入root用户密码,在网上找了一天解决方案,试图修改root用户下的登入密码,但是网上的帖子都不凑效,最后终于改成功了,因此记下来以供有同 ...

  9. Emacs Org-mode 1 下载、安装、基本使用

    1.1 总述 Org 是一种帮助我们做笔记.日常事件或者项目计划的快速高效的文本格式系统. Org 有以下特点: Org mode 基于组织结构(outline-mode)对文本进行组织.具有良好的快 ...

  10. jenkins命令行修改时间

    前言:有时jenkins上的时间和系统时间不同步,但是jenkins又在运行状态,不可重启修改 方法:在jenkins界面上,输入命令 system.setProperty('org.apache.c ...