前端如何引用LCD字体液晶字体，如何转换？@font-face 如何使用？

已于 2023-02-22 10:15:52 修改
阅读量1.3k 收藏 6
点赞数 2
分类专栏： vue LCD字体 文章标签： vue.js node.js
于 2020-02-14 19:06:21 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xljx_1/article/details/104317300
版权

1、打开字体下载网站

https://www.dafont.com/

点击LCD，并输入想药转换的字符

2、上面操作下载后得到一个压缩包，里面都是.ttf格式，需要将其转换成.woff格式

打开转换网站

https://www.fontsquirrel.com/tools/webfont-generator

3、打开压缩包

将.woff 、.woff2 文件拷贝至项目的某个文件夹下

将压缩包中的stylesheet.css 的内容拷贝至项目的某个css文件中也可以直接拷贝文件进去引用。

4、在项目中使用

效果

絮落锦乡
关注
专栏目录
css中引入指定字体@font-face兼容各浏览器的问题
11-21
网页制作中，如果想使用特定的字体可以通过 @font-face 引用，即是解决访问用户电脑本地没有安装该字体导致不能按设计样式显示的问题。 注意： 支持 @font-face 的浏览器有Internet Explorer 9、Firefox Opera、...
LCD液晶字体
大山博客
11-26 4215
大屏或是web使用，LCD液晶字体使用方案： 去 dafont下载.ttf格式字体，输入0123456789，点击下载（图一） 通过fontconverter或者fontsquirrel.com来生成.woff等格式的字体（第二个连接似乎更好用，图二） 正常导入.woff文件 图一： 图二： ...
vue使用外部字体自定义LCD字体（晶管体）
码农键盘上的梦
06-15 1623
大屏监控中常用到液晶字体效果，如下图所示： 1、下载地址【Techno > LCD fonts | dafont.com】转换字体的步骤： --->①点击“UPLOAD FONTS”按钮上传文件 --->②选择要转换的类型 --->③点击“ Yes, the fonts I'm uploading are legally eligible for web embedding.”，出现下载按钮 --->④点击“download your kit”，即可将转换后得到的字体下载下来。 如下图：
WOFF2 开源项目教程
gitblog_00877的博客
08-31 414
WOFF2 开源项目教程 woff2项目地址:https://gitcode.com/gh_mirrors/wo/woff2 项目介绍 WOFF2（Web Open Font Format 2）是由Google开发的一种字体格式，它提供了比WOFF1.0更好的压缩率。WOFF2格式基于TrueType和OpenType字体，旨在通过更高效的压缩算法减少字体文件的大小，从而加快网页加载速度。 项目...
如何在css文件中使用本地ttf/woff/woff2字体？
weixin_48577052的博客
02-09 4734
在css文件中使用本地tff/woff/woff2字体。
iconfont下载的本地文件的ttf、woff、woff2转换成base64位后引入iconfont.css使用
前端-尔嵘
12-23 2964
写这篇文章的目的：我想在html中使用iconfont图标元素，选择好的图标下载到本地后，引入iconfont.css文件无法直接使用 iconfont下载的本地文件的ttf、woff、woff2转换成base64位后引入iconfont.css使用如下： 使用在线转换工具 Transfonter 注意： 1、原来下载的iconfont.css文件中有三种类型的：woff2、woff、truetype，这里我选择woff作为转换源，即：//at.alicdn.co...
前端中LCD字体的实现
weixin_47030180的博客
11-23 1007
LCD字体在前端中如何实现 应项目需要，需要在页面中展示一种LCD类似电子表中的字体，经过查阅相关资料以实现，下面放成果图 下面我来说下具体做法： 1.首先到dafont下载你需要的字体，它提供的字体很多不止有LCD字体一种 2.下载后解压，找到后缀名为TTF的文件 3.打开fontsquirrel如图： 4.选择最右边的自定义配置，为了尽可能多的兼容各个浏览器，按照如下选择： 5. 点击最上面的upload fonts 上传刚刚下载好的TTF文件，滑倒下方 点击我同意，然后开始下载。 6. 解压压缩
使用font-face改变字体即加载外部字体
09-25
在@font-face声明之后，可以通过font-family属性引用这些字体。在这个示例中，我们有三个div元素（类名为a、b、c），每个元素都使用了不同的@font-face声明中定义的字体，并且都设置了24像素的字体大小。类名为c的...
CSS3 @font-face网页中的字体
04-23
CSS3引入的`@font-face`规则，让网页设计师能够使用非系统默认的字体，从而打破传统浏览器对字体的限制，提供更丰富的文字表现力。下面将详细解释`@font-face`的工作原理以及如何在网页中应用它。 一、@font-face...
css实现LED液晶数码字体
Jack_13201的博客
03-01 3755
一：下包 连接地址：https://www.dafont.com 步骤： 1、 2、下载.ttf字体文件到本地，放在font字体文件中 3、引入字体 在css文件中引入字体 @font-face { font-family: 'led regular'; src: url('../fonts/DS-DIGI.TTF'); } 4、新字体的使用 添加样式即可 .eventNu...
lcd液晶 字符生成工具
07-10
5110 等lcd液晶 字符生成工具 也可图片转换成代码
LCD图形字库生成
03-07
开发LCD自定义字图库，转换多种字体的点阵码，也可导入图形，自设计图形，非常好用，无限制
LCD汉字生成器
05-31
本软件自动生成汉字代码，方便。
LCD字体(用于模拟LCD或LED显示)
09-03
液晶数字字体
【css】LCD液晶字体——自定义字体@font-face
xilejie的博客
11-29 1887
实现效果： 实现步骤： 下载字体 .ttf https://www.dafont.com/theme.php?cat=302&text=0123456789 选择LCD，点download下载需要的字体文件(.ttf)。 生成eot/ woff等格式文件 https://www.fontsquirrel.com/tools/webfont-generator 上传ttf文件，生成其他...
精美的液晶数字字体素材
xiaofufu11的专栏
06-26 5567
液晶数字应该比较常见，那么液晶数字字体的应用也是相对广泛了，可以运用于一切需要液晶显示屏上的数字字体显示。对于这样一种有着广泛的应用数字字体，选择使用哪款液晶数字字体也是一个很重要的问题啦!为此，特意为大家收集了几款液晶数字字体供大家选择，喜欢的朋友赶紧收藏起来吧! 　　DS-Digital字体是一款比较常规的液晶数字字体，这款字体的仅支持数字和大写字母输入，字体端正，结构完整，整体视觉呈现效果...
网页内引用外部字体方法
nimo观察者
04-05 2086
在自建博客的UU们可以关注一手，强推我的好兄弟辞旧
页面显示LCD液晶字体，特殊字体，@font-face属性详细用法，配图
热门推荐
小趴菜的博客
10-17 2万+
一、如果项目中需要用到液晶字体显示数值（如下图所示字体）二、在这就需要用到@font-face（具体看一下语法）/* 定义 */ @font-face { font-family: 'MicrosoftYaHei'; src: url('MicrosoftYaHei.eot'); /* IE9 Compat Modes */ src: url('MicrosoftYaHei.
如何在CSS中使用@font-face规则引入自定义字体？
最新发布
09-11
在CSS中，`@font-face`规则可以用来定义并使用自定义字体。使用`@font-face`可以让你在网页中使用那些不是默认安装在用户系统上的字体。以下是使用`@font-face`规则引入自定义字体的基本步骤： 1. 首先，你需要拥有或选择一个字体文件。通常这些文件可能是`.woff`、`.woff2`、`.ttf`、`.eot`、`.svg`等格式之一。 2. 然后，在CSS文件中，你可以使用`@font-face`规则定义字体。在这个规则中，你需要提供一个`font-family`名称（这是你在CSS中引用该字体的方式），以及字体文件的路径。例如： ```css @font-face { font-family: 'MyCustomFont'; src: url('my-custom-font.woff2') format('woff2'), url('my-custom-font.woff') format('woff'), url('my-custom-font.ttf') format('truetype'); font-weight: normal; font-style: normal; } ``` 在上面的例子中，`'MyCustomFont'`是你自定义的字体名称，`src`属性指定了字体文件的位置和格式。建议同时提供多种格式的字体文件，以便浏览器根据支持的情况选择正确的字体文件。 3. 最后，你可以在你的CSS中通过`font-family`属性来使用这个自定义字体了： ```css body { font-family: 'MyCustomFont', sans-serif; } ``` 在这个例子中，如果`'MyCustomFont'`不可用，浏览器将回退到使用默认的`sans-serif`字体。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值