H5（nuxt）项目引入字体

H5（nuxt）项目引入字体

闲话少说
方法1：
1.下载所需要的字体，.ttf格式本文以（FZCYJ.ttf 为例）
2.先自己定义一个font.css文件，字体文件的路径引入

@font-face {
  font-family: "华文行楷";
  src: url('stxingka.ttf');
  font-weight: normal;
  font-style: normal;
}

3.App.vue中的style里引入

4、添加loader

module: {
    rules: [
        {
            test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
            loader: 'url-loader',
            options: {
                limit: 10000,
                name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
            }
        }
    ]
}

5.使用

上述方法弊端：

ttf文件教大，页面加载过慢，影响用户体验
解决方向：压缩ttf文件

方法2： font-spider（字蛛）压缩ttf

先附上官方链接：http://font-spider.org/

GITHUB：https://github.com/aui/font-spider/blob/master/README-ZH-CN.md

使用教程：https://www.jianshu.com/p/8ef246692d14

上述方法弊端

font-spider原理是解析html页面中的含有中文字的标签，然后解析标签，将需要的ttf压缩，将压缩后的ttf文件放到项目中去，**但是，这种ttf文件会解析页面中已经存在的字体，而我们的项目是单页面应用，都是打包后的js文件，没有像静态页面中已存在的字体**，所以当我们把压缩好的ttf文件放到静态页面中尝试时，确实是有效的，可当我们放到项目中就失效了，这是我能想到能解释这个现象的唯一原因了。

所以怎么办？
方法3：
在万籁俱寂之时，为我无意间翻到了一个网站叫‘有字库“，网址是：https://www.webfont.com
具体使用方法

1、注册登录
2、检索到需要的字体
3、点击使用，下面照搬就行

这个在线字体库的唯一的优势就是它的js文件通过cdn加速过，加载字体文件的速度提高了，其他并没有什么特别之处。但是，为什么我后来又放弃了呢？当你搜一下下面的字体时突然发现

兄弟有钱不？

总结

如果你的产品跟你说：“去他妈的用户体验。”我强烈推荐方法1
如果你使用的前端项目不是基于node应用使用方法2，且你不想这么费事，那就方法3。

敲黑板

天真的你们是不是以为这就完了，还有方法4呢？我怎么可能不解决问题就结束了呢？史上最强的解决方案来啦。。。
我："那个，口渴吗？"
她：“什么事？”
我：“这个图能帮我切一下吗？”
她：“行啊！”
我：“顺便把这个字体也放进去吧！”
她：“可以的，现在就要吗？”
我：“没事没事，你慢慢做，我不急”
...半个小时候，美团的小哥在楼梯间吼道：“徐先生，徐先生，您的奶茶到了！”
完结