如何为数字设置数码管LED字体

数码管字体

字体展示图：

数码管LED字体
GitHub地址为：https://github.com/wxyzcctv/waping-ui-1/tree/main/src/global/css

主要步骤

• 1 在dafont.com中找到喜欢的字体

选字体
选好之后就点击对应字体最右边的 Download 按钮，下载对应字体文件

• 2 转换字体格式

下载的字体文件一般都是以.tff为后缀，为了兼容不同浏览器，此时需要将该文件转换为.eot和.woff格式，可以百度一下在线转换工具。（此处以Digital Display字体为例）

转换格式

• 3 将字体文件引入项目

将步骤2得到的字体文件加入到项目指定目录中，并在全局css/less/scss文件中进入如下指定:

字体文件指定路径

 @font-face{
    font-family: 'LCD3';
    src:  url('./LCDVer3/DigitalDisplay.eot?w0ybrd');
    src:  url('./LCDVer3/DigitalDisplay.eot?w0ybrd#iefix') format('embedded-opentype'),
    url('./LCDVer3/DigitalDisplay.ttf?w0ybrd') format('truetype'),
    url('./LCDVer3/DigitalDisplay.woff?w0ybrd') format('woff'),
 }

关于css3的@font-face的具体使用说明可查看MDN。
那么再全局范围内引入该文件后就可以直接使用该字体了。作为对比，我加入了另外几种LCD字体

        <div style="font-size:125px">1234567890ABCDEFg</div>
        <div style="font-family:Techno LCD;font-size:120px">1234567890ABCDEFg</div>
        <div style="font-family:LCD2;font-size:120px">1234567890ABCDEFg</div>
        <div style="font-family:LCD3;font-size:120px">1234567890ABCDEFg</div>
        <div style="font-family:UnidreamLED;font-size:120px">1234567890ABCDEFg</div>