解決Pinpoint首頁載入fonts.googleapis.com Google字體報錯問題

問題描述


pinpoint web部署完成後,在瀏覽器輸入地址訪問,pinpoint 界面打開耗時較長甚至有時打不開,打開瀏覽器的開發模式控制檯,可看到如下的錯誤:
1. [Intervention] Slow network is detected. See https://www.chromestatus.com/feature/5636954674692096 for more details. Fallback font will be used while loading: http://fonts.gstatic.com/s/lato/v14/S6uyw4BMUTPHjx4wXg.woff2
2. [Intervention] Slow network is detected. See https://www.chromestatus.com/feature/5636954674692096 for more details. Fallback font will be used while loading: http://fonts.gstatic.com/s/lato/v14/S6uyw4BMUTPHjxAwXjeu.woff2
出現這個問題的原因是首頁引入了Google字體庫,而通常谷歌是被屏蔽的,特別是在內部服務器部署的項目一般都是不能訪問外網的。

解決方案


打開首頁文件pinpoint-web-1.6.2/webapps/ROOT/index.html,註釋以下代碼:

<!--<link href='//fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>-->

並在該文件添加以下代碼,引入後續要新建的css文件:

<link href='lib/css/google.css' rel='stylesheet' type='text/css'>

保存修改並退出,那現在我們需要在 pinpoint-web-1.6.2/webapps/ROOT/lib/css 目錄下新建google.css文件。上面註釋的一句代碼中的鏈接可以訪問看下具體內容,在瀏覽器輸入http://fonts.googleapis.com/css?family=Lato能看到如圖的內容(前提是你可以打開谷歌的網址,不然是訪問不了的):
這裏寫圖片描述
google.css文件內容根據上述圖片中內容稍作改動得到的,如下:

/* latin-ext */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  src: local('Lato Regular'), local('Lato-Regular'), url(../fonts/S6uyw4BMUTPHjxAwXjeu.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  src: local('Lato Regular'), local('Lato-Regular'), url(../fonts/S6uyw4BMUTPHjx4wXg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

從google.css文件內容可看到引入了../fonts/目錄下(也就是pinpoint-web-1.6.2/webapps/ROOT/lib/fonts/目錄)的兩個字體文件S6uyw4BMUTPHjxAwXjeu.woff2S6uyw4BMUTPHjx4wXg.woff2
如何下載該字體文件呢?
若你可以訪問到www.google.com,則步驟如下:
1. 瀏覽器輸入http://fonts.gstatic.com/s/lato/v14/S6uyw4BMUTPHjxAwXjeu.woff2即可下載v14/S6uyw4BMUTPHjxAwXjeu.woff2文件。
2. 瀏覽器輸入http://fonts.gstatic.com/s/lato/v14/S6uyw4BMUTPHjx4wXg.woff2即可下載S6uyw4BMUTPHjx4wXg.woff2文件。

若你不可以訪問google的話,可去這裏下載:https://download.csdn.net/download/huixueyi/10593460https://download.csdn.net/download/huixueyi/10593470
現在將這兩文件上傳到pinpoint-web-1.6.2/webapps/ROOT/lib/fonts/ 下面。
最後,重啓pinpoint-web即可,再次訪問web界面就會發現無報錯並且加載快了許多。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章