Vue は外部フォントを使用して LCD フォント (トランジスタ本体) をカスタマイズします

次の図に示すように、LCD フォント効果は大画面モニタリングでよく使用されます。

1. フォント形式をダウンロードする

1. ダウンロードアドレス【Techno > LCD fonts | dafont.com】

2.フォントを解凍します。

1. ダウンロード後、解凍するとすべて .ttf ファイルになりますが、Font Squirrel (このアドレスを開くとフォントを直接変換できます) でフォントファイルを woff2、svg、woff 形式などに変換し、ダウンロードしたファイルを解凍します。プロジェクトフォルダーを直接使用します。上部の [フォントのアップロード] をクリックして、ダウンロードした TTF ファイル (必要なファイル) をアップロードし、下にスライドして [同意する] をクリックし、ダウンロードを開始します。
2. 図に示すように、fontsquirrel を開きます。

フォントを変換する手順:
---> ①「フォントをアップロード」ボタンをクリックしてファイルをアップロードします
---> ②変換するタイプを選択します
---> ③「はい、アップロードしているフォントは法的に Web 埋め込みの資格があります。」をクリックします。」と表示されると、ダウンロードボタンが表示されます
---> ④「キットをダウンロード」をクリックして、変換されたフォントをダウンロードします。
以下に示すように:

3. もちろん、より詳細な設定である右端のカスタム構成を選択しますが、できるだけさまざまなブラウザと互換性を持たせるために、次のように選択します。

4. 上部の [フォントのアップロード] をクリックして、ダウンロードした TTF ファイル (必要なファイル) をアップロードし、下にスライドして [同意する] をクリックし、ダウンロードを開始します。
5. 圧縮パッケージを解凍して、次のファイルを取得します。

6. このフォルダー (フォルダー全体) を、assets/font フォルダーなど、対応するプロジェクトの静的リソースの保存場所に置きます。

7. このフォントが必要なページの stylesheet.css に次のコードを記述します。

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

8. この CSS ファイルを main.js に導入します

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

9. これで準備作業は完了ですコード内での使い方：（font-size、color、font-weightなどは普通に使えますが、追加するフォントは1種類です。もちろん、ステップ 7 でフォント名を自分で変更できます。名前を付けます)

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