那一天，人类终于回想起了曾一度被它们所支配的恐怖和被囚禁于鸟笼中的那份屈辱。仰望高墙，Google远去。在没有Google的结界里，还写个球代码...

这一轮风头似乎还没有任何结束的迹象，虽然我无奈地先移除了google字体并希望不日的将来就可以恢复，但现在看来却是这么的遥遥无期。最后，终于无法忍受系统默认字体的丑陋，在歇斯底里的纠结里翻越高山，存下火种——缓存Google字体到本地实在是无奈的选择。

关于Google字体以及现代网络字体格式WOFF，我在很早以前就写过一篇WOFF和Google Font API，当时，WOFF的浏览器支持环境还不是很好，不过现在的情况以及大为改观。对于像Ghost默认的Casper这样本来就抛弃低版本IE的主题来说，缓存所有字体的版本是毫无意义的，对绝大部分环境来说，缓存WOFF已经足够了。

下面是Casper主题的链接形式，其实一目了然，Casper请求了Noto Serif标准体和粗体，以及标准斜体。外加Open Sans的标体和粗体。

http://fonts.googleapis.com/css?family=Noto+Serif:400,700,400italic|Open+Sans:700,400

根据浏览器的不同，google返回的样式文件不同，但对于现代浏览器来说，返回的是优先使用WOFF格式的样式表。然后将其中的字体文件WOFF全部下载到自己的服务器，并修改CSS的引用并放入站点的样式里：

@font-face {
  font-family: 'Noto Serif';
  font-style: normal;
  font-weight: 400;
  src: local('Noto Serif'), local('NotoSerif'), url(http://swordair.com/assets/fonts/google-cache/NotoSerif.woff) format('woff');
}
@font-face {
  font-family: 'Noto Serif';
  font-style: normal;
  font-weight: 700;
  src: local('Noto Serif Bold'), local('NotoSerif-Bold'), url(http://swordair.com/assets/fonts/google-cache/NotoSerif-Bold.woff) format('woff');
}
@font-face {
  font-family: 'Noto Serif';
  font-style: italic;
  font-weight: 400;
  src: local('Noto Serif Italic'), local('NotoSerif-Italic'), url(http://swordair.com/assets/fonts/google-cache/NotoSerif-Italic.woff) format('woff');
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans'), local('OpenSans'), url(http://swordair.com/assets/fonts/google-cache/OpenSans.woff) format('woff');
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  src: local('Open Sans Bold'), local('OpenSans-Bold'), url(http://swordair.com/assets/fonts/google-cache/OpenSans-Bold.woff) format('woff');
}

我想我还不至于闲到写一个脚本去抓取所有的字体格式文件，低版本IE还是早死早超生吧:)

另外，在Ghost后台其实也是有使用Google字体的，这会使得加载后台异常缓慢，别担心服务器忙，其实只是Google傲娇了而已。

7月1日，Google Reader就要离开我们了，伟大产品的谢幕，不仅让人扼腕叹息，人们议论着、申诉着、到处寻找替代品的同时，Google这个曾经伟大的公司渐渐蜕变成一个精明的商人——天下没有免费的午餐，Google果然也不是什么好鸟～

各大网站的评论炸开了锅，数十万人请愿，但希望依旧渺茫。今天翻开Google，1000+？算是吧，但那又怎么样呢？我还是会从里面筛选出自己需要的信息，虽然每天花了很多时间不厌烦的刷着cnbeta的新闻看喷子们和成为其中的一员，但也不时选几篇精悍的好文细细读上半天。一想到这种光景已经不能持续太久，仍然有些心酸...Feedly？暂时还是算了吧，那种杂志式的阅读方式实在凌乱，客户端能力也与一些付费的GR客户端相差甚远，只是日后的选择真的不多，由不得你挑肥拣瘦。

RSS从来就没有流行过，这的确是事实，但即便如此，RSS依旧是我们这种聚合系阅读者获取信息的重要方式。作为一个博主，更加明白RSS的重要。我甚至刻意控制自己博客RSS的输出，过滤掉那些个人的无关痛痒的博文，而只输出技术类相关的部分。不过，恐怕这也就到今天为止了，Google Reader即将关闭，我也打算开放所有的RSS输出，不在限制RSS。

截至到今天，博客主页在Google Reader里的订阅量是184，感谢这些订阅了我博客的朋友们，谢谢你们的支持。如果没有你们的阅读，我想我不会继续坚持将博客写下去。众多博客倒下了，但也有更多新的博客建立起来，Google Reader倒下了，相信也会有更多新的继任者肩负互联网信息聚合的使命诞生。

虽然离最后期限还有3个月之久，但Google Reader已然死去。最后，记录下Google Reader的统计数据，算是留作纪念：

From your 81 subscriptions, over the last 30 days you read 6,868 items, clicked 47 items, starred 6 items, and emailed 0 items.

Since June 7, 2010 you have read a total of 110,370 items.

在之前的 Google Reader的颓然改变 里我吐槽了google reader的这次改版实在是糟糕透了，但是现在看来，自己似乎也渐渐习惯了——这得益于Google的不断的改进，扭转很多不如意的方面。比如内容区添加了清晰的边线，工具条的高度被压缩，甚至如果窗口高度不高的情况下，搜索栏和工具栏的空间会被压缩的更多。当然，直到现在我还是没法接受那种泛白的背景，长时间阅读还是很累人的。

但其实改版里还是有很多令人眼前一亮的地方，就比如webkit优化的滚动条，更为美观也更加节省空间。

于是我也整了整自己网站的滚动条，基本上就是自己写的简化版的Google滚动条，代码更少更简单，直接加到CSS文件里就搞定了。

::-webkit-scrollbar{width:12px;height:12px;}
::-webkit-scrollbar-button{}
::-webkit-scrollbar-button:start:decrement,
::-webkit-scrollbar-button:end:increment{width:0;height:0;}
::-webkit-scrollbar-track-piece{background-clip:padding-box;background-color:whitesmoke;border:solid white;}
::-webkit-scrollbar-track-piece:vertical{box-shadow:inset 1px 0 0 rgba(0,0,0,.14),inset -1px 0 0 rgba(0,0,0,.05);border-width:0;}
::-webkit-scrollbar-track-piece:horizontal{box-shadow:inset 0 1px 0 rgba(0,0,0,.14),inset 0 -1px 0 rgba(0,0,0,.05);border-width:0;}
::-webkit-scrollbar-thumb{background-color:rgba(0,0,0,.2);background-clip:padding-box;border:solid transparent;}
::-webkit-scrollbar-thumb:vertical{border-width:1px 1px 1px 2px;min-height:24px;box-shadow:inset 1px 1px 0 rgba(0,0,0,.1),inset 0 -1px 0 rgba(0,0,0,.1);}
::-webkit-scrollbar-thumb:horizontal{border-width:2px 1px 1px 1px;min-width:24px;box-shadow:inset 1px 1px 0 rgba(0,0,0,.1),inset -1px 0 0 rgba(0,0,0,.1);}
::-webkit-scrollbar-thumb:vertical:hover{background-color:rgba(0,0,0,.6);box-shadow:inset 1px 1px 0 rgba(0,0,0,.5),inset 0 -1px 0 rgba(0,0,0,.3);}
::-webkit-scrollbar-thumb:horizontal:hover{background-color:rgba(0,0,0,.6);box-shadow:inset 1px 1px 0 rgba(0,0,0,.5),inset -1px 0 0 rgba(0,0,0,.3);}

其水平滚动效果在之前我刚写完的 修复WordPress的Pingback 里第一次显现，水平的改善效果明显优于垂直。

刚好前段时间闹的沸沸扬扬的webkit威胁论，把webkit前缀推向了恶的一方，但其实webkit本身没什么过错，只是它的崛起从某种程度上来说意味着它可能重演IE的过去。我的博客的访问量50%来自Chrome，所以做这样的改变其实不足为奇。但倘若IE和FF甚至是OPERA都去实现-webkit前缀，那么有与无还有什么区别呢？

今天Google Reader的改版如约而至，但作为一个Google Reader的死忠来说，却一点也高兴不起来。新版本统一了很多外观性的东西，但个个方面都出现了严重倒退——体验、功能、开放，这让我实在忍不住吐槽：Google这就是你引以为傲的用户体验？晃眼的白板？狭小的可视空间？实用功能的退化？

引用一位微博网友@caoxg的话：

我本以为Google Reader会死在党的手里，没想到它自杀了。

随后我看到了各种来源的信息，其中大部分人都表示了对这次改版的不满。甚至有人表示这次的改版毫无可取之处，虽然有些偏激，但这种失望我自己也有切身感受——当真是爱之深责之切。

Google最近对于Google plus推广不遗余力，甚至连Reader的固定用户群也不放过，开始把Google plus深度整合到它的各个产品里去。这本无可厚非，但过程却是异常生硬，过去的分享居然全部无法再看到，只能导出。很多实用的功能也被砍掉，分享、笔记，甚至很多都是用户之所以使用Google Reader的原因，现在一下全没了，让那些follow了很多人以及被大量follow的人情何以堪？

但我对于Reader的改版更多的不满却来自于界面——这么一改，实用度降低了实在太多了。虽然新界面和Google很多产品的UI保持了一致，但问题是Reader有其长时间观看的特殊性，这么样一个刺眼外观，恐怕让很多长时间阅读的人直摇头了。好看不好看不提，视觉识别度降低了N个档次，当满屏文章标题的时候我甚至很难辨认出哪些是我读过的......

功能区的空白过大使得可视区域变得如此吝啬，特别是在宽屏上这点弊端实在太过明显，但问题是为什么Google要这么做？实际上Reader的功能栏高度已经超过了所有其他Google的产品，让阅读区捉襟见肘得也太过分了！用14寸1280x800的显示器，即使是用最为简洁的chrome并且去掉系统任务栏，可供阅读的区域高度居然不到400px...还是偏下部分的恶心位置...

今天我看了一小时Reader眼睛就已经罢工，有的时候刚想点分享链接，突然惆怅的发现原来已经被K了。再看看可怜的Google plus，果然还是打不开继续悲剧着......统一UI是如此的重要，Google plus是如此的重要，即使是Google，只要它还是一个公司，不管它是否伟大，利益永远还是其核心价值。

我提倡改变，近期蓝色理想经典论坛也改了版，甚至自己也正在改版自己的首页。对于拥有大量惯性用户的网站来说，改版必然牵动旧用户的神经，这本不可避免，但像Google这样如此强硬，结果未必给Google plus带来多少互动，反而导致Google Reader的用户流失。

2011-11-23更新：近来新版google reader的诸多细小改进让人欣慰，大幅缩减了头部功能区的高度使得可视区终于可以大一些，不过过于白的背景色对长时间阅读来说仍然是噩梦...

Web Design Is 95% Typography ，这并不夸张。尽管我不是设计师，和字体打交道的时间相对较少，却也知道其重要性。不过 Typography 一词并没有非常正式的官方中译，通常称为“字体排印”，而我们Web开发者讨论的也只是其中一个子集 Web typography 。对此我没有什么深入研究，我强烈推荐 Type is Beautiful Blog ，不论是Web开发者还是设计师，都应该对 Typography 这个我们日常工作内容的超集有所了解——对于前端恐怕尤为如此，毕竟浏览器便是此分支中的一个排版引擎。

本文主要讨论的是 WOFF，以及 Google Font API 中 WOFF 调用的相关应用。

WOFF TTF OTF EOT

设计师在设计网页的时候常常遇到字体问题，尽管设计 Banner 的时候可以用图片的形式表现出他们喜欢的字体，但对于Web内容来说却是无能为力的。客户端安装的字体总是有限的，设计因此遇到的限制只能通过网络的方式解决，于是就出现了网络字体。当页面加载的时候同时下载字体资源就能保证页面按照设计呈现，但这样遇到2个问题，第一，带宽的限制，这使得字体的文件的尺寸不能过大，完整拉丁字母集的字体文件通常都在数百K，相对来说还是有些太大。第二，字体的版权问题，免费和商业永远是个矛盾。所以网络字体的应用并不顺利，尽管不断在发展，却乏人问津。

WOFF是Web Open Font Format的缩写，作为从2009年才开始发展的网络字体格式，现在就已经迅速被广泛的支持。原因可能很简单，WOFF更小，并且包含来源信息。虽然WOFF可以看做是 TrueType (TTF)以及 OpenType (OTF)的再包装，但不同的是，WOFF是直接压缩了的字体格式而无需服务器再做额外的压缩，这使得相对于TTF格式，其体积通常要小40%以上。由于对于 WOFF、TrueType、OpenType 的由来说明超出了本文的讨论范围，推荐阅读字体数字化简史与 WOFF获得完整的概念。

不过即使被广泛支持，我们仍然很少能感觉到其存在，原因很简单，中文字体的文件大小从一开始就失去了作为网络字体的可能——通常数十M的大小，只能眼睁睁地看着各种拉丁字体的百花齐放，自己维持的着老掉牙的宋体... 经常浏览外国的网站的话，对于网络字体应该不陌生，不过要在国内找出几个使用的例子还真有些难度。前端时间刚巧看到萝卜的图床的首页dulei.si使用了WOFF(更新：原页面内容已更改)，虽然只有左下角几个简单的英文字母，却能看出页面编写者的用心，并且下面说的Google做的事也许能在不久将来让中文字体少量应用网络字体格式成为可能。

那么如何使用WOFF？其实WOFF和更早先被支持的TTF和OTF格式在使用方面并没有什么不同，都是通过CSS规则@font-face定义字体名然后再在样式表里使用。@font-face是CSS2中的一部分，现在可以在CSS Fonts Module Level 3中找到更为详细的说明。比如下面的代码：

@font-face {
	font-family: fontname;
	src:	url(link/to/the/font/fontname.woff) format("woff"),
		url(link/to/the/font/fontname.ttf) format("truetype");
}
body {
	font-family: fontname, Times, Times New Roman, serif;
}

由于firefox从3.5开始支持TTF和OTF，并从3.6开始支持WOFF，所以给出文件的两个版本，支持WOFF的浏览器会下载WOFF的文件，支持@font-face但不支持WOFF的浏览器会使用同一种字体的truetype版本。不过这是一段相当过时的版本，Firefox的当前版本是5，并且3.5版本以下的使用数量已经非常少，所以在各个其他浏览器逐步跟进的之后，可以直接只用WOFF。

当然，IE的问题总是需要单独拿出来说事。IE早在5.0就实现了@font-face，当然是部分的实现了， 那还是在1997年。但是很遗憾包括IE8在内都只支持其专有格式Embedded Open Type(EOT)，一种压缩的网页嵌入字体格式，并且这种格式防止了字体的拷贝，也许更多的商业字体会欢迎EOT，不过到头来还是只有IE支持渲染EOT。

所以不论是何种网络字体，EOT，TTF，OTF，WOFF，它们的区别就我们使用来说，只是在于压缩、版权、浏览器支持范围这几个不同而已。就目前的支持范围来说，WOFF有用最为广泛的支持和最为合适的条件，任何一个现代浏览器中它都能良好工作，这其中包括IE9。而之后，将这些不同点融合在一起提供一个统一的使用方式，那就是 Google Font API 所做的事了。

Google Font API

Google提供了一个font API使我们可以方便的载入我们喜欢的web字体，并且使我们不需要考虑过多的浏览器对字体格式支持的细节。而我们所要做的仅仅只是在HTML里链接一个样式表文件，然后使用其中的字体。比如：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>WOFF and Google Font API</title>
		<meta name="description" content="" />
		<meta name="author" content="iifksp" />
		<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">
		<style type="text/css">
			h1 {
				font-family: 'Tangerine', serif;
				font-size: 48px;
			}
		</style>
	</head>

	<body>
		<div>
			<header>
				<h1>WOFF and Google Font API</h1>
			</header>
			<footer>
				<p>&copy; Copyright 2011 by iifksp</p>
			</footer>
		</div>
	</body>
</html>

下图展示了字体使用后的对比效果。效果还是相当不错。

我们可以从Google Fonts API目录里选择喜欢的字体使用。从上面的代码就能看到使用上非常简单，只是link一个样式文件[http://fonts.googleapis.com/css?family=Tangerine] ，告诉google我们选择的字体，之后的使用和一般操作无异。而正是这句外部资源载入，就是 google font api 为我们做了全部工作。

使用不同浏览器访问这个URL: [http://fonts.googleapis.com/css?family=Tangerine] 得到的结果自然是不一样的，Google 根据浏览器不同返回不同的适用的样式表，返回字体内容也不相同，对支持WOFF字体格式的浏览器，返回WOFF资源是首选。但对其他浏览器，比如IE6，返回的是引用EOT格式的资源——Google Font API 保证了返回后的引用的资源能被各个浏览器可用。比如Chrome的返回内容是这样的：

@media screen {
@font-face {
  font-family: 'Tangerine';
  font-style: normal;
  font-weight: normal;
  src: local('Tangerine'), url('http://themes.googleusercontent.com/font?kit=HGfsyCL5WASpHOFnouG-RD8E0i7KZn-EPnyo3HZu7kw') format('woff');
}
}

Firefox访问同样的URL得到的内容稍有不同，没有 @media screen 这句 media query。

当然这只是此API最为基本的使用方法，Google Font API Getting Started 提供完整的使用方法，所以这里不在冗叙，大体上就是Google给我们提供了按需索取的便捷方式。实际上，我们在对大标题使用漂亮字体的时候，并不是需要加载全部的字体文件，因为标题里的字母只是一小个子集——Google允许我们只请求需要的字体的部分(虽然这部分功能还处于beta阶段)：

在url附加内容参数就能以更少的请求量完成同样的事：
[http://fonts.googleapis.com/css?family=Tangerine&text=WOFF%20and%20Google%20Font%20API]

这使得中文使用网络字体成为一种可能，虽然现在还不行，但相信未来部分标题可以做到。那么只请求所用内容的字体相比请求整个字体文件减少了多少下载量呢？诉求开发工具的firebug和webkit开发人员工具能给出答案，只是，当前只有后者能够回答:)

虽然我也更喜欢使用firebug，不过这次它不给力了，不能正确显示下载资源的大小和内容，在响应里是空白，下载大小是个问号(?)，并且只有当内容从缓存读取时firebug才能正确显示文件尺寸。反观chrome，却清楚的告诉了我内容以及下载的文件大小。

可以看到，这个字体文件的大小是31KB，还算好，不过如果只请求 WOFF and Google Font API 这几个字母的话，尺寸仅4.3KB，已经非常理想。如果这时候去看Chrome显示的内容，会清楚的看到字体内容的情况——这点firebug尚未做到。下图是请求整个字体文件和只请求所需内容的结果对比，很有趣，不是嘛？

说到这里这个话题就差不多了，Google Font API 给我们使用网络字体带来了巨大的便利，虽然现在字体还不多功能也尚未完整，但有朝一日一定会派上用场的，特别是中文，我期待这有一天能用上各种各样的漂亮的字体，来编织更加多彩的网页。

扩展阅读

• Mozilla Supports Web Open Font Format
• Web Open Font Format for Firefox 3.6
• Industry Support for WOFF and Firefox 3.6
• WOFF File Format(draft of 2009-10-23)
• WOFF 使用指南

QR code ，Quick Response code，是一种流行的2维条形码，能够存储多达4296个字母数字字符的任意文本，对于汉字，做多存储1817个，相对于177x177这么小一块区域来说容量已经相当高，更重要的是读取速度——准确而高效，因而在各个领域都有非常广泛的应该。导致现在手机读取条码软件也是相当流行。

Google Chart API 里就有专门的 QR code 生成调用 ，能非常方便的获取自己想要的 QR code。配图的内容为 swordair.com，长宽为150px，由google生成，看起来还挺不错挺蛋疼的。 如果只是随便玩一下，网络上也有在线的QR code 生成工具，使用起来更加便捷。

问题在于，我们拿着这幅自己完全看不懂的图做什么？用来写情书吗？恐怕是个不错的主意，绕这么多圈子想不收卡都难了，哈哈。

难得闲来无事，对此API我就简单封装了一个QRcode.js，方便日常使用。好吧，我常常写情书，而且一写就停不下来:)

当然，卡也就没少收了...

/**
 * generate QR Code images using Google Chart API
 * developed by iifksp@swordair.com
 * http://www.swordair.com
 * api docs: http://code.google.com/apis/chart/image/docs/gallery/qr_codes.html
 */
var QRcode = function (config) {
	this.cfg = {
		container_id : '',
		/* The data to encode,  2K maximum length */
		data : '',
		/* Image size, QRcode is a square */
		size : 150,
		/* Error Correction Level
		L - [Default] Allows recovery of up to 7% data loss
		M - Allows recovery of up to 15% data loss
		Q - Allows recovery of up to 25% data loss
		H - Allows recovery of up to 30% data loss */
		ec_level : 'L',
		/* The width of the white border around the data portion of the chart.
		This is in rows, not in pixels. */
		margin : 4,
		/* How to encode the data in the chart */
		encode : 'UTF-8'
	}

	this.init(config);

	this.api_url = 'http://chart.apis.google.com/chart';
	this.param = {
		cht : 'qr',
		chs : this.cfg.size + 'x' + this.cfg.size,
		chl : encodeURIComponent(this.cfg.data),
		choe : this.cfg.encode,
		chld : this.cfg.ec_level + '|' + this.cfg.margin
	}

	this.qrcode_img_src = '';
	this.generateQRcode();
};

QRcode.prototype = {

	init : function (config) {
		for(var opt in config){
			this.cfg[opt] = config[opt];
		}
	},

	generateQRcode : function () {
		if(this.cfg.data == ''){
			return;
		}else{
			this.qrcode_img_src = this.api_url + '?' + this.joinParam();
		}
	},

	display : function (id) {
		var container_id = id ? id : this.cfg.container_id;
		if(container_id == '' ||
		!document.getElementById(container_id)){
			return;
		}else{
			var container = document.getElementById(container_id);
			var img = document.createElement('img');
			img.src = this.qrcode_img_src;
			container.appendChild(img);
		}
	},

	joinParam : function(){
		var quary = [];
		for(var opt in this.param){
			quary.push(opt + '=' + this.param[opt]);
		}
		return quary.join('&');
	}
};

使用上就是简单的实例化和显示，时间挺仓促，可能还有不完备的地方，以后再继续改进。

var qrcode = new QRcode({
	size : 150,
	data : 'swordair.com',
	container_id : 'container'
});
qrcode.display('other_container');