【css】LCD液晶字体——自定义字体@font-face

实现效果：

实现步骤：

• 下载字体 .ttf
  https://www.dafont.com/theme.php?cat=302&text=0123456789
  选择LCD，点download下载需要的字体文件(.ttf)。
  
• 生成eot/ woff等格式文件
  https://www.fontsquirrel.com/tools/webfont-generator
  上传ttf文件，生成其他格式文件。
  
• 将字体文件放在一个文件夹中。
  
• css中用@font-face定义字体

@font-face {
  font-family: 'font-lcd';// 字体名称
  src:url('./assets/font-lcd/ds-digi-webfont.eot');//ie
  src: url('./assets/font-lcd/ds-digi-webfont.eot?#iefix') format('embedded-opentype'),
  url('./assets/font-lcd/ds-digi-webfont.woff') format('woff'),
  url("./assets/font-lcd/ds-digi-webfont.ttf") format('truetype'),
  url('./assets/font-lcd/ds-digi-webfont.svg#MicrosoftYaHei') format('svg');
}

//src: 字体文件路径

• 使用：

.test {
    font-family: 'font-lcd'; // 使用自定义字体
    color: red;
}