最近很多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就大功告成了。
當然,如果在第一步始終無法訪問頁面,可以通過這里訪問進入,再復制到本地。