当某一天你做的网站加载速度过慢 但是后代代码有没有什么问题的时候 你可能需要看本篇文章了
本文讲的是加载谷歌字体库导致页面加载速度过慢的问题
当我们使用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时自行下载即可