vue使用外部字体自定义LCD字体（晶管体）

大屏监控中常用到液晶字体效果，如下图所示： 

 

一、下载字体格式

  1、下载地址【Techno > LCD fonts | dafont.com】

二、解压字体

1、下载后，解压后都是.ttf文件，在Font Squirrel （这个地址打开，直接可以转换字体）可将字体文件转换成woff2,svg,woff格式等，将下载后的文件解压至项目文件夹中直接使用。点击最上面的upload fonts 上传刚刚下载好(自己所需的那个)的TTF文件，滑倒下方 点击我同意，然后开始下载。
2、打开fontsquirrel如图：

转换字体的步骤：
--->①点击“UPLOAD FONTS”按钮上传文件
--->②选择要转换的类型
--->③点击“ Yes, the fonts I'm uploading are legally eligible for web embedding.”，出现下载按钮
--->④点击“download your kit”，即可将转换后得到的字体下载下来。
如下图：

3、当然，选择最右边的自定义配置，是更详细的设置，为了尽可能多的兼容各个浏览器，按照以下选择：如下：

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

6、将此文件夹(整个文件夹)放入到对应的项目中的静态资源存放位置如 assets/font 文件夹下。

7、在需要此字体的页面中的stylesheet.css中写入如下代码：

.lcd-font {
    font-family: 'seven_segmentregular';
}

 

 8、在main.js中引入这个css文件

import '@/assets/font/seven_segmentregular/stylesheet.css';

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

  <div>实时时间显示</div>
  <div class="lcd-font" style="color: #337ecc;">{
   
   { nowTime }}</div>