如果web項目中需要用到LCD液晶字體顯示數值（如下圖所示）該怎麽辦？

在這就需要用到@font-face（具體看一下語法）

/* 定義 */
@font-face {
    font-family: ‘MicrosoftYaHei‘;
    src: url(‘MicrosoftYaHei.eot‘); /* IE9 Compat Modes */
    src: url(‘MicrosoftYaHei.eot?#iefix‘) format(‘embedded-opentype‘), /* IE6-IE8 */
             url(‘MicrosoftYaHei.woff‘) format(‘woff‘), 
 
/* Modern Browsers */
             url(‘MicrosoftYaHei.ttf‘)  format(‘truetype‘), /* Safari, Android, iOS */
             url(‘MicrosoftYaHei.svg#MicrosoftYaHei‘) format(‘svg‘); /* Legacy iOS */
   }

/* 使用 */
body{
  font-family: "MicrosoftYaHei";
}

下面是它的詳細介紹

/* 定義字體 */
@font-face {
      font-family: <YourWebFontName>;
      src: <source> [<format>][,<source> [<format>]]*;
      [font-weight: <weight>];
      [font-style: <style>];
    }

/*自定義字庫名稱（一般設置為所引入的字庫名），後續樣式規則中則通過該名稱來引用該字庫。*/
 font-family: <YourWebFontName> ：
 /*設置字體的加載路徑和格式，通過逗號分隔多個加載路徑和格式*/
 src ：
 /*字體的加載路徑，可以是絕對或相對URL。*/
 srouce ：
 /*字體的格式，主要用於瀏覽器識別，一般有以下幾種——truetype,opentype,truetype-aat,embedded-opentype,avg等。*/
 

 format ：
/* font-weight 和 font-style 和之前使用的是一致的。*/
 font-weight:
 font-style:
/*src屬性後還有一個 local(font name) 字段，表示從用戶系統中加載字體，失敗後才加載webfont。*/
src: local(font name), url("font_name.ttf")

兼容性問題
對於@font-face而言，兼容性問題就是各瀏覽器所能識別的字體格式不盡相同。
TrueType格式(.ttf)
Windows和Mac上常見的字體格式，是一種原始格式，因此它並沒有為網頁進行優化處理。
　瀏覽器支持：IE9+,FireFox3.5+,Chrome4.0+,Safari3+,Opera10+,IOS Mobile Safari4.2+
OpenType格式(.otf)
　以TrueType為基礎，也是一種原始格式，但提供更多的功能。

　瀏覽器支持：FireFox3.5+,Chrome4.0+,Safari3.1+,Opera10.0+,IOS Mobile Safari4.2+
Web Open Font格式(.woff)
　針對網頁進行特殊優化，因此是Web字體中最佳格式，它是一個開放的TrueType/OpenType的壓縮版，同時支持元數據包的分離。

　瀏覽器支持：IE9+, FireFox3.5+, Chrome6+, Safari3.6+,Opera11.1+
Embedded Open Type格式(.eot)
IE專用字體格式，可以從TrueType格式創建此格式字體。
　瀏覽器支持：IE4+

SVG格式(.svg)
基於SVG字體渲染的格式。
瀏覽器支持：Chrome4+, Safari3.1+, Opera10.0+, IOS Mobile Safari3.2+

為解決兼容性問題，Paul Irish寫了稱為Bulletproof的一個獨特的@font-face語法：

1 @font-face {
2     font-family: ‘YourWebFontName‘;
3     src: url(‘YourWebFontName.eot‘); /* IE9 Compat Modes */
4     src: url(‘YourWebFontName.eot?#iefix‘) format(‘embedded-opentype‘), /* IE6-IE8 */
5              url(‘YourWebFontName.woff‘) format(‘woff‘), /* Modern Browsers */
6              url(‘YourWebFontName.ttf‘)  format(‘truetype‘), /* Safari, Android, iOS */
7              url(‘YourWebFontName.svg#YourWebFontName‘) format(‘svg‘); /* Legacy iOS */
8    }

註意事項
@font-face遵循先定義後使用原則；

由於中文字體太大，因此建議若中文LOGO還是使用圖片。而英文LOGO則可使用@font-face代替圖片；

@font-face無效有可能是字體的加載路徑錯誤；

FireFox中@font-face的字體加載路徑使用相對路徑時，可能會失敗，具體原因和解決辦法如下：
a). 使用絕對路徑可解決問題；

b). 在file uri scheme的情況下（file:///），由於FireFox默認的file uri origin策略十分嚴格，不同路徑等級則無法訪問。所以相對路徑被視為跨域操作，因此字庫加載失敗。可通過 about:config 進入瀏覽器設置界面，然後將 security.fileuri.strict_origin_policy 設置為false即可；

c). 在http/https uri scheme的情況下（http:///或https:///），則需要對.eot、.ttf和.woff等字體文件的響應頭中加入 Access-Control-Allow-Origin: * ，從而允許跨域請求。

參考資料：https://blog.csdn.net/sunshine_han/article/details/78258880

頁面顯示LCD液晶字體或者其他特殊字體