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. C#压缩解压文件

    using System; using System.Collections.Generic; using System.IO; using System.IO.Compression; using ...

  2. 记事本:CSS

    css更多的是一种用来修饰HTML的语言 CSS的三种引入方式 1.行内样式:一般不会这样写,如果想选择某一个,可以用之后内部样式中更加详细的选中方式 行内的优先级最高 <p style=&qu ...

  3. C++设计模式——解释器模式

    解释器模式 在GOF的<设计模式:可复用面向对象软件的基础>一书中对解释器模式是这样说的:给定一个语言,定义它的文法的一种表示,并定义一个解释器,这个解释器使用该表示来解释语言中的句子.如 ...

  4. [ZJOI2008]树的统计-树链剖分

    #include<bits/stdc++.h> using namespace std; const int maxn = 1e6+5; #define mid ((l+r)>> ...

  5. Python爬虫基础之认识爬虫

    一.前言 爬虫Spider什么的,老早就听别人说过,感觉挺高大上的东西,爬网页,爬链接~~~dos黑屏的数据刷刷刷不断地往上冒,看着就爽,漂亮的校花照片,音乐网站的歌曲,笑话.段子应有尽有,全部都过来 ...

  6. SSH和SSM对比总结

    当下流行的两种企业开发MVC开源框架,是我们Java程序猿必备知识能力.MVC,即模型(model)-视图(view)-控制器(controller)的缩写,一种软件设计典范,用一种业务逻辑.数据.界 ...

  7. docker容器与宿主主机之间拷贝文件

    文章链接:https://blog.csdn.net/libertine1993/article/details/80651552 https://blog.csdn.net/u011596455/a ...

  8. 关于strcpy函数形参类型的解析和指针作为输入型输出型参数的不同

    在C语言中,字符串一直都是热点,关于strcpy函数大家都很熟悉,但是真正了解的很少,一旦用到总会报一大堆莫名其妙错误,今天我就来给大家详细剖析一下strcpy函数. 虽然不能看到strcpy的内部实 ...

  9. JAVA 动态代理原理和实现

    在 Java 中动态代理和代理都很常见,几乎是所有主流框架都用到过的知识.在面试中也是经常被提到的话题,于是便总结了本文. Java动态代理的基本原理为:被代理对象需要实现某个接口(这是前提),代理对 ...

  10. 利用Centos服务器来搭建自己的splash,不再被安装的各种环境繁琐而担忧

    Centos7.5 ----- docker ------- splash               第一步:服务器环境的配置               第二步:dcoker环境的配置       ...