fonts.googleapis.com 谷歌字体库加载过慢解决方案

最新推荐文章于 2024-05-11 09:53:02 发布

举头三尺有宋浩

最新推荐文章于 2024-05-11 09:53:02 发布

阅读量9k

点赞数 6

分类专栏：前端文章标签： bootstrap 谷歌字体库

本文链接：https://blog.csdn.net/q690080900/article/details/78338505

版权

前端专栏收录该内容

0 篇文章 0 订阅

订阅专栏

当某一天你做的网站加载速度过慢但是后代代码有没有什么问题的时候你可能需要看本篇文章了

本文讲的是加载谷歌字体库导致页面加载速度过慢的问题

当我们使用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);

或者其他需要**的方式才能访问到的地址时由于无法访问该网站就会导致整个页面的加载速度变得特别慢有时长达半分钟甚至更长

如果是上面写的谷歌的字体库路径的话那么目前有几种解决方案

1 . 把fonts.googleapis.com 换成 fonts.cat.net这是链接: 这篇博文有详细方案

有的解决方案可能还有写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');
}

以上是列举了几个常用的如果需要需要的css时自行下载即可