原来是因为墙:有些网站Safari无法显示文字,但Chrome显示正常

今天我要大力抨击一个不存在的问题。

有一段时间了,登录Google Maps、Wordpress.org等网站会出现这样的情况,文字显示不全。

Wordpress GoogleMaps

与此同时Chrome并没有这样的问题。大概出现了几个月,由于这些站点用的比较少,我通常就开一下Chrome凑合了事。但这几天忽然想解决这个问题,于是静下来思考。

首先Chrome显示Safari不显示,不应该是网络问题(这个首先后来被证明是错的);这个时候Safari加载出来的空白网页是可以用鼠标去选择并复制文字的,并且Html文件是完整的加载出来的,甚至没有报错,有些有同样症状的网站报错也与此症状无关。并且由于Safari的开发工具不像Chrome那么聪明,所以没有找到问题的关键。

由于有那个错误的首先假设,我考虑是不是有什么本地的美化工具出错导致文字不显示,于是把所有的插件关闭、甚至清空了电脑上的PKG安装包。

但问题还存在。

我平时是使用规则代理科学上网的,当我开启全局代理的时候,这些网站忽然能完美显示了!

我脑海中忽然闪现一个词——WebFont。

WebFont是现代前端开发一个调用在线字体的手段,在国外非常流行,但由于中文字体包通常都有数兆之大,在中国并没有被广泛应用。我想是不是因为这些网站调用了WebFont而没有加载成功导致的呢?

于是我搜索了一下Html文件里的font字眼,找到了它引用的字体链接:https://fonts.gstatic.com/s/opensans/v13/cJZKeOuBrn4kERxqtaUH3ZBw1xU1rKptJj_0jans920.woff2

于是我添加了*.gstatic.com的代理规则,刷新——成功了,网站正常显示了。而这个gstatic.com,正是谷歌注册的域名。

Wordpress GoogleMaps

而之所以Chrome没有出现这个问题,想必是谷歌自己推广的WebFont,也做了加载不成功情况下使用本地字体替代的方案吧。

我博客可是有正经备案的,所以我不会在这里教你如何科学上网。我一直是一个坚持社会主义核心价值观和唯物主义的好青年,但每次遇到这种,人畜无害的网络资源不能使用,不能在中国使用的情况,我就会冒出一丝shandian的怒火,因为我们再次因为闭关锁国,落后于世界。

UPDATE 2017年02月21日18:28:15

找到了一个更先进快速的方法,safari可以加载本地样式表,于是创建一个css文件,填入

  • {font-family: 'Lantinghei SC';}

保存,在safari的偏好设置-高级-样式表中,加载这个css文件,就可以不请求谷歌的webfont文件了。当然这个解决方案的缺点是——所有的网站都变成了你指定的这个字体,好在兰亭黑比较好看。其实这是safari的一个bug啊,在另外一个地方看到关于这个的讨论:

UPDATE 2017-08-25 15:43:58
这次更新很重要,因为最近发现上面的方法都不好用了,调试发现还是WebFont的字体加载不进来,可我不是添加了代理规则吗?然后我看了一下Proxy.pac,惊奇的发现fonts.gstatic.com竟然被@@了(就是说被规则例外了),谁他喵的维护的这个Pac啊,这不坑爹么。一定是一个用Chrome的人!

于是乎现在的任务是去把shadowsocks-NG的本地Pac改掉,并且以后不要再从网上更新这个Pac了。

shadowsocks-NG的配置文件在这里:

/用户/{你的用户名}/.ShadowsocksX-NG

打开gfwlist.js,把带@@开头的几个gstatic.com的行直接删掉就好了。

完事儿了记得退出shadowsocks-NG客户端、退出safari后重启二者,终于完美了!!!!

Comments
Write a Comment
  • panda reply

    你好,你说的办法科学上网加上自定义CSS我都用了,结果 noip.com 上的文字还是显示不出来。请问是否还有什么建议?多谢。

  • 位毛 reply

    @panda https://weimaofiles.b0.upaiyun.com/blog/l2a2v.jpg 我这里显示的似乎是正常的诶,你用chrome工具看看资源加载全了没,要是用调用在线字体的话,直接登一下在线字体的链接看看连得上不呢😄