vue項目中使用特殊字體

項目開發中遇到要是有‘數字’字體的情況，樣式如下

 

 

 網上查了一下實現的方法很簡單，而且具體的實現方式大致相同，可以參考以下幾個鏈接：

https://www.cnblogs.com/zhangnan35/p/9812453.html

https://www.jianshu.com/p/be0770254ae0

（如果使用上個鏈接中的方法報錯，那么建議看一下是不是url出了問題，改成url-loader即可）

但是，結合了以上兩個鏈接依舊沒有實現我想要的文字效果。

一、CDN引入

最后通過CDN引入的方式確實改變了字體樣式，代碼如下：

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <h1 class="wenzi">123545646456</h1>
    <h1 class="wenzi">我也是文字呀</h1>
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>

    @font-face{
        font-family:QingKe;
        src:url("https://g.alicdn.com/TSG/damo-static/2019.918.162009/damo/css/font/iozzkhwu.ttf")
        /* src: url-loader("@/assets/iozzkhwu.ttf");  這種方式是錯誤的*/
    }
    @font-face{
        font-family:SYHT;
        src: url('https://tuyu.hnbcdn.com/SHSCN-ELight.eot');
        src:url(https://tuyu.hnbcdn.com/SHSCN-ELight.eot);
        src:local('鈽�'),url(https://tuyu.hnbcdn.com/SHSCN-ELight.woff) format('woff'),url(https://tuyu.hnbcdn.com/SHSCN-ELight.ttf) format('truetype'),url(https://tuyu.hnbcdn.com/SHSCN-ELight.svg) format('svg');font-weight:400;font-style:normal
    }
    .wenzi{
      font-family: SYHT;
          letter-spacing:3px;
          font-weight: 100;
    }
</style>
      

 

　　效果：

 二、最終解決

好吧，在我絕望的准備放棄的時候解決了…，下面我將開發過程中遇到的問題記錄一下，並給出正確方式：

錯誤①：

　　錯誤場景，當時UI給我的文字包是這樣的  DIGITAL-7_MONO-WEBFONT.TTF ，我天真善良的就這么用了，用法如下：

@font-face {
  font-family: 'SHIZHONGZITI';
  src: url(./assets/DIGITAL-7_MONO-WEBFONT.TTF);    
}

.teshu {
  font-family:  SHIZHONGZITI;
}

　　如此這般寫居然報錯了，好吧，當我就要放棄的時候我把 TTF 改成了小寫，注意真的就是這個大小寫的問題，然后一切就都美好了，該出現的效果都出現了：

 　　（問題解決的就是這么猝不及防）

@font-face {
  font-family: 'SHIZHONGZITI';
  src: url(./assets/DIGITAL-7_MONO-WEBFONT.ttf);    
}

.teshu {
  font-family:  SHIZHONGZITI;
}

　三、打包

　　看網上朋友們遇到的問題不止於此，還有打包完后的各種報錯，鑒於我還沒有打包，此塊保留（后續會完善的）