Typecho博客从谷歌云搬到腾讯云,顺便解决了困扰已久的字体跨域问题。

CDN字体跨域

此问题原先将博客放在谷歌云,使用香港VPS反代的时候就已经存在。就是死活无法加载Handsome主题中的fontello和sourcesanspro字体,昨天折腾了一番才发现原来是跨域访问造成的。

目前博客的部署是这样的

主站为香港VPS —— 国内备案VPS(静态加速)—— 国内VPS使用CDN

无法加载字体情况如下

① 所有资源放在服务器上,直接访问不存在问题;

② 静态文件转移到国内自建服务器上,无法加载;

③ 静态文件转移并将静态服务器加入CDN,无法加载。

尝试性解决方法

针对②,将静态文件放置在国内服务器上,可以利用大厂的BGP节点对静态内容进行加速,理论上已经不需要加入CDN服务,加速效果也是很不错的。

这种情况下依然存在字体跨域无法加载,在国内VPS上站点设置文件中,加入以下代码可以解决,内容放置于
server{…}之中,宝塔用户直接放在
root /www/wwwroot/xxx;
后面一行即可。

location ~* \.(ttf|ttc|otf|eot|woff|font.css)$ {
        add_header Access-Control-Allow-Origin "*";
    }

保存配置并重启Nginx服务,清空缓存重新访问网站,问题解决。

问题③,我使用了腾讯云的CDN,问题在此出现,在网上很多解决方案是添加Response Header配置,但是测试了好几遍,不管是添加源站域名,加速域名还是*号,均无法解决。

最终找到了加载字体的文件,发现加载路径是
../assets/font/fontello.woff
抱着试一下的心态,将..换成了绝对路径
oss.bzgrzok.cn/assets/font/fontello.woff
清空缓存,刷新网页,问题解决了。
删除线内容错误。

最新解决静态站加速外加CDN的方法

在问题②解决方案的基础上,再将腾讯云CDN域名管理高级设置中添加Response Header配置规则,头部操作是设置,不是添加,如下图:
Access-Control-Allow-Origin

网上有将字体文件转换成base64编码的方法,转换出来后将其直接写入css,本人的想法是这种方法加大了单个文件的体积,不利于浏览器加载,所以没有尝试。

最后修改:2021 年 03 月 18 日 05 : 17 PM
如果觉得我的文章对你有用,请随意赞赏
END
本文作者:
文章标题:解决CDN字体及CSS跨域无法加载
本文地址:https://lapuhou.com/wlbj/166.html
版权说明:若无注明,本文皆拉普猴原创,转载请保留文章出处。