大屏監控中常用到液晶字體效果，如下圖所示：?

?

一、下載字體格式

? 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>

?

總結

以上是生活随笔為你收集整理的vue使用外部字体自定义LCD字体（晶管体）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。