Vue project introduces font style

1. Download the required font style first, and the downloaded one should be a .ttf file

2. Create a fonts folder in the asset, put the font style file in it, and then create a font.css file in it
3. Reference it in the font.css file

@font-face {
    
    
  /* 重命名字体名 */
  font-family: 'HeFengShuDaoZhaoHe';
  /* 引入字体 */
  src: url('./HeFengShuDaoZhaoHe.ttf');
  font-weight: normal;
  font-style: normal;
}

4. The next step is to see whether you want to import locally or globally. I introduced it globally, that is, the main.js file import

import '@/assets/fonts/font.css'

5. Use of font styles

.title {
    
    
   font-family : 'HeFengShuDaoZhaoHe';  // 这里是使用
   font-size: 24px;
   text-align: center;
   margin: 30px 0 0 30px;
}

6. Where I download font styles: Jump