数码管字体
字体展示图:
数码管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字体
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/bian-cheng-ji-chu/106348.html