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

二、实现
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. vue中mixins（混入）的用法

    vue中mixin的使用详解 混入 (mixin) 提供了一种非常灵活的方式,来分发 Vue 组件中的可复用功能.一个混入对象可以包含任意组件选项.当组件使用混入对象时,所有混入对象的选项将被&quo ...

  2. day14-功能实现13

    家居网购项目实现013 以下皆为部分代码,详见 https://github.com/liyuelian/furniture_mall.git 32.功能30-会员不能登录后台管理 32.1需求分析/ ...

  3. [机器学习] Yellowbrick使用笔记6-分类可视化

    分类模型试图在一个离散的空间中预测一个目标,即为一个因变量实例分配一个或多个类别. 代码下载 分类分数可视化工具显示类之间的差异以及一些特定于分类器的可视化评估.我们目前已经实施了以下分类器评估: 分 ...

  4. [Untiy]贪吃蛇大作战（四）——游戏主界面

    游戏主界面: 由于这个场景比较复杂,需要分几个部分实现: 1.游戏背景 首先我们的游戏场景上包括了一个大的背景图片,之外再包围一个红色的区域.中间的区域才是可活动的区域,周围通过碰撞检测盒来检测是否有 ...

  5. python3.10调用邮件SMTP报错: ssl.SSLError: [SSL: SSLV3_ALERT_HANDSHAKE_FAILURE] sslv3 alert handshake failure (_ssl.c:997)解决

    一: python3.10调用邮件SMTP报错: ssl.SSLError: [SSL: SSLV3_ALERT_HANDSHAKE_FAILURE] sslv3 alert handshake fa ...

  6. 最好用的在线图片压缩工具——TinyPNG

    前言 不知道大家在写博客或者工作时有没有这种烦恼呢?想要上传某张图片,但却因为图片文件过大而导致无法上传.这时你可能会去百度搜索关于图片压缩的软件,但往往下载的软件都是那种"垃圾软件&quo ...

  7. Flink1.15仅支持ZooKeeper3.5/3.6

    这是一个验证贴,因为社区文档是错误的. 先说结论 Flink1.15仅支持ZooKeeper3.5/3.6,不再支持3.4.FLINK-25146 Drop support for Zookeeper ...

  8. *已解决 java写的简单验证码Servlet实践

    目的:java写的简单验证码Servlet实践 总结项目中遇到的问题 提供遇到同样问题的一些(菜鸟的)思路 (代码在最后~) 项目参考:https://www.itdaan.com/blog/2018 ...

  9. ‘mongo‘不是内部或外部命令，也不是可运行的程序或批处理文件

    出现问题原因: MongoDB环境变量未配置 解决办法: 1)右击我的电脑-->属性,进入系统属性界面,点击如下图所示位置的[高级系统设置],在弹窗的[系统属性]的[高级]选项卡右下角点击[环境 ...

  10. Github认证

    1.前言 Github关闭了密码认证,现在还有两种认证方式 token ssh 本人一直都在使用idea的可视化界面,进行git的操作,第一次使用bash进行初始化时遇到了身份验证的问题.现在简单总结 ...