2018年10月4日星期四

解决fonts.gstatic.com无法访问

最近很多google的服务又在大陆地区受限了,原因不做过多讨论。屏蔽这些服务不仅仅意味着gmail,谷歌学术等方便的工具使用受到限制,更意味着很多寄托于google的web服务无法使用。wordpress很多的主题都使用了google上的字体文件、css文件、js文件等,屏蔽之后访问速度会奇慢无比甚至无法打开。

我这个博客主题也和很多wordpress主题一样使用了google fonts。一般不是登陆状态时候看不出什么异常,而如果处于登陆状态,并不通过缓存加载页面时(即使用ctrl+f5),会发现fonts.gstatic.com服务器根本无法连上。也就是说其实这个问题对一般访客没有任何影响,且不是很容易被发现。但既然发现了我们就要解决掉它。

解决方法:
一、将文件下载到本地
1.下载对应的css。这一步可以通过chrome、firefox等提供的审查元素功能。切换到网络(network)页面,找到无法访问的那个链接。比如我这里的是http://fonts.gstatic.com/css?family=Open+Sans%3A300italic%2C400italic%2C600italic%2C300%2C400%2C600&subset=latin%2Clatin-ext&ver=3.9,通过发送请求或者多次尝试浏览器打开之后,把里面的css内容复制到本地。

2.在下载的css文件中,批量查找出所有引用的字体文件的链接,比如:

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  src: local('Open Sans Light'), local('OpenSans-Light'), url(http://fontstatic.useso.com/s/opensans/v10/DXI1ORHCpsQm3Vp6mXoaTRa1RVmPjeKy21_GQJaLlJI.woff) format('woff');
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans'), local('OpenSans'), url(http://fontstatic.useso.com/s/opensans/v10/u-WUoqrET9fUeobQW7jkRT8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  src: local('Open Sans Semibold'), local('OpenSans-Semibold'), url(http://fontstatic.useso.com/s/opensans/v10/MTP_ySUJH_bn48VBG8sNSha1RVmPjeKy21_GQJaLlJI.woff) format('woff');
}
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 300;
  src: local('Open Sans Light Italic'), local('OpenSansLight-Italic'), url(http://fontstatic.useso.com/s/opensans/v10/PRmiXeptR36kaC0GEAetxrsuoFAk0leveMLeqYtnfAY.woff) format('woff');
}
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 400;
  src: local('Open Sans Italic'), local('OpenSans-Italic'), url(http://fontstatic.useso.com/s/opensans/v10/xjAJXh38I15wypJXxuGMBtIh4imgI8P11RFo6YPCPC0.woff) format('woff');
}
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 600;
  src: local('Open Sans Semibold Italic'), local('OpenSans-SemiboldItalic'), url(http://fontstatic.useso.com/s/opensans/v10/PRmiXeptR36kaC0GEAetxmWeb5PoA5ztb49yLyUzH1A.woff) format('woff');
}
可以直接通过正则匹配:https://fonts.gstatic.*?.woff 找到所有的链接,然后批量下载(可以用迅雷或者其他下载工具),存储到本地服务器中。

3.把上面css里的woff字体文件的路径,修改成刚才保存的路径。

4.找到wp-includes 里面的 script-loader.php 有一行:

$open_sans_font_url = "//fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,300,400,600&subset=$subsets";
把里面的链接修改为本地存储的css的链接,即可正常访问了。

这种方法的好处是不再依赖外部链接,但缺点是如果更新主题、或者更新wordpress可能会导致访问失效。

二、借助360 常用前端公共库

首先上链接: http://libs.useso.com/ 里面缓存了Google的前端公共库和免费字体库,不得不说,虽然是360做的东西,但确实很给力,收录全,访问速度快且稳定,点个赞吧。

这下就非常方便了,只需要执行方法1的第4步,把fonts.googleapis.com 换成 fonts.useco.com就大功告成了。

当然,如果在第一步始终无法访问页面,可以通过这里访问进入,再复制到本地。

一键分享 Share

评论

换原始留言系统