Google字体库引起的首页加载缓慢的解决方法

最新推荐文章于 2024-06-11 16:27:51 发布

shanliangliuxing

最新推荐文章于 2024-06-11 16:27:51 发布

阅读量5.5k

点赞数

分类专栏： Web前端开发

Web前端开发专栏收录该内容

72 篇文章 2 订阅

订阅专栏

今天看到博友－小思设计（http://52think.me/）的一条评论，说是我的博客看不到文字，当时还纳闷，我天天访问也没发现这个问题啊（公司电脑配了google服务的host，访问都正常）；

下午出去逛超市，回来上网，浏览博客的时候，首页加载很慢，广告和图片都显示了，就是没有文字，用Chrome 浏览器调试一下发现了问题，载入 themes.googleusercontent.com 站点的资源很慢，竟然达到了26秒，效果见下图；

在网页源码中丝毫找不到这个域名的影子，后来查看css文件才看到，头部文件导入了Google字体库，而正是因为这个字体库会载入 themes.googleusercontent.com 的资源，所以才导致访问很慢；（我也不记得是不是自己加的代码了）

知道原因后，问题就好解决了，删除或注释掉 font.googleapis.com 的那条css就可以了，注释方法如下图;

上述方法最简单方便，如果非要用这个字体库的话，在css文件中加入如下css样式也可以，这个方法是将web字体格式化。

@font-face {
font-family: 'Miltonian';
font-style: normal;
font-weight: 400;
src: local('Miltonian'), local('Miltonian-Regular'), url(http://themes.googleusercontent.com/static/fonts/miltonian/v5/DVUl6K_XDo9HSLlx2JoxNT8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}
@font-face {
font-family: 'Bitter';
font-style: normal;
font-weight: 400;
src: local('Bitter-Regular'), url(http://themes.googleusercontent.com/static/fonts/bitter/v4/SHIcXhdd5RknatSgOzyEkA.woff) format('woff');
}

p.s.Google在中国真的太悲剧了，但是又离不开它。

版权声明：本文采用BY-NC-SA协议进行授权，转载张衡Henry的文章请注明出处
原文地址：http://www.izhangheng.com/font-googleapis-themes-googleusercontent-com-slow

@font-face的用法

转自：http://www.webhek.com/font-face/

几乎所有浏览器(包括最古老的IE6)也支持的网络字体@font-face的用法是：

@font-face {
  font-family: 'MyWebFont';
  src: url('webfont.eot'); /* IE9 Compat Modes */
  src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('webfont.woff') format('woff'), /* Modern Browsers */
       url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

但进入到现代浏览器时代后，WOFF格式的字体受到了普遍的支持，所有，你可能只需要这样写：

@font-face {
  font-family: 'MyWebFont';
  src: url('myfont.woff') format('woff'), /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
       url('myfont.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5, Opera 10+, Safari 3—5 */
}

或者只含WOFF格式：

@font-face {
  font-family: 'MyWebFont';
  src: url('myfont.woff') format('woff')； /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

然后，像这样使用：

body {
  font-family: 'MyWebFont';
}

@font-face基本知识

在@font-face网络字体技术之前，浏览器显示网页上文字使用的字体只能限制在电脑里已经安装的几款字体里。而且每个人的电脑里安装的字体是因人而异的。@font-face的作用是从网上下载并使用自定义字体，使页面显示字体不依赖用户的操作系统字体环境。

网络字体(Web font)的效率

你需要注意的是，字体文件的体积可能非常的大，而且需要额外的HTTP连接，这些都会降低网站页面的加载速度。所以，在使用网络字体@font-face前，你需要清楚它的利与弊，判断网络字体是否真的有必要用在你的网站页面上。

如果你决定使用个性化自定义字体，可以采用一个非常灵活的方法，就是只加载尽量少的字体字符数和尽量少的字体风格(粗体/斜体)。例如，如果你使用谷歌字体，你可以只加载指定的字体风格组合：

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

或者指定加载那些字符的字体。

网络字体(Web font)文件格式

目前最主要的几种网络字体(web font)格式包括WOFF，SVG，EOT，OTF/TTF。

WOFF

WOFF是Web Open Font Format几个词的首字母简写。这种字体格式专门用于网上，由Mozilla联合其它几大组织共同开发。WOFF字体通常比其它字体加载的要快些，因为使用了OpenType (OTF)和TrueType (TTF)字体里的存储结构和压缩算法。这种字体格式还可以加入元信息和授权信息。这种字体格式有君临天下的趋势，因为所有的现代浏览器都开始支持这种字体格式。

SVG / SVGZ

Scalable Vector Graphics (Font). SVG是一种用矢量图格式改进的字体格式，体积上比矢量图更小，适合在手机设备上使用。只有iPhone上的Safari(4.1)之前的版本支持它。目前火狐、IE都不支持SVG字体格式。火狐推迟对SVG字体的支持，重点放在WOFF格式上。SVGZ是压缩版的SVG。