问题最近在做项目的时候，遇到这样一个问题：网页的标题要使用设计者指定的中文字体，字体文件比较大，而且浏览器加载字体文件过程中不会显示使用该字体的文字，所以在第一次打开网页时会出现一段时间“Notitle”的bug。解决方案对于这个问题，笔者可以想到以下解决方案（欢迎补充）：把文字做成png图片，或者把路径改成SVG图片，考虑做成base64嵌入到CSS文件中。使用字体工具删除字体包中不用的字符，以减小字体文件的大小（npm上也有这么优秀的JS库）。方案一的升级版，在所有使用该字体的文字中，将首屏出现的文字做成图片，后面的文字仍然使用字体包，首页加载时加载字体包打开。方案二升级版中，向服务器请求字体时，服务器解析文档中使用的所有字符，动态生成字体包返回给浏览器。在加载字体的过程中，首先使用最接近目标字体的安全字体显示，待字体文件加载完成后再替换。杀了设计师，想用什么就用什么。方案比选由于后续页面内容中有很多文字会使用该字体，并且考虑到网站日后的维护成本，方案1和方案2不适合本项目。第三种方案最省事，适合快速开发，但代码复用性不高，程序不够健壮。例如，在网速较低的情况下，用户可能在字体包未加载完毕时滑到了下一步。页面，该页面有使用目标字体包的文字不显示。第四种方案需要后端开发的配合。需要考虑如何判断所有使用的字符，而当JS向文档写入新字符时，需要请求增量字体包，这将大大增加CDN服务器。负担（主要是怕跟后端开发扯皮）。第五个解决方案是被迫选择。在用户眼皮底下改变字体，会极大地影响体验。优点是字体是异步加载的，不会阻塞文字显示。最后一种解决方案的成本比较高，需要耗费开发者的余生。好处是可以从根本上解决这个BUG，后患无穷。赶时间的程序员可以试试。结合项目特点，最终选择方案5。整个过程的逻辑很简单：首先将标题中使用的类在CSS中定义为最接近目标字体的安全字体，然后等待字体文件加载，加载完成后，替换标题的类别与自定义字体的类别。首先设置两个CSS属性，一是默认字体使用最接近目标字体的安全字体，二是自定义字体：/*Definethefont*/@font-face{font-family:Lanting_light;src:url("../res/font/goDieDesigner.woff");}/*默认安全字体*/.lanting_l{font-family:Arial,Helvetica,sans-serif;}/*自定义字体*/.lanting_light{font-family:"Lanting_light",Arial,Helvetica,sans-serif;}元素设置为默认字体：
