Chrome: 网络慢原因，导致的字体加载错误—Slow network is detected. Fallback font will be used while loading

[ohhoney1]

问题

加载一些字体文件时，如果网络环境较差，Chrome的开发者工具里可能会报错：

Slow network is detected. Fallback font will be used while loading

出现此错误信息，影响项目中调试bug。这个log一般不会影响页面的正常访问，只是没加载到字体而已。

分析

StackOverflow上有这个问题的相关讨论：why-does-this-slow-network-detected-log-appear-in-chrome，给出了出现此错误的原因：网速较慢时，当加载不到对应字体时，为了不出现空白，Chrome浏览器默认降级使用默认字体。

也给出了对应解决方法：

• 进入chrome://flags/#enable-webfonts-intervention-v2，把enable-webfonts-intervention-v2禁用掉即可。
• 如果能直接修改引用相关css文件时，可以直接添加属性：font-dispaly: block;了解有关css4新属性font-display的知识，MDN文档: font-display。

在新版本浏览器中（68.0.3440.106），报错信息变了，见下图：

谷歌针对该log已经给出参考答案，链接为https://www.chromestatus.com/feature/5636954674692096。即用上面的第2种方法。

总结

这个错误出现时机特殊，一般不会影响功能。Chrome更新频繁，这个问题后面可能又会有其他方法。
而在实际项目中，由于字体文件只有6kb左右，采用了把字体文件用Data URL协议，以base64的方式加载文件。举个实际应用的例子，在vue-cli3创建的工程项目中，修改url-loader处理font文件的大小限制。

chainWebpack: config => {
  config.module
    .rule('fonts')
    .use('url-loader')
    .loader('url-loader')
    .tap(options => {
       return {
          ...options,
	    limit: 10000 // 覆盖默认值4096
	  }
       })
}