LCD digital fonts are introduced in Vue3 (usually used for large-screen design)

1. Download the .ttf font file locally and place it under the assets file in src

Download LCD font DS-Digital.ttf

2. Introduce fonts into css files

/*  src/assets/fonts/dsfont.css   */
@font-face {
    
    
    font-family: 'electronicFont';
    src: url(./DS-Digital.ttf);
    font-weight: normal;
    font-style: normal;
}

3. Introduced in main.js

// 导入字体文件
import '@/assets/fonts/dsfont.css'

3. Use new fonts

<div class="time"> {
   
   {currentTime}} </div>

.time {
    
    
  color: "#ccc";
  display: inline;
  font-family: "led regular";
  font-size: 2.3vh;
}

4. Effect drawing

---

‼ ️Note: This project uses vue-clithe basic framework built by , webpack.base.conf.jswhich has been configured in the configuration file. Just follow the steps above to use it. If it is another framework, you need to check webpack.base.conf.jswhether the following configuration in the configuration file includes ttfthe format.

      {
    
    
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        loader: 'url-loader',
        options: {
    
    
          limit: 10000,
          name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
        }
      },