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. main 及Scanner

    通过main方法的args数组可以从控制台获取一组字符串数据. 1.Scanner类用于扫描从控制台输入的数据,可以接收字符串和基本数据类型的数据. 2.Scanner类位于java.util.Sca ...

  2. mac office2016

  3. Python-爬虫-Beautifulsoup解析

    简介 Beautiful Soup 是一个可以从HTML或XML文件中提取数据的Python库.它能够通过你喜欢的转换器实现惯用的文档导航,查找,修改文档的方式.Beautiful Soup会帮你节省 ...

  4. unity读取txt,并且生成vector3的数组

    读取txt的脚本: public void ReadFileTX(){ var str = File.ReadAllText(Application.streamingAssetsPath + &qu ...

  5. springboot配置文件priperties大全

    flyway.baseline-description 执行基线时标记已有Schema的描述. flyway.baseline-on-migrate 在没有元数据表的情况下,针对非空Schema执行迁 ...

  6. 基于BootStrap的initupload()实现Excel上传和获取excel中的数据

    简单说明:后边要做exl解析(还没做呢),所以先有一个excel的的上传以及获取excel中的数据,展示出来. 代码: //html代码 <div class="btn-group&q ...

  7. SSM(SpringMVC Spring Mybatis)框架整合搭建

    1.新建一个web工程. 2.首先看一下整体的框架结构: 3.将ssm框架搭建所需要的jar包复制到lib目录下 3.需要配置各个配置文件. 1)配置web.xml文件: <?xml versi ...

  8. bzoj 2028(会场预约)

    题目描述 PP大厦有一间空的礼堂,可以为企业或者单位提供会议场地. 这些会议中的大多数都需要连续几天的时间(个别的可能只需要一天),不过场地只有一个,所以不同的会议的时间申请不能够冲突.也就是说,前一 ...

  9. python数据类型小测试

    # 1. 有两个列表,其中一个列表a,每一项映射到另一个列表b每一项,先对a排序,要求b的中映射关系位置保持不变,给b也按照排序, (b的8对应a的[1,2], 7对应[3,4] ... ) a = ...

  10. 小程序 -- ui布局

    Flex布局 相对定位和绝对定位 弹性盒模型 display flex-direction flex-wrap  :nowrap(不换行)/ wrap(换行,第一行在上方)/ wrap-reverse ...