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