前端中LCD字体的实现

LCD字体在前端中如何实现

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

下面我来说下具体做法：
1.首先到dafont下载你需要的字体，它提供的字体很多不止有LCD字体一种
2.下载后解压，找到后缀名为TTF的文件
3.打开fontsquirrel如图：
4 点击最上面的upload fonts 上传刚刚下载好的TTF文件，滑倒下方 点击我同意，然后开始下载。

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

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;即可。