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

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

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

当我们使用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时自行下载即可

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

web字体库加载优化_优化Web字体以提高性能：最新技术
web字体库加载优化 This article is part of a series created in partnership with SiteGround. Thank you for su ...
解决fonts.googleapis.com/css加载卡，谷歌字体本地加载下载
http://www.xgllseo.com/?p=5808 google不能访问这个不解释,最可靠的方法就是本地加载谷歌字体资源 @import url(https://fonts.googleap ...
网站卡在“fonts.googleapis.com”谷歌字体，解决方案
解决方案 fonts.googleapis.com 加载慢,现在的 fonts.useso.com 也慢,所以就从google上扒下来,把css和字体文件都放到本地加载方式 @import url( ...
解决页面中引用了谷歌字体库访问缓慢的问题
解决页面中引用了谷歌字体库访问缓慢的问题这段时间做一个项目的时候遇到了页面访问谷歌字体库加载缓慢的问题.因为引用了别人的页面模板,其中需要使用到谷歌字体也就是: <link href=&quo ...
2023-06-16最新谷歌fonts公共资源，解决引入fonts.googleapis.com/css字体网页响应缓慢问题
昨天搭建了个最新版本WordPress 5.7.2版本,访问后台发现速度特别慢,前台页面打开也出奇的慢,于是就问了度娘和CSDN前辈,结果一大堆说要找好服务器啦.图片优化啦.换成fonts.useso ...
chrome 自动加载ajax.googleapis,使用Redirector插件解决googleapis公共库加载的问题
最近访问一些面向国外的网站总是会出现ajax.googleaips.com无法加载的情况.以下为加载stackoverflow时的情境: 图1 -无法加载的google公共库问题的原因是谷歌没有在国 ...
ajax.googleapis firefox,使用Redirector插件解决googleapis公共库加载的问题【转】
最近访问一些面向国外的网站总是会出现ajax.googleaips.com无法加载的情况.以下为加载stackoverflow时的情境: 图1 -无法加载的google公共库问题的原因是谷歌没有在国 ...
js加载第三方字体,检测加载完成事件
最近在做一个项目涉及到加载第三方字体的问题,首批需要支持一百多种字体,然后首先想到的就是@fant-face,但是在实际应用中发现无法满足当前需求. 目前的项目是用canvas的一个开源库fabric ...
google fonts 使用方案，解决引入fonts.googleapis.com/css字体网页响应缓慢问题
google fonts 国内使用方案推荐 google fonts 方案一本地加载字体包下载字体于本地绝对路径调用css字体修改加载方式方案二更换字体源当前WordPress等许多开 ...

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

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

最新文章

热门文章