本文介绍了在H5（Nuxt.js）项目中如何引入字体，包括直接引入ttf文件、使用font-spider压缩以及通过在线字体库的方式。针对ttf文件大小问题，提出了使用压缩工具font-spider，但由于SPA应用特性导致失效，进而转向使用有字库以cdn加速字体加载。最后，作者分享了一个巧妙的解决方法，通过设计师在切图时一并处理字体。
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呢？我怎么可能不解决问题就结束了呢？史上最强的解决方案来啦。。。
我："那个，口渴吗？"
她：“什么事？”
我：“这个图能帮我切一下吗？”
她：“行啊！”
我：“顺便把这个字体也放进去吧！”
她：“可以的，现在就要吗？”
我：“没事没事，你慢慢做，我不急”
...半个小时候，美团的小哥在楼梯间吼道：“徐先生，徐先生，您的奶茶到了！”
完结
4677
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
