公司项目使用的vue的nuxt框架开发，因为要求显示源代码做seo方面的东西，记录一下开发过程碰到的页面渲染的问题。
首先关于nuxt框架的使用就多叙述了，详情参考官方文档 我们使用的是静态打包生成的是一个又一个的html文件，关于打包遇到的问题有时间再整理一篇文档。这篇文章先讲说字体渲染的页面问题。
项目部署到服务器以后，我们发现打开页面的时间一般需要10秒左右，最开始我们使用的build打包方式还不至于这么长时间，为什么改为静态打包以后时间反而更长了呢？打开控制台可以看到首页的html和css请求时间都没有超过两秒，但是页面没有出来，network的请求一直在增长，点一下一看是字体文件，我们所有页面的字体都是ui单独给的，然后开始解决字体的问题。
解决方案先去百度字体文件导致页面加载不出来，搜到的最多的文章就是使用字蛛压缩字体文件，还有字蛛-plus，看了看这东西发现并不能解决问题，因为中文的汉字包大概都有10兆左右，因为汉字就是多，不像英文就26个字母，字蛛的原理就是根据页面中css去找到要使用的汉字，去删减不需要的汉字，从而是引入的包体积变小。但是我们项目是整个项目都是整个字体的。所以这样行不通，那么就要理解一下字体渲染页面的机制了（还是我基础知识不够扎实）。
进入正文：浏览器是如何加载字体的？
大多数浏览器在自定义字体还未下载之前会先隐藏文本。这就是大家所说的 Flash of Invisible Text。 以谷歌浏览器为例，从加载到渲染字体资源总共分为 3 个阶段
-
阻塞（block）阶段 这是浏览器加载字体的第一阶段，字体加载完成前默认字体不可见，加载完成后则立即用该字体渲染文字，如果超过一定时间，字体还没加载完成，则立即进入到 swap 阶段。
-
交换（swap）阶段 这是浏览器加载字体的第二阶段，字体加载完成前默认采用后备字体渲染文字，加载完成后立即使用该字体渲染文字，如果超过一定时间，字体还没加载完成，则立即进入到 failure 阶段
-
失败（failure）阶段 这是浏览器加载字体的最后阶段，进入到该阶段时字体还没有加载完成，浏览器会视字体加载失败而直接使用后备字体渲染文字。
SO! 只需要设置 font-display 就可以了！害，白绕了一大圈，关于font-display 这篇文档写的很详细了，认真学习一下，我就不复制粘贴了
