下载谷歌字体woff2放到服务器cancel加载失败provisional headers are shown

  由于谷歌被墙的原因,无法直接引用谷歌的css资源和字体,要想引用谷歌的字体,可以先翻墙,将css文件中的woff2,woff之类的字体文件下载下来放到自己的服务器上。

  最近将谷歌字体Open Sans字体下载下来放到自己服务器后,web服务器已经配置好woff,woff2字体文件的mime类型font/woff2,可以访问woff2字体文件弹出下载框,但是加载css文件,本地file测试就是无法使用Open Sans字体,没有效果。

  用firefox浏览器查看网络字体文件正常下载,大小也是对的,但是谷歌字体就是无效。用谷歌浏览器查看后发现下载字体文件出错,网络状态为canceled。

谷歌字体woff2 network canceled

  查看响应头,请求头出现警告,provisional headers are shown,如下图

provisional headers are shown

  看来本地file加载的网络css文件中包含了字体,加载字体文件会出现跨域错误。于是给google-fonts文件夹加上Access-Control-Allow-Origin响应头,刷新,正常加载字体,谷歌Open Sans字体效果也出来了。看来woff字体文件加载需要同源,不同源加载不了字体文件。

下载谷歌字体woff2放到服务器cancel加载失败provisional headers are shown

  经过翻墙,清空缓存浏览器缓存,从谷歌网站加载css测试,谷歌的css字体文件也是添加过Access-Control-Allow-Origin响应头的。

  总结:导入的外部css文件如果包含字体,由于不通源,css中的字体文件将会无法下载,无法使用指定的字体。解决办法就是外部字体设置过Access-Control-Allow-Origin响应头允许跨域加载。或者自己将css文件中的字体文件下载放到自己的服务器,从自己的服务器加载字体文件,同源就行了。

  提供2个css测试,第一个没有设置响应头,无法使用谷歌的Condiment字体,第二个设置过允许跨域加载woff2字体文件,可以显示出Condiment字体效果。

http://www.w3dev.cn/demo/google-fonts-no-header/Condiment.css

http://www.w3dev.cn/demo/google-fonts/Condiment.css


原创文章,转载请注明出处:下载谷歌字体woff2放到服务器cancel加载失败provisional headers are shown

评论(0)Web开发网
阅读(441)喜欢(0)不喜欢(0)JavaScript/Ajax开发技巧