解决页面中引用了谷歌字体库访问缓慢的问题
这段时间做一个项目的时候遇到了页面访问谷歌字体库加载缓慢的问题。因为引用了别人的页面模板,其中需要使用到谷歌字体也就是:
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700" rel="stylesheet">
但是为了开发和调试的方便,设置了浏览器禁止缓存,每次刷新页面非常缓慢,从chrome的F12调试模式中可以看到:
这里可以看到谷歌字体的加载时间达到了21s多,主要原因还是因为服务器访问速度的问题。
一开始看网上的帖子说可以把链接指向360的公共库,即改成如下:
<link href="http://fonts.useso.com/css?family=Source+Sans+Pro:300,400,600,700" rel="stylesheet">
但是发现根本无法访问,原因是360的公共库已经迁移到了:https://cdn.baomitu.com/
新的前端公共库中也有google字体库。
但是在另外一些帖子中看到了将google字体库本地化的方法,便尝试了一下,效果不错。具体步骤如下:
1、下载google字体库文件
在csdn的下载频道上有很多可以下载,但是需要金币。还有一中比较笨的方式:
1、在浏览器中直接访问:https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700
也就是页面中引用的google字体地址,得到的内容是css代码,创建一个css文件,将其中的代码保存下来:
代码片段如下:
/* cyrillic-ext */
@font-face {
font-family: 'Source Sans Pro';
font-style: normal;
font-weight: 300<