vue添加LCD字体(液晶字体)数字美化,前端如何引用LCD字体液晶字体,如何转换?@font-face 如何使用?

文章目录

    • 一、效果
    • 二、下载字体格式【[https://www.dafont.com/theme.php?cat=302&text=0123456789](https://www.dafont.com/theme.php?cat=302&text=0123456789)】
    • 三、下载后,解压后都是.ttf文件,在【[https://www.fontsquirrel.com/tools/webfont-generator](https://www.fontsquirrel.com/tools/webfont-generator)】可将字体文件转换成woff2,svg,woff格式等,将下载后的文件解压至项目文件夹中。
    • 四、到项目中可上图中生成的代码复制进去

参考文章:
vue添加LCD字体(液晶字体)数字美化
前端如何引用LCD字体液晶字体,如何转换?@font-face 如何使用?

一、效果

在这里插入图片描述

二、下载字体格式【https://www.dafont.com/theme.php?cat=302&text=0123456789】

在这里插入图片描述

三、下载后,解压后都是.ttf文件,在【https://www.fontsquirrel.com/tools/webfont-generator】可将字体文件转换成woff2,svg,woff格式等,将下载后的文件解压至项目文件夹中。

转换为下载的时候建议不要使用迅雷,我用迅雷下载不知道为什么始终是0kb,用浏览器本身下载是可以的

在这里插入图片描述

四、到项目中可上图中生成的代码复制进去

注意:需要更改文件路径,以下为我的项目代码:

/* 定义 */
@font-face {font-family: "digital-7";src: url("../../assets/fonts/digital-7.woff2") format("woff2"),url("../../assets/fonts/digital-7.woff") format("woff"),url("../../assets/fonts/digital-7.ttf") format("truetype"),url("../../assets/fonts/digital-7.eot") format("embedded-opentype"),url("../../assets/fonts/digital-7.svg") format("svg");
}
//使用
.number {display: inline-block;color: #d1c519;font-size: 20px;font-family: "digital-7";}

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

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

相关文章

【大数据学习 | Spark】关于distinct算子

只有shuffle类的算子能够修改分区数量,这些算子不仅仅存在自己的功能,比如分组算子groupBy,它的功能是分组但是却可以修改分区。 而这里我们要讲的distinct算子也是一个shuffle类的算子。即可以修改分区。 scala> val arr Array(1,1,2,…

Qt桌面应用开发 第五天(常用控件 自定义控件)

目录 1.QPushButton和ToolButton 1.1QPushButton 1.2ToolButton 2.RadioButton和CheckBox 2.1RadioButton单选按钮 2.2CheckBox多选按钮 3.ListWidget 4.TreeWidget控件 5.TableWidget控件 6.Containers控件 6.1QScrollArea 6.2QToolBox 6.3QTabWidget 6.4QStacke…

Excel - VLOOKUP函数将指定列替换为字典值

背景:在根据各种复杂的口径导出报表数据时,因为关联的表较多、数据量较大,一行数据往往会存在三个以上的字典数据。 为了保证导出数据的效率,博主选择了导出字典code值后,在Excel中处理匹配字典值。在查询百度之后&am…

ctfshow-web入门-SSRF(web351-web360)

目录 1、web351 2、web352 3、web353 4、web354 5、web355 6、web356 7、web357 8、web358 9、web359 10、web360 1、web351 看到 curl_exec 函数,很典型的 SSRF 尝试使用 file 协议读文件: urlfile:///etc/passwd 成功读取到 /etc/passwd 同…

【vmware+ubuntu16.04】ROS学习_博物馆仿真克隆ROS-Academy-for-Beginners软件包处理依赖报错问题

首先安装git 进入终端,输入sudo apt-get install git 安装后,创建一个工作空间名为tutorial_ws, 输入 mkdir tutorial_ws#创建工作空间 cd tutorial_ws#进入 mkdir src cd src git clone https://github.com/DroidAITech/ROS-Academy-for-Be…

AI数字人视频小程序:引领未来互动新潮流

当下,随着人工智能技术的不断创新发展,各类AI系统已经成为了创新市场发展的重要力量,AI文案、AI数字人、AI视频等,为大众带来更加便捷的创作方式,AI成为了一个全新的风口,各种AI红利持续释放,市…

leetcode400第N位数字

代码 class Solution {public int findNthDigit(int n) {int base 1;//位数int weight 9;//权重while(n>(long)base*weight){//300n-base*weight;base;weight*10;}//n111 base3 weight900;n--;int res (int)Math.pow(10,base-1)n/base;int index n%base;return String…

MySQL扩展varchar字段长度能否Online DDL

目录 问题场景 Online DDL 简介 场景复现 DBdoctor快速识别 Online DDL 总结 问题场景 在MySQL数据库中,DDL变更可以通过两种算法实现:Copy算法和In-Place算法。Copy算法会复制整个表,这可能导致长时间的写入阻塞,从而严重影…

【WPF】Prism学习(九)

Prism Dependency Injection 1.Container Locator 1.1. Container Locator的引入: Container Locator是在Prism 8.0版本中新引入的一个特性。它的目的是为了帮助Prism框架摆脱对CommonServiceLocator的依赖,并解决一些必须回退到ServiceLocator模式的内…

.NET 9与C# 13革新:新数据类型与语法糖深度解析

记录(Record)类型 使用方式: public record Person(string FirstName, string LastName); 适用场景:当需要创建不可变的数据结构,且希望自动生成 GetHashCode 和 Equals 方法时。不适用场景:当数据结构需…

3C产品说明书电子化转变:用户体验、环保与商业机遇的共赢

在科技日新月异的当代社会,3C产品(涵盖计算机类、通信类和消费类电子产品)已成为我们日常生活中不可或缺的重要元素。与此同时,这些产品的配套说明书也经历了一场从纸质到电子化的深刻变革。这一转变不仅体现了技术的飞速进步&…

GIT 入门详解指南

前言: 注:本博客仅用于记录本人学习过程中对git的理解,仅供学习参考,如有异议请自行查资料求证 安装 使用git之前必须完成git的安装,Git 目前支持 Linux/Unix、Solaris、Mac和 Windows 平台上运行 git 安装教程 基本…

【数据结构】用四个例子来理解动态规划算法

1. 动态规划 动态规划(Dynamic Programming, DP)是一种通过将复杂问题分解为更小的子问题来求解的算法设计思想,一般用于求解具有最优子结构和重叠子问题性质的问题。动态规划的核心在于:(1)最优子结构--问…

前端两大利器:Vue与TypeScript的渊源

Vue 在前端领域占据着重要地位,是最受欢迎的前端框架之一。它被广泛应用于各种类型的 Web 应用开发,从简单的小型项目,如个人博客、公司宣传网站等,到复杂的大型企业级应用,如电商平台、金融系统等。例如,许…

【Python】使用Windows任务计划程序定时运行Python脚本!

在搭建了一个python 文件以后,如果我们想每天一次或者多次运行这个文件,或者想要一天运行多个python 文件,推荐可以使用: Win的【任务计划程序】 创建【批处理文件(.bat)】运行Python脚本。 我们可以在Wind…

分布式数据库中间件可以用在哪些场景呢

在数字化转型的浪潮中,企业面临着海量数据的存储、管理和分析挑战。华为云分布式数据库中间件(DDM)作为一款高效的数据管理解决方案,致力于帮助企业在多个场景中实现数据的高效管理和应用,提升业务效率和用户体验。九河…

Photino:通过.NET Core构建跨平台桌面应用程序,.net国产系统

一、Photino.NET简介: 最近发现了一个不错的框架 Photino.Net 一份代码运行,三个平台 windows max linux ,其中windows10,windows11,ubuntu 18.04,ubuntu 20.04 已测试均可以。mac 因为没有相关电脑没有测试。 github:https://github.com/t…

NAT网络地址转换——Easy IP

NAT网络地址转换 Tip: EasylP没有地址池的概念,使用接口地址作为NAT转换的公有地址。EasylP适用于不具备固定公网IP地址的场景:如通过DHCP, PPPOE拨号获取地址的私有网络出口,可以直接使用获取到的动态地址进行转换。 本次实验模拟nat协议配置 AR1配置如下&…

Redis五大基本类型——List列表命令详解(命令用法详解+思维导图详解)

目录 一、List列表类型介绍 二、常见命令 1、LPUSH 2、LPUSHX 3、RPUSH 4、RPUSHX 5、LRANGE 6、LPOP 7、RPOP 8、LREM 9、LSET 10、LINDEX 11、LINSERT 12、LLEN 13、阻塞版本命令 BLPOP BRPOP 三、命令小结 相关内容: Redis五大基本类型——Ha…

单细胞转录组学在植物系统和合成生物学中的应用进展-文献精读83

Advances in the Application of Single-Cell Transcriptomics in Plant Systems and Synthetic Biology 单细胞转录组学在植物系统和合成生物学中的应用进展 最佳实践:教程-文献精读80 摘要 植物是由多种细胞类型组成的复杂系统,其结构呈现出分层的组…