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.rhkb.cn/news/102135.html

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

相关文章

Docker关于下载,镜像配置,容器启动,停止,查看等基础操作

系列文章目录 文章目录 系列文章目录前言一、安装Docker并配置镜像加速器二、下载系统镜像&#xff08;Ubuntu、 centos&#xff09;三、基于下载的镜像创建两个容器 &#xff08;容器名一个为自己名字全拼&#xff0c;一个为首名字字母&#xff09;四、容器的启动、 停止及重启…

【中危】Apache Ivy<2.5.2 存在XXE漏洞 (CVE-2022-46751)

漏洞描述 Apache Ivy 是一个管理基于 ANT 项目依赖关系的开源工具&#xff0c;文档类型定义(DTD)是一种文档类型定义语言,它用于定义XML文档中所包含的元素以及元素之间的关系。 Apache Ivy 2.5.2之前版本中&#xff0c;当解析自身配置、Ivy 文件或 Apache Maven 的 POM 文件…

数据结构与算法:通往编程高地的必修课(文末送书)

&#x1f935;‍♂️ 个人主页&#xff1a;艾派森的个人主页 ✍&#x1f3fb;作者简介&#xff1a;Python学习者 &#x1f40b; 希望大家多多支持&#xff0c;我们一起进步&#xff01;&#x1f604; 如果文章对你有帮助的话&#xff0c; 欢迎评论 &#x1f4ac;点赞&#x1f4…

mybatis入门的环境搭建及快速完成CRUD(增删改查)

又是爱代码的一天 一、MyBatis的介绍 ( 1 ) 背景 MyBatis 的背景可以追溯到 2002 年&#xff0c;当时 Clinton Begin 开发了一个名为 iBATIS 的持久化框架。iBATIS 的目标是简化 JDBC 编程&#xff0c;提供一种更直观、易用的方式来处理数据库操作。 在传统的 JDBC 编程中&…

如何再钉钉内跳转自己的网页链接

1.跳转网页转码(工具地址) 原网页:https://www.baidu.com/ 转码后:https%3A%2F%2Fwww.baidu.com%2F 2:地址拼接(官方跳转地址:dingtalk://dingtalkclient/page/link?urlURL&pc_slidetrue) 替换URL: dingtalk://dingtalkclient/page/link?urlhttps%3A%2F%2Fwww.baidu.co…

【Git版本控制工具使用---讲解一】

Git版本控制工具使用 安装设置用户名签名和邮箱Git常用的命令 初始化本地库查看本地状态Git 命令添加暂存区提交本地库查看版本信息修改文件版本穿梭 安装 首先根据自身电脑的配置选择性的安装是32位的还是64位的Git版本控制工具 我这边安装的是64位的 以下是我安装的时候的过…

运维作业7

1、使用mysql:5.6和 owncloud 镜像&#xff0c;构建一个个人网盘。 1&#xff09;拉取mysql5.6和owncloud镜像 2)登录本机ip地址&#xff0c;输入用户名密码 2、安装搭建私有仓库 Harbor 1)安装docker-compose编排工具 2&#xff09;安装harbor [rootserver ~]# tar xf harbor-…

Transformer在医学影像中的应用综述-分类

文章目录 COVID-19 Diagnosis黑盒模型可解释的模型 肿瘤分类黑盒模型可解释模型 视网膜疾病分类小结 总体结构 COVID-19 Diagnosis 黑盒模型 Point-of-Care Transformer(POCFormer)&#xff1a;利用Linformer将自注意的空间和时间复杂度从二次型降低到线性型。POCFormer有200…

数据库结构差异对比工具

简介 前几年写了一个数据库对比工具&#xff0c;但是由于实现方式的原因&#xff0c;数据库支持有限&#xff0c;所以重新设计了一下&#xff0c;便于支持多种数据库&#xff0c;并且更新了UI。 新版地址&#xff1a;https://gitee.com/xgpxg/db-diff 旧版地址&#xff1a;h…

SQL 盲注

问题描述&#xff1a; 解决方案&#xff1a; 通过建立过滤器方法 添加拦截器&#xff1a; web.xml 文件配置拦截器 <filter><filter-name>sqlFilter</filter-name><filter-class>com.fh.filter.SqlFilter</filter-class></filter> pack…

k8s集群生产环境的问题处理

2 k8s上的服务均无法访问 执行命令kubectl get pods -ALL,k8s集群中的服务均是running状态 1 kuboard 网页无法访问 kuboard无法通过浏览器访问&#xff0c;但是查看端口是被占用的

【ownCloud】添加信任域

在我进行使用mysql:5.6和 owncloud 镜像&#xff0c;构建一个个人网盘后 我的虚拟机更改了ip地址导致出现下列状况 报错&#xff1a;您正在访问来自不信任域名的服务器。 please contact your administrator. if you are an administrator of this instance, configure the &q…

阿里云大语言模型(LLM)实战训练营,火热开营中!

简介&#xff1a;大语言模型实战训练营已正式开营&#xff0c;汇集阿里云、黑马程序员多位AI领域资深技术专家手把手带您快速实现大语言模型从入门到应用落地&#xff01;完成课程学习任务更有机会领取LAMY钢笔、小米充电宝、双肩包等精美礼品&#xff0c;快来一起学习体验吧~ …

【虫洞攻击检测】使用多层神经网络的移动自组织网络中的虫洞攻击检测研究(Matlab代码实现)

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…

ChatGPT赋能低代码开发:打造智能应用的双重引擎

摘要&#xff1a;本文摘自葡萄城低代码产品活字格的资深用户&#xff08;格友超哥&#xff09;所撰写的文章&#xff1a;《惊叹表现&#xff01;活字格ChatGPT&#xff1a;低代码开发智能应用的巨大潜力》。 ChatGPT的functions函数使用方 自从OPENAI发布了最新的GPT引擎gpt-3…

indexDB入门到精通

前言 由于开发3D可视化项目经常用到模型&#xff0c;而一个模型通常是几m甚至是几十m的大小对于一般的服务器来讲加载速度真的十分的慢&#xff0c;为了解决这个加载速度的问题&#xff0c;我想到了几个本地存储的。 首先是cookie,cookie肯定是不行的&#xff0c;因为最多以只…

【项目实践】基于LSTM的一维数据扩展与预测

基于LSTM的一维数据拟合扩展 一、引(fei)言(hua) 我在做Sri Lanka生态系统服务价值计算时&#xff0c;中间遇到了一点小问题。从世界粮农组织(FAO)上获得Sri Lanka主要农作物产量和价格数据时&#xff0c;其中的主要作物Sorghum仅有2001-2006年的数据&#xff0c;而Millet只有…

常用的Selenium基础使用模板和简单封装

前言 近来又用上了 Selneium &#xff0c;因为反复用到&#xff0c;所以在这里将一些常用的方法封装起来&#xff0c;方便后续的使用。 在这篇文章中&#xff0c;我们将探讨 Selenium 的基础模板和基础封装&#xff0c;以便更好地理解 Selenium 的使用方法。 在Selenium的使…

MyBatisPlus入门

入门&#xff1a; 依赖&#xff1a; <dependency> <groupId>com.baomidou</groupId> <artifactId>mybatis-plus-boot-starter</artifactId> <version>{version}</version> </dependency> 配置&#xff1a; ## 去除logo …

无涯教程-PHP - 标量函数声明

在PHP 7中&#xff0c;引入了一个新函数&#xff0c;即标量类型声明。标量类型声明有两个选项- Coercive - 强制性是默认模式。Strict - 严格模式必须明确提示。 可以使用上述模式强制执行以下类型的函数参数- intfloatbooleanstringinterfacesarraycallable 强制模…