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;
}

　三、打包

　　看网上朋友们遇到的问题不止于此，还有打包完后的各种报错，鉴于我还没有打包，此块保留（后续会完善的）