前端中LED字体的实现

LED字体在前端中如何实现
应项目需要，需要在页面中展示一种LED类似电子表中的字体，经过查阅相关资料以实现，下面放成果图

下面我来说下具体做法：
1.首先到dafont: https://www.dafont.com/theme.php?cat=302下载你需要的字体，它提供的字体很多不止有LED字体一种
2.下载后解压，找到后缀名为TTF的文件
3.打开fontsquirrel https://www.fontsquirrel.com/tools/webfont-generator如图：

4.选择最右边的自定义配置，为了尽可能多的兼容各个浏览器，按照如下选择：

5. 点击最上面的upload fonts 上传刚刚下载好的TTF文件，滑倒下方点击我同意，然后开始下载。

6. 解压压缩包得到如下文件

7. 将此文件夹放入到对应的项目中的静态资源存放位置如 assets/font 文件夹下

8. 在你需要此字体的页面中的css中写入如下代码：

@font-face {font-family: 'wgsFont';src: url('../assets/font/ds-digib-webfont.eot'); /* IE9 Compat Modes */src: url('../assets/font/ds-digib-webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */url('../assets/font/ds-digib-webfont.woff') format('woff'), /* Modern Browsers */url('../assets/font/ds-digib-webfont.ttf')  format('truetype'), /* Safari, Android, iOS */url('../assets/font/ds-digib-webfont.svg') format('svg'); /* Legacy iOS */
}

9.之后就可以在你需要的盒子的css中使用font-family: wgsFont;即可。

前端中LED字体的实现相关推荐

【案例】前端对接LED设备发送指令
需求需求:前端对接LED显示屏,且可以根据LED指令说明灵活性设置了解了解:设备LED指令是按照gb2312编码(16进制)来实现思路思路:需要将输入的内容转为16进制的gb2312编码格式 ...
html前端实现led样式数字的效果（数码管效果展示数据）
前端实现led样式数字的效果前言效果图实现代码使用方式 html代码该工具类使用面向对象的思想来实现该功能:而我认为每一个数字是应该对象,即"123"是应该对象,&quo ...
html页面icon字体无法显示,bootstrap中icon字体图标怎么不显示？
bootstrap中icon字体图标怎么不显示?下面本篇文章给大家介绍一下Bootstrap字体图标不显示问题.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 问题: bootstr ...
web前端中的命名规则
规范目的为提高团队协作效率, 便于后台人员添加功能及前端后期优化维护, 输出高质量的文档, 特制订此文档. 本规范文档一经确认, 前端开发人员必须按本文档规范进行前台页面开发. 本文档如有不对或者不 ...
前端开发之字体大小px，em，rem，pt
在前端开发中尤其是响应式的开发中,字体的大小在不同的屏幕尺寸下发生变化,从而使画面更优的呈现. 下面说一下常用的字体大小的标示方式: 1:px: 这个应该是国内使用较多的单位,意思为像素.因此,其视觉 ...
html前端小技巧—字体及颜色色值准确设置
今天分享下"html前端小技巧-字体及颜色色值准确设置"这篇文章,文中根据实例编码详细介绍,或许对大家的编程之路有着一定的参考空间与使用价值,需要的朋友接下来跟着云南仟龙Mark一 ...
css文本外观属性中设置字体,css 文本外观属性(text) 和字体样式属性(font)
css文本 text外观属性 color: 颜色值(red,blue)十六进制 ,rgb letter-spacing: 字间距 px,em word-spacing: 单词间距对中文无效 line ...
spring-boot-打版-破坏前端文件导致字体图标无法显示
打版时候遇到一个很坑的问题,导致前端的页面字体和图标无法显示. 问题原因很简单,但查找这个问题到定位用了一天时间,醉了. 具体报错: 因为是使用maven打版, 由于maven的filter(拦截), ...
前端学习之字体图标(iconfont)
Web字体字体格式不同的浏览器支持的字体格式是不一样的. tureTypeFont(.ttf)格式 . ttf字体是Windows和Mac的最常见的字体,是一种RAW格式,支持这种字体的浏览器有I ...
七：以理论结合实践方式梳理前端 CSS 3 ——— 字体颜色独特性
样式单位相对长度单位指定了一个长度相对于另一个长度的属性,对于不同的设备相对长度更适用绝对长度单位是一个固定的值,它反应一个真实的物理尺寸,绝对长度单位视输出介质而定,不依赖于环境(显示器.分辨率 ...

前端中LED字体的实现

前端中LED字体的实现相关推荐

最新文章

热门文章