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

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

Google字体库引起的首页加载缓慢问题

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

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

Google字体库引起的首页加载缓慢问题

上述方法最简单方便，如果非要用这个字体库的话，在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。

EOT

Embedded Open Type。这是微软创造的字体格式(是微软在15年前发明了网络字体@font-face)。这种格式只在IE6/IE8里使用。

OTF / TTF

OpenType Font 和 TrueType Font。部分的因为这种格式容易被复制(非法的)，这才催生了WOFF字体格式。然而，OpenType有很多独特的地方，受到很多设计者的喜爱。

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

电脑卡顿，软件运行加载缓慢的解决方法
日常办公时电脑卡顿,软件运行加载缓慢的解决方法. 双击桌面的此电脑图标,或者使用win键+E键的快捷方式. 2.进入计算机C盘中的Temp文件夹内. 路径:C:\Users\Administrator ...
html字体文件过大导致加载缓慢如何解决？
在网页设计中,美工通常要求前端使用自己的定义的字体,比如苹果的字体PingFangMedium.ttf, 而实际上除了英文和数字好看外,中文并不好看,特别是windows下,中文发虚.但是字体文件却特 ...
Adobe Flash player 10 提示：Error#2044:未处理的IOErrorEvent. text=Error#2036:加载未完成的解决方法
Adobe Flash player 10 提示:Error#2044:未处理的IOErrorEvent. text=Error#2036:加载未完成的解决方法参考文章: (1)Adobe Fla ...
Eclipse无法编译，提示错误“找不到或者无法加载主类”解决方法
Eclipse无法编译,提示错误"找不到或者无法加载主类"解决方法参考文章: (1)Eclipse无法编译,提示错误"找不到或者无法加载主类"解决方法 (2) ...
“当前不会命中断点还没有为该文档加载任何符号”解决方法
"当前不会命中断点还没有为该文档加载任何符号"解决方法参考文章: (1)"当前不会命中断点还没有为该文档加载任何符号"解决方法 (2)https://ww ...
dll侧加载_WORD打开时出现加载DLL错误解决方法
WORD 打开时出现加载 DLL 错误解决方法 1 . 接下来看看解决办法, 按组合键 WIN + R 或者按开始 --- 运行, 打开运行窗口, 2 .在运行对话框中输入或者复制粘贴 " ...
Hibernate的懒加载session丢失解决方法
在web.xml加入spring提供的过滤器,延长session的生命周期 <filter><filt ...
【Spring MVC】错误: 找不到或无法加载主类解决方法
[Spring MVC] 错误: 找不到或无法加载主类解决方法最近在学习Spring,在学习SpringMVC过程中,将web.xml.Dispatcher-servlet.xml.applica ...
react 中使用import()实现按需加载报错解决方法 --‘import’ and ‘export’ may only appear at the top level
react 中使用import()实现按需加载报错解决方法 --'import' and 'export' may only appear at the top level 参考文章: (1)rea ...

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