LCD字体前端实现(最详细)

LCD字体在前端的实现

应项目需求需要实现如图效果(这也是实际效果图)，做一个方法总结：

具体实现步骤:

1、首先到dafont下载你需要的字体，它提供的字体很多不止有LCD字体一种。

点击1：可以看到LCD字体下也有很多不同风格的

点击2：下载，解压

2、打开fontsquirrel如图：

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

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

6、将此文件夹(整个文件夹)放入到对应的项目中的静态资源存放位置如 assets/font 文件夹下。
7、在你需要此字体的页面中的css中写入如下代码：

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

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

LCD字体前端实现(最详细)相关推荐

页面显示LCD液晶字体，特殊字体，@font-face属性详细用法，配图
如果web项目中需要用到LCD液晶字体显示数值(如下图所示)该怎么办? 在这就需要用到@font-face(具体看一下语法) /* 定义 */ @font-face {font-family:'Mic ...
传感器实验——LCD字体
传感器实验--LCD字体 LCD屏幕测试所选设备 1.54寸液晶屏st7789 spi 示例程序默认字体对我们不友好,所以我找了一些字库方便实用哦. LCD屏幕测试所选设备主控:MR开发板 1 ...
Matplotlib关于字体及子图的详细操作
Matplotlib关于字体及子图的详细操作 1. Matplotlib关于字体的详细操作 2. 图片排版与修饰 1. Matplotlib关于字体的详细操作方法一. from matplotlib ...
前端如何引用LCD字体液晶字体，如何转换？@font-face 如何使用？
1.打开字体下载网站 https://www.dafont.com/ 点击LCD,并输入想药转换的字符 2.上面操作下载后得到一个压缩包,里面都是.ttf格式,需要将其转换成.woff格式打开转换网 ...
vue使用外部字体自定义LCD字体（晶管体）
大屏监控中常用到液晶字体效果,如下图所示: 一.下载字体格式 1.下载地址[Techno > LCD fonts | dafont.com] 二.解压字体 1.下载后,解压后都是.ttf文件,在 ...
手把手带你入门前端工程化——超详细教程（高级前端必备）
本文将分成以下 7 个小节: 技术选型统一规范测试部署监控性能优化重构部分小节提供了非常详细的实战教程,让大家动手实践. 另外我还写了一个前端工程化 demo 放在 github 上.这 ...
手把手带你入门前端工程化——超详细教程
授权自@谭光志链接:https://segmentfault.com/a/1190000037752931,也可点击阅读原文本文将分成以下 7 个小节: 技术选型统一规范测试部署监控性能 ...
用html修改游戏聊天字体,前端使用自定义字体方案
工作中我相信大家都遇到过设计要求使用一些奇奇怪怪字体的需求,然后因为字体文件太大,选择切图. 我这个需求就厉害了,用户发的文章可以选择字体.这文章中可以出现的字就太多了,显然上个方案就不合适了,那我们 ...
前端seo优化详细方案
前言: 在好久之前就总结过一个版本的搜索引擎优化,但是那时只是很肤浅的做一些meta中的,description,keywords,以及一些简单的语义化标签,并没有在谷歌搜索引擎中心搜索到自己的网站, ...

LCD字体前端实现(最详细)

LCD字体在前端的实现

LCD字体前端实现(最详细)相关推荐

最新文章

热门文章