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;

}

　三、打包

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

巴特西

vue项目中使用特殊字体

最新文章

热门文章