怎么在vue项目中引入新增自定义UI设计字体？

一、简单实现

        1.在assets文件夹下新建fonts文件夹,里面放tts文件：如DIGITAL-Dream.ttf；

        2.在assets文件夹下新建styles文件夹，里面创建fonts.css文件,

@font-face {
    /* 时钟样式 细*/
    font-family: 'Timer-d'; // 名字自定义
    src: url("../fonts/DIGITAL-Dream.ttf");
}

      3. 在main.js中引入css文件

import '@/assets/styles/fonts.css' //字体样式

      4.在需要的页面应用

    span{
        font-family: 'Timer-d'; // 上面你给字体取的名字
    }

二、扩展了解

        1.点击 @font-face跳转了解

@font-face
{
    font-family: ""; // 必需的。定义字体的名称
    src: ""; // 必需的。定义该字体下载的网址
    font-stretch: "normal"; // 可选。定义该字体应该如何被拉长。默认值是"正常"
    font-style: "normal"; // 可选。定义该字体应该是怎样样式。默认值是"正常"
    font-weight: "normal"; // 可选。定义字体的粗细。默认值是"正常"
    unicode-range: "" // 可选。定义该字体支持Unicode字符的范围。默认值是"ü+0-10 FFFF"
}