當某一天你做的網站載入速度過慢 但是後代程式碼有沒有什麼問題的時候 你可能需要看本篇文章了

本文講的是載入谷歌字型庫導致頁面載入速度過慢的問題

當我們使用bootstrap 或者基於bootstrap的前端UI框架時 有時會出現頁面長時間載入不出來的問題 比如我使用的adminEx 在style.css中有這樣一段程式碼:

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic,800,800italic);

如果是上面寫的谷歌的字型庫路徑的話 那麼目前有幾種解決方案

     有的解決方案可能還有寫360的字型庫 不過360的已經停止運營了 所以現在可以使用第一種方式

2 . 刪除該引入

3. 這是我推薦的方式 可以直接把對應的字型庫css檔案下載到本地 也不用管第三方的字型庫是否還在運營了

http://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic,800,800italic

@CHARSET "UTF-8";
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  src: local('Open Sans Light'), local('OpenSans-Light'), url(https://gstatic.cat.net/s/opensans/v14/DXI1ORHCpsQm3Vp6mXoaTXhCUOGz7vYGh680lGh-uXM.woff) format('woff');
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans Regular'), local('OpenSans-Regular'), url(https://gstatic.cat.net/s/opensans/v14/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-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(https://gstatic.cat.net/s/opensans/v14/MTP_ySUJH_bn48VBG8sNSnhCUOGz7vYGh680lGh-uXM.woff) format('woff');
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  src: local('Open Sans Bold'), local('OpenSans-Bold'), url(https://gstatic.cat.net/s/opensans/v14/k3k702ZOKiLJc3WVjuplzHhCUOGz7vYGh680lGh-uXM.woff) format('woff');
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 800;
  src: local('Open Sans ExtraBold'), local('OpenSans-ExtraBold'), url(https://gstatic.cat.net/s/opensans/v14/EInbV5DfGHOiMmvb1Xr-hnhCUOGz7vYGh680lGh-uXM.woff) format('woff');
}
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 300;
  src: local('Open Sans Light Italic'), local('OpenSans-LightItalic'), url(https://gstatic.cat.net/s/opensans/v14/PRmiXeptR36kaC0GEAetxh_xHqYgAV9Bl_ZQbYUxnQU.woff) format('woff');
}
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 400;
  src: local('Open Sans Italic'), local('OpenSans-Italic'), url(https://gstatic.cat.net/s/opensans/v14/xjAJXh38I15wypJXxuGMBobN6UDyHWBl620a-IRfuBk.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(https://gstatic.cat.net/s/opensans/v14/PRmiXeptR36kaC0GEAetxn5HxGBcBvicCpTp6spHfNo.woff) format('woff');
}
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 700;
  src: local('Open Sans Bold Italic'), local('OpenSans-BoldItalic'), url(https://gstatic.cat.net/s/opensans/v14/PRmiXeptR36kaC0GEAetxjqR_3kx9_hJXbbyU8S6IN0.woff) format('woff');
}
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 800;
  src: local('Open Sans ExtraBold Italic'), local('OpenSans-ExtraBoldItalic'), url(https://gstatic.cat.net/s/opensans/v14/PRmiXeptR36kaC0GEAetxkCDe67GEgBv_HnyvHTfdew.woff) format('woff');
}
 

https://fonts.googleapis.com/icon?family=Material+Icons  : 

/* fallback */
@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(https://gstatic.cat.net/s/materialicons/v27/2fcrYFNaTjcS6g4U3t-Y5RV6cRhDpPC5P4GCEJpqGoc.woff) format('woff');
}

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}
 

fonts.googleapis.com/earlyaccess/notosanskannada.css :

/*
 * Noto Sans Kannada (Kannada) http://www.google.com/fonts/earlyaccess
 */
@font-face {
  font-family: 'Noto Sans Kannada';
  font-style: normal;
  font-weight: 400;
  src: url(//gstatic.cat.net/ea/notosanskannada/v3/NotoSansKannada-Regular.eot);
  src: url(//gstatic.cat.net/ea/notosanskannada/v3/NotoSansKannada-Regular.eot?#iefix) format('embedded-opentype'),
       url(//gstatic.cat.net/ea/notosanskannada/v3/NotoSansKannada-Regular.woff2) format('woff2'),
       url(//gstatic.cat.net/ea/notosanskannada/v3/NotoSansKannada-Regular.woff) format('woff'),
       url(//gstatic.cat.net/ea/notosanskannada/v3/NotoSansKannada-Regular.ttf) format('truetype');
}
@font-face {
  font-family: 'Noto Sans Kannada';
  font-style: normal;
  font-weight: 700;
  src: url(//gstatic.cat.net/ea/notosanskannada/v3/NotoSansKannada-Bold.eot);
  src: url(//gstatic.cat.net/ea/notosanskannada/v3/NotoSansKannada-Bold.eot?#iefix) format('embedded-opentype'),
       url(//gstatic.cat.net/ea/notosanskannada/v3/NotoSansKannada-Bold.woff2) format('woff2'),
       url(//gstatic.cat.net/ea/notosanskannada/v3/NotoSansKannada-Bold.woff) format('woff'),
       url(//gstatic.cat.net/ea/notosanskannada/v3/NotoSansKannada-Bold.ttf) format('truetype');
}