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裏引入

<style lang="less" rel="stylesheet/less">
  @import "./common/font/font.css";
</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.使用

<style type="less" scoped>
    .header{
        font-family: "華文行楷"
    }
</style>

上述方法弊端：

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呢？我怎麼可能不解決問題就結束了呢？史上最強的解決方案來啦。。。
我："那個，口渴嗎？"
她：“什麼事？”
我：“這個圖能幫我切一下嗎？”
她：“行啊！”
我：“順便把這個字體也放進去吧！”
她：“可以的，現在就要嗎？”
我：“沒事沒事，你慢慢做，我不急”
...半個小時候，美團的小哥在樓梯間吼道：“徐先生，徐先生，您的奶茶到了！”
完結