大屏展示LCD液晶字体—css3 @font-face属性自定义字体

显示效果：

实现步骤：

• 到 dafont 下载.ttf 格式字体，选择LCD，点download下载，得到压缩包，需解压。
  
• 通过fontsquirrel来生成.woff等格式的字体。
  上传.ttf格式文件，生成其他文件格式，得到压缩包，需解压。
  
• 将字体文件放在一个文件夹中。
  
• css中用@font-face定义字体：

// 兼容写法
@font-face {
  font-family: 'myFont';
  src: url('~@/assets/styles/my-font/ds-digi-webfont.eot'); /* IE9 Compat Modes */
  src: url('~@/assets/styles/my-font/ds-digi-webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('~@/assets/styles/my-font/ds-digi-webfont.woff') format('woff'), /* Modern Browsers */
  url('~@/assets/styles/my-font/ds-digi-webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
  url('~@/assets/styles/my-font/ds-digi-webfont.svg#MicrosoftYaHei') format('svg'); /* Legacy iOS */
}

• 使用：

.number{
  font-family: 'myFont'; // 使用自定义字体
}

兼容问题：

Webkit/Safari(3.2+)

TrueType/OpenType TT (.ttf) 、OpenType PS (.otf)；

Webkit/Safari(3.2+)Opera (10+)

TrueType/OpenType TT (.ttf) 、 OpenType PS (.otf) 、 SVG (.svg)；

Internet Explorer

自ie4开始，支持EOT格式的字体文件；ie9支持WOFF；

Firefox(3.5+)

TrueType/OpenType TT (.ttf)、 OpenType PS (.otf)、WOFF (since Firefox 3.6)

Google Chrome

TrueType/OpenType TT (.ttf)、OpenType PS (.otf)、WOFF since version 6

由上面可以得出：.eot + .ttf /.otf + svg + woff = 所有浏览器的完美支持

更多参考：
CSS3 @font-face 规则
https://blog.csdn.net/sunshine_han/article/details/78258880