解決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就大功告成了。

當然,如果在第一步始終無法訪問頁面,可以通過這里訪問進入,再復制到本地。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM