前言： 做大屏 项目需要引入字体做个记录
一、先看看效果 

二、实现
1、下载字体文件

分享一个下载开源字体网站： https://www.dafont.com/theme.php
2、文件放到项目中

可以在src下的assets目录下新建一个font的目录（放在其他目录下一样可以），然后把下载的字体文件放入其中

3、创建css文件， 引入添加font-family

在font目录下创建一个css文件，自己随便取个名字，我用得是font.css:

 4、vue中全局引入字体

在main.js中引入刚才创建的css文件：

 5、在页面中使用字体

这就搞定了

vue中引入字体的更多相关文章

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

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

  2. vue中引入字体文件

    在用vue来写一官网的时候,想引入外部字体文件,毕竟总感觉他自己的字体有点难看,在这里记录下 1.先下载字体文件所需的.ttf文件 我这里想引入的是华文行楷字体 百度后下载了一个3M多的ttf文件 2 ...

  3. vue中引入babel步骤

    vue中引入babel步骤 vue项目中普遍使用es6语法,但有时我们的项目需要兼容低版本浏览器,这时就需要引入babel插件,将es6转成es5. 1.安装babel-polyfill插件 npm ...

  4. vue中引入json数据，不用本地请求

    1.我的项目结构,需要在Daily.vue中引入daily.js中的json数据 2.把json数据放入一个js文件中,用exports导出,vscode的json格式太严格了,很多数据,调了一个多小 ...

  5. vue中引入mintui、vux重构简单的APP项目

    最近在学习vue时也了解到一些常用的UI组件,有用于PC的和用于移动端的.用于PC的有:Element(饿了么).iView等:用于移动端APP的有Vux.Mint UI(饿了么).Vant(有赞团队 ...

  6. vue中引入mui报Uncaught TypeError: 'caller', 'callee', and 'arguments' properties may not be accessed on strict mode functions or the arguments objects for calls to them的错误

    在vue中引入mui的js文件的时候,报如下的错误: 那是因为我们在用webpack打包项目时默认的是严格模式,我们把严格模式去掉就ok了 第一步:npm install babel-plugin-t ...

  7. vue中引入swiper(vue中的滑块组件vue-awesome-swiper)

    第一步安装 npm install vue-awesome-swiper --save 第二部在main.js中引入 import VueAwesomeSwiper from 'vue-awesome ...

  8. Vue中引入bootstrap导致的CSS问题

    最近在进行vue.js+webpack进行模块化开发的时候,遇到一个奇怪的问题. 问题是这样的: 1. 在main.js文件中引入bootstrap的js和css. 2. 自己写了一个Header.v ...

  9. vue中引入js，然后new js里的方法

    阿里云Web播放器Web端使用SDK说明:https://help.aliyun.com/document_detail/51991.html?spm=5176.11065259.1996646101 ...

  10. vue中引入css文件

    两种方式引入css文件,一种是直接在main.js中引入(也可以在其他的.vue文件中的<script></script>标签中),即下面这种写法: import 'eleme ...

随机推荐

  1. JAVA中生成随机数Random VS ThreadLocalRandom性能比较

    前言 大家项目中如果有生成随机数的需求,我想大多都会选择使用Random来实现,它内部使用了CAS来实现. 实际上,JDK1.7之后,提供了另外一个生成随机数的类ThreadLocalRandom,那 ...

  2. 从零入门项目集成Karate和Jacoco，配置测试代码覆盖率

    解决问题 在SpringBoot项目中,如何集成Karate测试框架和Jacoco插件.以及编写了feature测试文件,怎么样配置才能看到被测试接口代码的覆盖率. 演示版本及说明 本次讲解,基于Sp ...

  3. Python如何像awk一样分割字符串

    若你使用过 Shell 中的 awk 工具,会发现用它来分割字符串是非常方便的.特别是多个连续空格会被当做一个处理. [root@localhost ~]# cat demo.txt hello wo ...

  4. 基于Hexo搭建静态博客

    关于静态博客 通常来讲,建立个人博客有2种方式: 第一,直接在第三方博客平台注册博客空间,如:博客园,简书,CSDN等,这种方式建立的博客,所有数据都存放在博客平台. 第二,自建博客系统,这种方式就是 ...

  5. 9、IDEA回退Git版本

    转载自 在工作中有时候会要求我们将以前提交的代码新开一个分支,而把之前提交的分支回退到以前某个版本. 1.通过IDEA查看Git历史记录,复制当前版本号. 2.记录当前版本号后,再复制你要回退的版本号 ...

  6. 基于 VScode 搭建 Qt 运行环境

    插件 C/C++ Qt tools Qt Configure CMake CMake Tools 下载 qt https://download.qt.io/official_releases/onli ...

  7. echarts系列-带图教你调整左右位置x轴样式网格虚线刻度居中双轴Y轴滚动上下移动文字旋转改分割线颜色部分字体改色折注混合，X轴的颜色，X轴字体颜色，调整柱子颜色，调整小图标图例的大小和位置,鼠标hover时候的样式，用纵向阴影

    上面先说注意事项 1.如果使用show hidden控制图表显示隐藏,某些切换效果很奇怪,比如饼图,会从左上角开始放大,很丑,这个时候我们可以设置其宽高来解决问题,给其设置宽高后,切换的奇怪效果即可消 ...

  8. 迁移学习（DIFEX）《Domain-invariant Feature Exploration for Domain Generalization》

    论文信息 论文标题:Domain-invariant Feature Exploration for Domain Generalization论文作者:Wang Lu, Jindong Wang, ...

  9. Quartz.Net 官方教程 Best Practices

    最佳实践 JobDataMap 建议只存储基本数据(含String),避免序列化问题 作业执行期间,JobDetail和Trgger的底层共用一个JobDataMap 实例,因此Trigger的数据会 ...

  10. avue入门

    <html> <head> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min. ...