lcd样式应该怎么引入呢

你好,(fontFamily: "wgsFont",//该字体是我自己引入的lcd字体,不知道怎么引入) 这个应该怎么引入呢

LCD字体在前端的实现

应项目需求需要实现如图效果(这也是实际效果图),做一个方法总结:

在这里插入图片描述


具体实现步骤:

1、首先到https://www.dafont.com/theme.php?cat=302下载你需要的字体,它提供的字体很多不止有LCD字体一种。

在这里插入图片描述


==点击1:== 可以看到LCD字体下也有很多不同风格的

在这里插入图片描述


==点击2:== 下载,解压

在这里插入图片描述


2、打开https://www.fontsquirrel.com/tools/webfont-generator如图:

在这里插入图片描述


3、选择最右边的自定义配置,为了尽可能多的兼容各个浏览器,按照以下选择:

在这里插入图片描述


4、==点击最上面的upload fonts 上传==刚刚下载好(==自己所需==的那个)的TTF文件,==滑倒下方 点击我同意,然后开始下载==。
5、解压压缩包得到如下文件:

在这里插入图片描述


6、将此文件夹(整个文件夹)放入到对应的项目中的静态资源存放位置如 assets/font 文件夹下。
7、在你需要此字体的页面中的css中写入如下代码:

/* 引入lcd字体 */
@font-face {
  font-family: "wgsFont";
  src: url("../font/ds-digi-webfont.eot"); /* IE9 Compat Modes */
  src: url("../font/ds-digi-webfont.eot?#iefix") format("embedded-opentype"), /*IE6-IE8 */
    url("../font/ds-digi-webfont.woff") format("woff"),  /* Modern Browsers */
    url("../font/ds-digi-webfont.ttf") format("truetype"),  /* Safari, Android, iOS */
    url("../font/ds-digi-webfont.svg") format("svg");   /* Legacy iOS */
}

到此准备工作就完成了
代码中具体怎么用:(font-size,color,font-weight等都是可以正常使用的,只是字体增加了一种,当然字体名你可以在步骤7中自己起名字)

在这里插入图片描述