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

二、实现
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. jsvmp_wencai

    网站 aHR0cDovL3d3dy5pd2VuY2FpLmNvbS91bmlmaWVkd2FwL2hvbWUvaW5kZXg= 直接搜索关键词 下面是要抓取的数据 逆向位置(一个即可) hook到he ...

  2. freeswitch的gateway配置方案

    概述 freeswitch是一款简单好用的VOIP开源软交换平台. 在voip的网络模型中,网关是我们经常会遇到的概念. 在freeswitch中,如何配置gateway,如何使用好gateway的模 ...

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

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

  4. iOS14新特性

    6月23日凌晨,苹果首次在线上举办全球开发者大会WWDC2020.在大会上,苹果对iOS.iPadOS.macOS.watchOS.tvOS进行更新,其中大家最关心的iOS14,主要更新了36个功能. ...

  5. 【Basic Knowledge】Self-Attention Generative Adversarial Networks

    Note   这是一篇将Self-Attention应用到GAN中的paper,Self-Attention模块是卷积模块的补充,能够有助于建模跨图像区域的长范围.多层次依赖关系.文中主要提到4点: ...

  6. 应用容器引擎-Docker

    Docker 是一个开源的应用容器引擎,让开发者可以打包他们的应用以及依赖包到一个可移植的镜像中,然后发布到任何流行的 Linux或Windows操作系统的机器上,也可以实现虚拟化.容器是完全使用沙箱 ...

  7. 下一代编解码技术Ali266在视频超高清领域的应用展望

    超高清与各领域的需求融合和创新正在发生. 2022年是一个体育大年,众多世界级体育赛事通过视频直播.转播等形式给观众带来畅爽的观看体验. 2022年北京冬奥会,实现了奥运会历史上首次赛事全程4K制作播 ...

  8. Unity之Android端权限申请

    Unity之Android端权限申请 Unity之Android端权限申请 前言 开篇废话 Unity版本 正题 前期准备 挂载脚本 打包发布 安装App 查看结果 结尾 唠家常 今日无推荐 Unit ...

  9. python生成自动化测试报告并发送到指定邮箱

    #-*-coding:utf-8 -*- import HTMLTestRunner import unittest import time import sys import os import s ...

  10. springboot 多数据源 实例（sybase、mysql数据库）（上）

    最近项目 需要用到 sybase(sql anywhere).mysql 数据库 两边数据交互 .由于之前对sybase 数据库一点不懂 踩了许多坑 特意记下: 连接 sybase 客户端需要用到 S ...