VUE项目 引用外部字体

背景：

        web页面的UI设计时，常常会用到一些陌生又非常好看的字体，但是在开发过程中总是设置对应的字体名称却不生效 ，这就需要引用外部字体

实现步骤：

一、在网上下载所需要的对应字体（备注：注意字体文件的格式 .ttf） 

  字体网址： http://www.fonts.net.cn/font-13003182419.html

二、解压并将需要的字体文件导入你的项目中（文件名称可以自定义）

三、在需要的文件中引用

<style scoped>
    @font-face {
        font-family: 'DigitalFSS';  //定义 字体别名，方便使用
        src: url('../../assets/css/digital.ttf'); //字体文件
    } 

    h1{
        color: #00EBF3;
        font-family:DigitalFSS;
    } 

</style>

 

效果对比：

使用字体前                                         使用字体后