vue使用外部字体自定义LCD字体(晶管体)

news2024/11/24 17:50:31

大屏监控中常用到液晶字体效果,如下图所示: 

 

一、下载字体格式

  1、下载地址【Techno > LCD fonts | dafont.com】

二、解压字体

1、下载后,解压后都是.ttf文件,在Font Squirrel (这个地址打开,直接可以转换字体)可将字体文件转换成woff2,svg,woff格式等,将下载后的文件解压至项目文件夹中直接使用。点击最上面的upload fonts 上传刚刚下载好(自己所需的那个)的TTF文件,滑倒下方 点击我同意,然后开始下载。
2、打开fontsquirrel如图:

转换字体的步骤:
--->点击“UPLOAD FONTS”按钮上传文件
--->选择要转换的类型
--->点击“ Yes, the fonts I'm uploading are legally eligible for web embedding.”,出现下载按钮
--->点击“download your kit”,即可将转换后得到的字体下载下来。
如下图:

3、当然,选择最右边的自定义配置,是更详细的设置,为了尽可能多的兼容各个浏览器,按照以下选择:如下:

4、点击最上面的upload fonts 上传刚刚下载好(自己所需的那个)的TTF文件,滑倒下方 点击我同意,然后开始下载。
5、解压压缩包得到如下文件:

6、将此文件夹(整个文件夹)放入到对应的项目中的静态资源存放位置如 assets/font 文件夹下。

7、在需要此字体的页面中的stylesheet.css中写入如下代码:

.lcd-font {
    font-family: 'seven_segmentregular';
}

 

 8、在main.js中引入这个css文件

import '@/assets/font/seven_segmentregular/stylesheet.css';

9、到此准备工作就完成了代码中具体怎么用:(font-size,color,font-weight等都是可以正常使用的,只是字体增加了一种,当然字体名你可以在步骤7中自己起名字)

  <div>实时时间显示</div>
  <div class="lcd-font" style="color: #337ecc;">{{ nowTime }}</div>

 

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

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

相关文章

Multi-headed Self-attention(多头自注意力)机制介绍

对于输入的序列 来说&#xff0c;与RNN/LSTM的处理过程不同&#xff0c;Self-attention机制能够并行对进行计算&#xff0c;这大大提高了对特征进行提取&#xff08;即获得&#xff09;的速度。结合上述Self-attention的计算过程&#xff0c;并行计算的原理如下图所示&#xff…

储存卡格式化,分享3个正确方法!

Dam是个摄影师&#xff0c;经常使用储存卡存储各种照片、视频。正好他明天又要出外景&#xff0c;但害怕内存不够&#xff0c;想把储存卡格式化&#xff0c;又担心自己操作失误。因此求助如何正确格式化储存卡。 储存卡为我们存储文件等带来了诸多便利。有时候&#xff0c;我们…

无人机上仅使用CPU实时运行Yolov5(OpenVINO实现)(下篇)

​上期中我们讲了Yolov5的前两节环境配置及简单运行&#xff0c;在本期中我们带来后面两节在不同处理器下的实验数据及如何训练自己的模型。​ 三、在不同处理器上的延迟与效果 为了查看Yolov5在不同设备上的延迟与效果&#xff0c;下面我们对Inter的i3、i5、i7三种处理器在同…

「深度学习之优化算法」笔记(三)之粒子群算法

1. 粒子群算法简介 粒子群算法&#xff08;Particle Swarm Optimization,PSO&#xff09;是一种模仿鸟群、鱼群觅食行为发展起来的一种进化算法。其概念简单易于编程实现且运行效率高、参数相对较少&#xff0c;应用非常广泛。粒子群算法于1995年提出&#xff0c;距今&#xff…

新世界-旧世界

以下内容是这两天朋友问答形成的一些观点&#xff0c;堆成一篇文章。看似没有关联性&#xff0c;但你仔细品味&#xff0c;你会感觉到它们其实讲的是一个事。至于是一个啥事&#xff0c;我不说&#xff0c;你们自己猜。 &#xff08;1&#xff09; 今年年初看见篇文章&#xff…

前端vue仿京东天猫简单好用的瀑布流瀑布流式布局列表组件waterfall

前端vue仿京东天猫简单好用的瀑布流瀑布流式布局列表组件waterfall&#xff0c; 下载完整代码请访问uni-app插件市场址:https://ext.dcloud.net.cn/plugin?id13046 效果图如下&#xff1a; #### 使用方法 使用方法 <!-- proList: 条目数组数据 goProDetail:条目点击事…

vue路由的两种模式 hash与history

文章目录 vue路由是什么&#xff1f;Hash 模式Hash具体的原理如下&#xff1a;Hash 模式的好处缺点 History 模式实现 History 模式的原理如下&#xff1a;History 模式的好处缺点 vue路由是什么&#xff1f; Vue 路由是 Vue.js 框架提供的一种机制&#xff0c;用于实现单页面…

驱动开发:内核解锁与强删文件

在某些时候我们的系统中会出现一些无法被正常删除的文件&#xff0c;如果想要强制删除则需要在驱动层面对其进行解锁后才可删掉&#xff0c;而所谓的解锁其实就是释放掉文件描述符&#xff08;句柄表&#xff09;占用&#xff0c;文件解锁的核心原理是通过调用ObSetHandleAttri…

【科学文献计量】关于使用metaknowledge读取文献后转化字典结构报错PD问题的解决方式

关于使用metaknowledge读取文献后转化字典结构报错PD问题的解决方式 1 问题说明2 问题探索3 问题解决4 数据核实1 问题说明 在进行文献下载完毕后,使用metaknowledge读入文献时候是正常的,但是要通过RC.makeDict()方法转化为字典结构,却发生了PD报错问题(KeyError: PD),如…

基于SpringBoot+vue的在线考试系统设计和实现

博主介绍&#xff1a; 大家好&#xff0c;我是一名在Java圈混迹十余年的程序员&#xff0c;精通Java编程语言&#xff0c;同时也熟练掌握微信小程序、Python和Android等技术&#xff0c;能够为大家提供全方位的技术支持和交流。 我擅长在JavaWeb、SSH、SSM、SpringBoot等框架下…

阿里云新人专享是什么意思?是新注册用户还是新用户或者老用户?

阿里云2023年促销活动中云服务器购买条件大多都指定为新人专享&#xff0c;有的用户购买提示“不满足购买条件”&#xff0c;有的虽然能买&#xff0c;但是点击购买之后的价格却跟活动显示价格有很大的出入&#xff0c;活动中的云服务器会提示“新人专享”&#xff0c;那么什么…

Python爬取城市天气数据,并作数据可视化

1.爬取广惠河深2022-2024年的天气数据 import requests # 发送请求要用的模块 需要额外安装的 import parsel import csvf open(广-惠-河-深天气.csv, modea, encodingutf-8, newline) csv_writer csv.writer(f) csv_writer.writerow([日期, 最高温度, 最低温度, 天气,…

EEPROM 磨损管理算法

这里写目录标题 前言需求结构局限性代码示例 前言 …最近工作上有用到EEPROM&#xff0c;在我的应用中需要一分钟一次的擦写频率&#xff0c;按照设备一天工作16h&#xff0c;十年的设备设计寿命来计算&#xff0c;大概要擦写300万次。超出了一般的EEPROM擦写循环次数100万。 …

【前端 - CSS】第 17 课 - CSS 特性

欢迎来到博主 Apeiron 的博客&#xff0c;祝您旅程愉快 &#xff01; 时止则止&#xff0c;时行则行。动静不失其时&#xff0c;其道光明。 目录 1、缘起 2、CSS 三大特性 2.1、继承性 2.2、层叠性 2.3、优先级 3、总结 1、缘起 CSS 是一种用于样式化网页的语言&#xf…

无代码开发smardaten与Power Platform详细对比

文章目录 前言&#xff1a;亟待转型的软开创业者什么是低/无代码居高不下的企业级软件搭建成本1. 开发周期较长2. 在需求明确、软件修改、系统集成等方面存在多种卡点3. 数据管理混乱 无代码/低代码开发&#xff0c;时代的潮流无代码平台 smardaten1. smardaten 简介2. smardat…

一起看 I/O | 将 Kotlin 引入 Web

作者 / 产品经理 Vivek Sekhar 我们将在本文为您介绍 JetBrains 和 Google 的早期实验性工作。您可以观看今年 Google I/O 大会中的 WebAssembly 相关演讲&#xff0c;了解更多详情: https://youtu.be/RcHER-3gFXI?t604 应用开发者想要尽可能地在更多平台上最大限度地吸引用户…

高阶智驾进入「普及」周期,这四家车企包揽年度方案创新奖

特斯拉、理想等新能源汽车头部企业推动的NOA高阶智能驾驶上车潮&#xff0c;正在席卷整个汽车行业。包括吉利、广汽、长安、红旗等头部自主品牌也在加速推进&#xff0c;同时&#xff0c;在NOA、电子电气架构、数据闭环平台等方面&#xff0c;实现科技平权。 6月8-9日&#xff…

三菱FX3U中级课程-模拟量与PID

可别小看FX3U&#xff0c;它的功能比西门子200smart要强大&#xff0c;对于使用三菱PLC的设备&#xff0c;很多小型设备都可以用FX3U来做。 ​​ 三菱FX3U模拟量与PID 课程章节 第一节课 必须知道的模拟量理论知识 - 大白话讲解00:50:33 第二节课 通过测量空压机的压力才学习…

不确定 A Survey of Uncertainty in Deep Neural Networks(乱记)

随着深度学习技术的不断发展&#xff0c;DNN模型的预测能力变得越来越强&#xff0c;然而在一些情况下这却并不是我们想要的&#xff0c;比如说给模型一个与训练集完全不相关的测试样本&#xff0c;我们希望模型能够承认自己的“无知”&#xff0c;而不是强行给出一个预测结果&…

【深度学习】1 感知机(人工神经元)

认识感知机 感知机接收多个输入信号&#xff0c;输出一个信号 感知机的信号只有“流/不流”(1/0)两种取值 0对应“不传递信号”&#xff0c;1对应“传递信号”。 输入信号被送往神经元时&#xff0c;会被分别乘以固定的权重。神经元会计算传送过来的信号的综合&#xff0c;只有…