Vue3 中引入液晶数字字体(通常用于大屏设计)

一、下载 .ttf 字体文件到本地,放在 src 中的 assets 文件下

下载液晶字体 DS-Digital.ttf

在这里插入图片描述

二、在 css 文件中引入字体

/*  src/assets/fonts/dsfont.css   */
@font-face {font-family: 'electronicFont';src: url(./DS-Digital.ttf);font-weight: normal;font-style: normal;
}

三、main.js 中引入

// 导入字体文件
import '@/assets/fonts/dsfont.css'

三、使用新字体

<div class="time"> {{currentTime}} </div>
.time {color: "#ccc";display: inline;font-family: "led regular";font-size: 2.3vh;
}

四、效果图

在这里插入图片描述



‼️注意:本项目使用的是 vue-cli 搭建的基础框架,webpack.base.conf.js 配置文件中已经配置好了,直接如上步骤使用即可,若是其他框架则需要检查一下 webpack.base.conf.js 配置文件中以下配置是否包括 ttf 格式。

      {test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,loader: 'url-loader',options: {limit: 10000,name: utils.assetsPath('fonts/[name].[hash:7].[ext]')}},

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/49440.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Mybatis 建立依赖失败:报错Dependency ‘mysql:mysql-connector-java:8.0.28‘ not found

Mybatis 建立依赖失败&#xff1a;报错Dependency ‘mysql:mysql-connector-java:8.0.28’ not found 解决办法&#xff1a; 写完依赖代码&#xff0c;直接重构&#xff0c;下载依赖。 图片: ![Alt](https://img-home.csdnimg.cn/images/20220524100510.png Mac 版本注意Ide…

编写Dockerfile制作Web应用系统nginx镜像,生成镜像nginx:v1.1,并推送其到私有仓库

Docker 镜像是一个特殊的文件系统&#xff0c;除了提供容器运行时所需的程序、库、资源、配置等文件外&#xff0c;还包含了一些为运行时准备的一些配置参数&#xff08;如匿名卷、环境变量、用户等&#xff09;。镜像不包含任何动态数据&#xff0c;其内容在构建之后也不会被改…

深度学习论文: WinCLIP: Zero-/Few-Shot Anomaly Classification and Segmentation

深度学习论文: WinCLIP: Zero-/Few-Shot Anomaly Classification and Segmentation WinCLIP: Zero-/Few-Shot Anomaly Classification and Segmentation PDF: https://arxiv.org/pdf/2303.14814.pdf PyTorch代码: https://github.com/shanglianlm0525/CvPytorch PyTorch代码: h…

软件机器人助力交通运输局数据录入,实现高效管理

随着科技的迅速发展&#xff0c;许多传统的行业正在寻求通过科技创新优化工作流程、提升效率。在这样的大背景下&#xff0c;交通运输部门也开始注重引入科技手段改善工作流程。博为小帮软件机器人正逐步改变着交通运输局的工作方式。 软件机器人&#xff1a;交通管理的利器 博…

Spring事务和事务传播机制(2)

前言&#x1f36d; ❤️❤️❤️SSM专栏更新中&#xff0c;各位大佬觉得写得不错&#xff0c;支持一下&#xff0c;感谢了&#xff01;❤️❤️❤️ Spring Spring MVC MyBatis_冷兮雪的博客-CSDN博客 在Spring框架中&#xff0c;事务管理是一种用于维护数据库操作的一致性和…

分布数据并行计算(单机多卡)训练记录

首先&#xff0c;我们先把我们的pytorch版本提升到2.0.1,这样会防止很多不必要的报错&#xff08;但这样的坏处就是我们没有办法使用nvidia-apex进行加速了&#xff0c;除非等到版本的更新 DistributedSampler 我们使用分布数据采样器来保证我们的每个进程&#xff08;每一块…

3.redis数据结构之List

List-列表类型:L&R 列表类型&#xff1a;有序、可重复 Arraylist和linkedlist的区别 Arraylist是使用数组来存储数据&#xff0c;特点&#xff1a;查询快、增删慢 Linkedlist是使用双向链表存储数据&#xff0c;特点&#xff1a;增删快、查询慢&#xff0c;但是查询链表两端…

设计模式——接口隔离原则

文章目录 基本介绍应用实例应传统方法的问题和使用接口隔离原则改进 基本介绍 客户端不应该依赖它不需要的接口&#xff0c;即一个类对另一个类的依赖应该建立在最小的接口上先看一张图: 类 A 通过接口 Interface1 依赖类 B&#xff0c;类 C 通过接口 Interface1 依赖类 D&…

数据结构,查找算法(二分,分块,哈希)

一、查找算法 1、二分查找:(前提条件: 必须有序的序列) #include <stdio.h> //二分查找 value代表的是被查找的值 int findByHalf(int *p, int n, int value) {int low = 0;//low低int high = n-1;//high高int middle;//用来保存中间位置的下标while(low <= high…

通用vue项目应对定制化时该如何组件化

分析页面-页面组件化 之前写了一个项目&#xff0c;大屏页面是通用页面但是遇到个别用户想要定制化&#xff0c;但是主页如果去做判断显得太过臃肿&#xff0c;后续也无法判断&#xff0c;由于公司不想维护多套代码&#xff0c;于是就考虑抽离成组件&#xff01;直接看代码&…

electron的使用和操作

文章目录 先创建一个基本的electron应用electron生命周期事件单个窗体事件创建窗体时所携带的一些属性 先创建一个基本的electron应用 先安装 npm install --save-dev electron然后在package.json里面创建如下内容 {"name": "my-electron-app","ve…

shell脚本语句(画矩形、三角形、乘法表和小游戏)(#^.^#)

目录 一、语句 一、条件语句 一、以用户为例演示 一、显示当前登录系统的用户信息 二、显示有多少个用户 二、单分支if 一、输入脚本 二、验证结果 三、双分支if 一、输入脚本 二、验证结果 四、多分支if 一、输入脚本 二、验证 二、循环语句 一、shell版本的循环…

vue的图片懒加载

安装&#xff1a; vueuse 插件 npm i vueuse/core 搜索&#xff1a; useIntersectionObserver 方法 import { ref } from vue import { useIntersectionObserver } from vueuse/coreexport default {setup() {const target ref(null)const targetIsVisible ref(false…

c语言关键字_ _align()和_ _packed的使用以及字节对齐原理

c语言中__align()关键字的作用与内存对齐的原理 1、什么是字节对齐 字节对齐(Byte Alignment)是计算机内存中的一种存储优化技术,用于确保数据在内存中的存储位置满足特定的硬件要求,以提高内存访问的效率。在现代计算机体系结构中,许多处理器要求数据以特定的方式对齐,…

k8s集群中service的域名解析、pod的域名解析

前言 在k8s集群中&#xff0c;service和pod都可以通过域名的形式进行相互通信&#xff0c;换句话说&#xff0c;在k8s集群内&#xff0c;通过service和pod的域名&#xff0c;可以直接访问内部应用&#xff0c;不必在通过service ip地址进行通信&#xff0c;一般的&#xff0c;…

空调企业只干空调,卡萨帝却干了业主想不到的事

作者 | 曾响铃 文 | 响铃说 今年入夏以来&#xff0c;随着气温的不断攀升&#xff0c;空调已经成为生活、工作中的“绝对刚需”。由此而来的则是空调产品的销量大增。 但也有不少消费者表示&#xff0c;随着产品功能的越发相似&#xff0c;价格趋同&#xff0c;使空调变得越…

类的加载过程二:Linking

1、验证&#xff08;Verify&#xff09; 目的在于确保Class文件的字节流中包含信息符合当前虚拟机要求&#xff0c;保证被加载类的正确性&#xff0c;不会危害虚拟机自身安全。主要包括四种验证&#xff0c;文件格式验证&#xff0c;元数据验证&#xff0c;字节码验证&#xff…

Postman 如何进行参数化

前言 Postman作为一款接口测试工具&#xff0c;受到了非常多的开发工程师的拥护。 那么做为测试&#xff0c;了解Postman这款工具就成了必要的了。 这篇文章就是为了解决Postman怎么进行参数化的。 全局变量 全局变量是将这个变量设置成整个程序的都可以用&#xff0c;不用去…

装箱和拆箱

1. 概念 装箱 将值类型转换成等价的引用类型 装箱的步骤 拆箱 将一个已装箱的引用类型转换为值类型&#xff0c;拆箱操作需要声明拆箱后转换的类型 拆箱的步骤 1&#xff09;获取已装箱的对象的地址 2&#xff09;将值从堆上的对象中复制到堆栈上的值变量中 2. 总结 装箱和拆箱…

数组指针、函数指针、指针数组、函数 指针数组、指针函数详细总结

1.数组指针概念和应用 首先数组指针应该是一个数组&#xff0c;它的定义如下&#xff1a; 数组指针&#xff0c;指的是数组名的指针&#xff0c;即数组首元素地址的指针。即是指向数组的指针。例&#xff1a;int (*p)[10]; p即为指向数组的指针&#xff0c;又称数组指针。 数…