6

css实现LCD液晶数码字体(可兼容ie6以上,方法见下)

 3 years ago
source link: https://blog.csdn.net/qq_41619796/article/details/87784150
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

先看看实现的效果吧:

具体实现步骤:

第一:下载lct的ttf版本文件,可以到 https://www.dafont.com下载lcd格式字体------也可以直接在我的百度网盘提取。详情见下

 

然后输入0-9,提交,相应的lcd内容就会出来

 

 

最后点击右边的 Download 下载就行了

 

或者直接在我的网盘提取就行了:

https://pan.baidu.com/s/1D1AATE7lnHDEMqgUx_ZsdA

 

提取码:19qr  永久有效的

推荐哦,里面有woff,eto的现成文件,可以直接用

 

第二:把获取到的lct文件转换(如果是网站获取的应该是.ttf格式的,要转换为.woff和.eot)

    把文件放入,在css中定义:

      

@font-face {
font-family: 'UnidreamLED';
src:url(../../lib/UnidreamLED/UnidreamLED.eot); /***兼容ie9***/
src:url(../../lib/UnidreamLED/UnidreamLED.eot?#iefix)format('embedded-opentype'), /***兼容ie6-ie8***/
url('../../lib/UnidreamLED/UnidreamLED.woff') format('woff'),
local('UnidreamLED'), url("../../lib/UnidreamLED/UnidreamLED.woff");/***默认使用本地的***/
}

这里的font-family:后面是你定义的lcd字体的名字,后面我们引用的时候:

span{
font-family: 'UnidreamLED';
}

这样就好了,

另外推荐sunshine_han写的这篇也特别好:https://blog.csdn.net/sunshine_han/article/details/78258880


About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK