cssmagic / blog-old Goto Github PK

今早打开 Facebook，发现中文版界面的字体好像有所调整。

在 Facebook 的中文版界面中，几乎所有的正文字体都由原先的 11px 调整到了 12px。这样的设置显然更适合中文界面，12px 的汉字看起来更舒服。用 Firebug 分析一下，发现 12px 已经作为全局字体设置写到了 body 元素的样式中。（不过仍然有少量次要的文字处于 10～11px 状态，在 ClearType 下还可以接受。）

中文版界面中几乎所有的文字都相应地比英文版大了一号。这也体现了 Facebook 本地化工作的细致和深入。

英文版界面的字体没有变化，说明界面语种切换也会涉及 CSS，或者说，Facebook 为不同语种的界面编写了不同 CSS。

本文已删除，请继续浏览其它文章。

《CSS 网站布局实录：基于 Web 标准的网站设计指南》是一本非常经典的国产 CSS 教材，也是我的 CSS 启蒙书，我认为它适合每一位初学 CSS 的朋友阅读。此书第一版发布于 2006 年 9 月，上市不久即被发现存在较多的字面错误；于是一年后此书发行第二版，修正了部分错误，并针对行业趋势补充了少量章节。但是读者发现，在第二版中，仍然存在较多笔误。

尽管如此，《CSS 网站布局实录》仍然是当前最值得推荐的 CSS 教材之一，也正因为如此，有热心读者自发为此书整理和维护着多份勘误表。

除了这些字面错误之外，我发现《CSS 网站布局实录》还存在一个非常重大的概念错误，在第二版中依然延续，极易误导初学者。由于它鲜被提及，因此我决定记录成文，为这本书的读者做一个提示。

原文

我们看一下《CSS 网站布局实录》的 “第 7 章：浏览器兼容与解析问题” 下的 “7.7 高度不适应” 的这个小节，这里提到了一个 “高度不适应” 的现象，原文节选如下。

高度不适应指的是，当内层对象的高度发生变化时，外层对象的高度不能自动进行调节，特别是当内层对象使用 margin 或者 padding 之后。高度不适应问题并不是 IE 的专利，就连 Firefox 也出现了这种问题。……

高度不适应主要发生在两个嵌套的对象中，这里 div 作为外层对象，而 p 作为内层对象。……

除了背景之外，#box 仅是一个几乎没有任何样式的 div，而 p 对象加了两个非常关键的属性：margin-top: 20px; margin-bottom: 20px;，即上下外边距都是 20px。这时按照前面的盒模型原理，p 对象的高度应当是 20 + 20 + 文字的高度，即应当在 30px 以上。理论上，由于 p 的高度大于 30px，而 #box 这个 div 的高度也应当由 p 的高度挤开，至少达到 30px。我们看看预览的效果。……

似乎并非预想的结果，看上去带背景的 #box 还是和文字一样高，并没有超过 30px……

这一现象被作为浏览器渲染 bug 安排在了第 7 章，但事实上这种 “高度不适应” 并非 IE 或 Firefox 等浏览器的 bug。相反，这种表现是符合 CSS 规范的——虽然看起来似乎 “不太合理”。这种 “高度不适应” 是 CSS 盒模型 “外边距重叠” 特性的一种表现。

外边距重叠

“外边距重叠” 的英文原文是 “Margin Collapsing”，由于翻译的问题，通常又可能被称作 “空白边/margin 叠加/合并/塌陷” 等等。“外边距重叠” 是盒模型的重要特性之一，CSS 学习者必须了解和掌握。

“外边距重叠” 的表现在于，一个元素的垂直方向上的外边距可能会和其它元素或者它自身的垂直外边距进行重叠。这种重叠的行为并不像我们期望的那样把两个外边距相加，而是取其中的较大者；同时，这种重叠行为可能会连续发生，也就是说，可能会有多个元素的垂直外边距会重叠在一起。

“外边距溢出”

此外，外边距重叠还有一个非常特殊的情况，它也就是本文勘误的重点。我们来看一种实战当中比较常见的形情，我称它为 “外边距溢出”：

当子元素设置了上外边距（margin-top）之后，父元素并没有被撑高，仍然与子元素紧贴在一起；同时，父元素与它的上方的元素形成了空隙，仿佛这个上外边距是应用在父元素身上一样。

这种表现与我们的期望大相径庭。因此，很多人误以为这种现象是浏览器 bug（有网友将其戏称为 “margin 劫持”），但实际上浏览器的这种表现是正确的。本文所要澄清的《CSS 网站布局实录》一书中的重要错误也在于此。

更多讨论

相信每位 CSS 学习者都会提出一个疑问：为什么 CSS 规范要设置这么一个 “莫名其妙” 的规矩？

这实际上是为了更好地进行文章排版。限于篇幅，本文不做赘述，推荐阅读《精通 CSS》一书的《2.1.2 空白边叠加》一节（第一版中文版 P25～27）。当然我们也可以参考《CSS 权威指南》的相关章节，但《精通 CSS》在这个问题上的描述更加生动和到位。

除此以外，本站也会推出相关的文章，帮助你更好地剖析和掌握 “外边距重叠” 特性，同时提示你正确认识 IE6,7 在处理外边距重叠方面的问题，引导你如何在页面布局中避免它所带来的因扰，并且告诉你如何利用这一特性进行精确的文章排版。

相关阅读

• CSS 网站布局实录（第 2 版）第三章 勘误
• 《CSS 网站布局实录》第二版勘误

用户代理字符串

在浏览器与服务器之间通讯的过程中，浏览器会向服务器发送一段字符串信息，用于标注自身的名称、版本以及运行环境。这段信息就是 “用户代理信息”，或称作 “用户代理字符串”。

Web 服务器程序和服务器端脚本（PHP、ASP 等）都可以获取用户代理信息。同时，页面中的 JavaScipt 脚本也可以（在客户端）获取这段信息。于是，当浏览器的种类越来越多、差异越来越大的时候，通过用户代理字符串来判断并区别对待浏览器的 “用户代理嗅探” 技术就自然而然地诞生了。

“用户代理嗅探” 与 “用户代理伪装”

浏览器嗅探技术可以追溯到很多年以前，当年的 Netscape/Mozilla 凭借大量新技术崭露头脚之后，网站开发者就开始通过用户代理字符串来判断浏览器类型，并且向不同的浏览器提供不同的内容。

这其中最典型的例子就是，Mozilla 浏览器可以从服务器获得（在当时让人感觉）“超炫” 的包含框架的页面，而其它浏览器只能得到简单布局的页面。于是，当 Mozilla 的这些竞争者们也支持框架之后，它们便在自己的用户代理字符串中声称自己也是 Mozilla，这样它们也可以 “正常浏览” 这些超炫的网站了。——这应该就是最早的 “用户代理嗅探（User Agent Sniffing）” 与 “用户代理伪装（User Agent Spoofing）” 了吧。

在接下来的 “第一次浏览器大战” 期间，“用户代理嗅探” 技术被发挥到了极致，网站开发者们不得不同时开发两个版本来分别满足 Netscape 和 IE 浏览器——因为当时这两大浏览器之间的竞争已经发展到了互不兼容的地步。这大概可以算是 Web 开发历史上最黑暗的时期。

值得庆幸的是，这段时期并没有持续太久。但即使在 W3C 标准一统天下的今天，“用户代理嗅探” 仍然被广泛应用。很多网站仍然残留着早期的嗅探代码，而现代浏览器们为了正常显示这些页面，不得不借助 “用户代理伪装” 疲于奔命……

有意义的 “用户代理嗅探”

我们似乎可以预料，只要浏览器之间的差异仍然不可忽视，“用户代理嗅探” 技术就会继续存在下去。不过，我们越来越不赞成使用它，转而寻求更合理的新方法来面对浏览器差异——比如 “特性探测（Feature Detection）”。

但是在某些时候，用户代理嗅探是不可替代的。比如当我们需要准确判断浏览器的类型与版本时，用户代理嗅探仍然是最可靠的方法，而且在服务器端这似乎也是唯一可行的方法。

对流量统计与分析系统来说，用户代理字符串是非常重要的信息来源。我们会经常在 IT 新闻中看到浏览器市场份额的变化情况，而所有这些数据应该都是建立在用户代理嗅探获取的原始数据之上的。

相关阅读

• User Agent 的历史变迁
• 维基百科: User Agent
• 说说浏览器嗅探与特性探测

2006 年 4 月的创意和实践，纯怀旧 + 记录。

改造目的：利用诺基亚 HS-23 耳机较好的低音效果，改造之后配合 i.Tech Clip R35 蓝牙耳机使用，弥补其低音不足的缺点；同时 HS-23 的挂脖式设计也会使 R35 的佩戴更加轻松随意。此外，两者的银黑外观设计实在是浑然一体，天作之合。

一只普通的蓝牙耳机当然不值得我如些大费周折，但实际上 R35 是一款可以配合诺基亚智能手机使用的 MP3 播放器，而且音质确实不错。因此，作为一个音乐爱好者，我决定将 HS-23 耳机和 R35 打造成为我的时尚移动音乐装备！

值得一提的是，我在这个耳机上集成了一个标准的 3.5mm 耳机插座，可以再外接一副耳机供两人同时聆听立体声音乐。（好浪漫啊！……不过很可惜，这个功能一直没有发挥出来……）

改造示意图与说明

以下是当年手绘的改造示意图，并加上了文字说明，供实际操刀者参考。（实际操刀者不是我，我的动手能力没问题，但没有材料和工具。-_-）

实际改造效果

实际操刀者是著名的 zxfgod 同学，改造手艺相当不错。感谢一下。

zxfgod 同学将这个改造设计简化了一下，取消了 “扣绳”，并将弯头的耳机插头换成了直头，让它取代扣绳来承受蓝牙耳机的重量。我开始还有些担心，但事实证明这个方法是非常可靠的，同时很明显地降低了整个装备的复杂度。

夏天衣服穿得轻便，R35 虽说不重，但夹在衣服上总不太舒服。而换上了这副改造好的耳机之后，R35 就可以悬挂在胸前，非常轻巧，耳机线也不会凌乱纠结，十分潇洒。音质方面也十分令人满意，实际使用的感觉非常好，路边的 MM 们也经常投来好奇和羡慕的眼光……

于是从 2006 年的那个夏天起，美妙的音乐就和我形影不离了！

后记

很可惜，在 2008 年的某一天，HS-23 的某一边耳塞开始出现杂音（可能是内部线圈松动），无法继续使用，光荣退役！

实物图片欠奉，摘录网络图片凑数，请大家自行想像！谢谢！

P.S. HS-23 的继任者是同样来自诺基亚家族的 HS-28 耳机，同样是挂脖式设计，音质同样出色，而且无需任何改造即可直接连接使用。但是它的拉风程度与 HS-23 相比，是完全不可同日而语了！

在使用 站长工具 的过程中，随手查询了一下 “CSS魔法” 的 Google PR 值。发现 PR 值已经由域名刚使用时的 0 升为 1。而我的其它几个很久未更新的小站的 PR 值一直稳定在 3。

据说 PR 达到 4 以上的个人网站就算是很不错的了。

咱是凡人，做网站当然也不能免俗，适当关注一下排名也是必须的。看来还需要多多努力，争取早日达到并突破 4。

2009 年 7 月 28 日在千鸟的博客上对《互动技术的理性选择》一文的一段回复，整理一下再凑一篇博。

很早以前就有话想说，但现在看一下基本上已经被本文和另一篇相关文章的评论说完了。那就说点技术之外东西的吧。

我本身是在互动公司，工作中经常接触到 Flash，说一下我的经历和体会。

由于 Flash 行情较高，而且客户往往也贪 “炫” 并乐意买单，所以在公司内（或者说在整个互动行业内），Flash 的地位不可动摇，Flash 设计师的地位同样不可动摇。当然我说这话有点酸溜溜的味道，因为我是做 Web 设计和开发的，呵呵。

从项目应用上来说，Flash 通常是做汽车网站或品牌 Mini-site，也算用得合适。但是执行方面，我觉得问题多多。

一般来说，一个网站如果敲定为 Flash Site，那么这个项目就划归 Flash Team 负责，在执行上可以说就跟 Web Team 没什么关系了。公司的 Flash Team 的大大们确实很牛，做的东西超炫。

可是，似乎 Flash 大大们对 Flash 之外的东西关注甚少。比如，Flash 终归是基于 Web 的，但 Flash 大大们对 Web 前端又是完全地轻视，经常出现一些页面不能跨浏览器居中之类的低级失误。

更重要的是，很多 Flash 设计师太过关注视觉，反而忽视了 Flash 最大的优势——交互。我相信漂亮的 hover 动态效果远远不是交互的全部。很多作品在视觉方面确实很出色，但几乎很少考虑到用户的操作体验。诸如必须下载 N 兆的片头才能进入主界面、不考虑低分辨率用户、网站结构/流程不清晰的作品比比皆是。

出现这些问题的原因可能是因为迎合客户或受限于成本/周期，但总是会让我感到遗憾。“炫” 就是 Flash 存在的意义？我不知道。目前在互动行业，这让我很困惑。

P.S. 从那篇相关文章评论的争论激烈程度似乎可以看出，目前 Web 设计师和 Flash 设计师之间的隔阂。但我不知道症结在哪里。可能最后我们会发现，所有项目、所有团队，最大的问题，不是技术或周期，而是沟通。

近期交给公司的 “作业”，再凑一篇博。

需要上交相同体裁作业的同学可以拿去免费参考，后果自负。

本人××，于××××年×月进入公司。回顾这一年来的工作，我在公司领导和同事的支持帮助下，较好地完成了自己的本职工作。现将一年来的工作情况总结汇报如下。

一、日常工作

我的工作岗位是××××，一年来独立完成或参与完成了很多重要项目的××××和××××工作。这其中主要包括：××××品牌官网、××××系统、××××活动官网、××××赛事官网、××××中文官网等等。

同时，我还担任过或正在担任其它一些项目的××××工作，包括：××××系列活动网站、××××网站等等。

由于工作态度积极主动、工作质量稳定可靠、工作效率不断提升，我经常得到客户、PM、××××、××××的肯定和表扬。

二、流程与合作

经过一年来的工作和实践，我较好地溶入了公司的生产流程之中，与上下游环节（视觉设计、后端开发）的同事都建立了比较默契、融洽的合作关系。

三、学习与培训

在工作之余，我勤于钻研前端开发技术，密切关注行业趋势。自身实力的不断提升成为我不断提高工作质量的有力保障。

我乐于帮助同事共同提高，同事们在工作中遇到的疑难，我都会热心解答指导。我力求促进部门整体工作技能和工作质量的提升，并以此作为自己的工作目标之一。

我执笔撰写了公司的××××规范，并进行推广。在部门的××××交流会上，我负责×××××××。我将在接下来的时间里进一步完善××××工作。

四、活动与拓展

在公司企业文化和团队建设的各项活动中，我不仅是热心参与者，也是组织者和实践者。

在××××年底，我策划并组织了××××××××，极好地促进了××××××××，此次活动也收到了良好的××××效果。

在今年初，我策划并举办了××××××××，××××××××，吸引了众多同事热情参与，获得了强烈反响。

五、不足与改进

在入职之初，由于经验不足，我在前几个项目中给大家留下了××××××的不良印象。我自己也深刻认识到这个问题，在随后的工作中，我一直在努力调整和改进自己的工作方式，用更好的工作思路和方法来不断××××××××。

在今后的工作中，我会再接再厉，维护公司利益，积极为公司创造更高价值，力争取得更大的工作成绩。谢谢！

简介

“网址跳板”，英文名 “Tiny Jumper”，一款供 Firefox 浏览器使用的 Greasemonkey 用户脚本。（开发环境为 Firefox 3.5 + Greasemonkey 0.8，条件所限，未在其它环境下测试。）

功能

当访问那些被墙的短网址（例如 bit.ly 等）时，自动调用 untr.im 进行解析，并自动跳转。

有翻小墙能力的朋友请勿安装！

安装与使用

1. 安装 Firefox 浏览器，并安装 Greasemonkey 扩展。
2. 进入 “网址跳板” 安装地址，点击 “Installed” 按钮，安装 “网址跳板”。
3. 安装了 “网址跳板” 之后，点击那些被墙的短网址时，会自动解析并跳转，无需任何手工操作。
4. 建议在 hosts 中增加如下记录，以获得更快的跳转速度。

127.0.0.1	bit.ly
127.0.0.1	post.ly
127.0.0.1	j.mp
127.0.0.1	ff.im
127.0.0.1	htxt.it
127.0.0.1	ping.fm

开发计划

• 目前的短网址解析方法很傻，但很有效。后续版本或许会使用优雅的 Ajax，并提供更好的 UI（现在完全没有考虑 UI）。
• 将来可能会增加 YouTube 链接跳转到 GFWTube 的功能。
• 快速的 Ajax 解析与友好的 UI 特性均已实现；另外 GFWTube 已关闭对外服务。 因此目前的开发计划仅为修正已知 bug：在解析连环跳转时，不能跳转到最终结果。 因此暂无开发计划，待用户反馈再作打算。

鸣谢

• Untr.im - 提供短网址解析服务
• TinyWall (by darasion) - 提供部分被墙的短网址服务商名称

版本历史

v1.01.20100219

• [Fix] 修正在解析连环跳转时不能跳转到最终结果的 bug。

v1.00.20091211

• [New] 提供基本的状态提示 UI。
• [Update] 采用 Ajax 方式进行短网址解析，速度更快。

v0.30.20091210

• [Update] 处理的短网址服务增加 ping.fm。

v0.20.20091106

• [Update] 处理的短网址服务增加 post.ly、j.mp、ff.im、htxt.it 四项。

v0.11.20091103

• [Fix] 修正访问 untr.im 网站首页时出错的 bug。

v0.10.20091102

• [New] 实现对 bit.ly 短网址的解析和跳转。

京东的速度很快，今天上午就把昨天订购的 19 寸液晶显示器送到了。购入的初衷就是接到我的 IBM T30 老爷机上，本本自身的 1024×768 分辨率的显示屏实在是有点紧张了，尤其是在做设计的时候。

这台新显示器是 VGA + DVI 双接口，当然是优先连接 DVI 啦！之前已经给 T30 配备了一台原装扩展坞（俗称 “底座”），这台底座正好提供了 DVI 接口，今天终于发挥作用！

IBM T30 笔记本电脑

之前对 IBM 的笔记本电脑没有什么概念，笔记本还能玩出什么花样？成为小黑用户之后才发现，原来购买 IBM 笔记本其实是购买了一整套的解决方案。小黑的外围扩展设备非常之多，且通用性极强。除了通用的 PCMCIA 卡槽之外，IBM 笔记本还提供了自家专利的光驱位置的 Ultrabay 接口和底部的扩展坞接口，令其扩展能力发挥到了极致。

由于小黑的外设通用性好，市场流通量很大，对 IBM T30 这样的经典机型来说，现在可以淘到众多适用的二手原装外设，性价比极高。

在这当中，扩展坞当然就是今天的主角了。

底座/扩展坞/端口复制器

这三个名词指的应该是同一种东西。IBM 笔记本的扩展坞型号种类繁多，有些需要专用的大功率电源供电，有些甚至提供了 PCI 插槽。我唯一迫切的需求就是扩展 DVI 接口，所以不需要太花哨的功能，直接选择最简约的型号就好。在淘宝上挑到九成新的二手货，58 元拿下。

我不太确定这款产品的具体名称，估计可能是 “端口复制器Ⅱ（Port Replicator Ⅱ）”。它底部的标贴上的 P/N 号是 74P6734，采用标准笔记本电源接口，无锁。它的底板呈斜坡状，与笔记本组合之后浑然一体，并不会占用太多的额外空间。

它提供的接口非常丰富，除了复制笔记本自身的串口、并口、VGA、电话线、网线、USB、音频输入等接口之外，还新增了音频线路输出、PS2 键盘、PS2 鼠标、IBM 外置软驱、DVI 等众多接口。

使用底座的好处不仅在于这些扩展出来的新接口，而且笔记本的日常使用也会更加方便。几乎所有的外设和线缆都可以连接到底座上，比如外接键盘、鼠标、网线、音箱甚至电源线等等这些蜘蛛网一样的设备都和笔记本毫无瓜葛了，出门时直接把笔记本从底座上拔下就可以带走了，非常干净利落。

DVI 接口

为什么一定要 DVI 接口？因为它是数字显示接口，信号无损传输，显示当然更清晰。习惯了 IBM 笔记本那优秀的屏幕显示效果之后，模拟信号在液晶显示器上的含糊表现让我不能忍受。如果没有数字信号，如果不是点对点，液晶又有什么意义？

值得庆幸的是，IBM 笔记本加上底座之后，可以提供真正的数字 DVI 输出，这也令我外接显示器的想法得以实现。

网上资料显示，IBM T30 标配的 ATI Mobility Radeon 7500 显卡最多可以同时驱动四台显示设备（自身的显示屏、视频输出、VGA 输出、DVI 输出），我们可以在 “控制面板 → 系统属性 → 设备管理器 → 监视器” 中得到验证。这也是 IBM 笔记本实现 DVI 输出的前提。

19 英寸液晶显示器

选择 19 寸的产品有以下几方面的考虑。

首先是价格。显示器的尺寸和它的实用价值并不成正比，不需要盲目求大。所以本着 “少花钱多办事” 的原则，选择够用的产品。

接下来是体积。桌面空间有限，太大了占地方。

还有分辨率。19 寸宽屏显示器的物理分辨率通常是 1440×900，对于一般设计来说已经足够，完全满足我目前的需要。而且不可忽视的是，网上资料提到，IBM T30 的显卡所支持的最大显示分辨率是 1280×1024，因此更大的显示器也没有用武之地，无法实现 “点对点”。（事实上，我们在实际使用中会发现，IBM T30 的硬件配置在驱动 1440×900 分辨率的时候已经有些吃力了。）

此外，点距也是一个重要的因素。液晶显示器的点距可以由屏幕对角线尺寸和物理分辨率计算得到。目前大多数 19～22 寸 16:10 液晶显示器的点距都在 0.28mm 左右，与我的 IBM T30 的显示屏的点距相同。这也是一个比较适合网页浏览和日常应用的点距规格。

但是目前有相当多的 16:9 液晶显示器都采用了较高的分辨率（甚至有 21.5 寸的产品达到了全高清的分辨率），相应地降低了点距（有些甚至低于 0.25mm），极易引起视觉疲劳。即使没有分辨率的限制，这些低点距的显示器也会直接排除在我的选择之外。

最终实战

将 IBM 笔记本电脑安装到 IBM 原装底座之后，需要将电源接至底座。此时电源同时为底座和笔记本供电，底座上的电源按钮也完全等效于笔记本自身的开关。

开机之后，Windows 系统没有任何 “发现新硬件” 的提示，所有扩展接口无需安装任何驱动，直接可用。由此可见，底座与笔记本的硬件设计是深度契合的。

当我们通过 DVI 接口连接了外部显示器之后，它在 Windows 系统中会被识别为第二显示器，成为桌面的延伸。在 “控制面板 → 显示属性 → 设置” 中可以单独调节外部显示器和笔记本自身显示屏的分辨率和色深等设置。同时我们也可以根据实物的摆放方式来调整两者的序号和相对位置，非常方便。由于笔记本经常要携带外出，我觉得将其自身的显示屏默认为第一显示器是比较妥当的。

好了，至此终于大功告成。来欣赏一下我桌上的新气象吧！

今年生日当天在 cnBeta 看到的一篇文章，原题《难念的汉字生意经》，原载《**经济周刊》，似乎是《汉语言文字产业陷入信息化时代维权困境》系列文章之一。作为一名书法爱好者和中文字体爱好者，我看完这篇文章后，心中莫名辛酸。

暂且转帖过来，日后再详细聊聊这个话题。

难念的汉字生意经

《**经济周刊》记者 张伟/北京报道

作为**最大的中文字库厂商，方正诉宝洁公司侵犯著作权案，更像是说书人开场前那一记醒木：提醒你，要讲述的是整个**字库行业的故事——曾经的辉煌和自豪，现在的惨淡和悲哀。

这是一个历史悠久、曾经规模庞大、但一直鲜为人知的行业。从当年超过 60 多亿的 “铅字” 产业规模到如今仅仅数百万的电脑字库年营业额，市场极度萎缩，人才严重流失，企业奄奄一息，这个与我们每个人息息相关的行业，发生了哪些不为人知的故事？

方正维权，有人认为是对汉字的垄断，有人认为是字库厂商存亡的关键，有人认为是信息化产业知识产权困境的写照。事关几个汉字，索赔不过百万，为何如此复杂？

没有**人能离得开汉字。但对于计算机字库和字体，可能很多人并不了解，哪怕是一些业内人士。一位字库企业的工作人员就曾对记者解释说：“宋体，是宋徽宗写的字。” 其实，宋体不是宋徽宗写的字，宋徽宗写的字叫 “瘦金体”。

我们在日常生活中经常接触到字库。用电脑写文章时，Word 软件里面供选择的字体，如宋体、黑体、楷体等，就是字库在电脑中的体现。用手机发短信时，那一个个汉字，也是因为手机里捆绑了字库。通俗地讲，字库就是把字体数字化后形成的数据库软件。

我们用字库在电脑里写文章，用手机发短信，企业用字库制作广告，打印文件等等，需要向字库企业交钱吗？交多少钱？

这正是方正想通过起诉宝洁告诉我们的。

方正电子：

起诉宝洁、暴雪皆因 “字体” 维权

“打官司是被迫的，不是我们期望的。我们希望通过这样的官司，能够有典型的意义，教育更多的人，去合理合法地使用方正字库。” 北京北大方正电子有限公司（下称 “方正电子”）字模开发部部长黄学钧说。

6 月 18 日，北京市海淀区法院对 “北京北大方正电子有限公司诉广州宝洁有限公司（下称‘宝洁公司’）侵犯著作权” 一案开庭审理。

据黄学钧介绍，2008 年 5 月，方正电子在位于中关村的家乐福发现，宝洁公司生产的55款产品的外包装、产品标识、产品商标、产品广告宣传品上，大量使用了方正的字库产品——方正 “倩体” 系列（细倩、中倩、粗倩）等 5 款字体，侵权产品包括 “飘柔洗发露”、“飘柔精华素” 等。经过数次交涉，同年 8 月，方正电子以侵犯美术作品著作权为由，将生产商宝洁公司和家乐福一起告上了法庭，要求宝洁立即停止使用并销毁所有带有方正 5 款字体的外包装、产品标识、产品商标、产品广告宣传品；家乐福立即停止销售所有带有上述字库字体的产品；要求两被告公开赔礼道歉、消除影响，连带赔偿经济损失 142 万元和原告为制止侵权行为支出的费用 5.8 万元。

庭审时，方正电子当庭改变了诉讼请求，将涉案字体由方正倩体等 5 款字体减至倩体 1 种，赔偿数额也由 142 万元降至 134 万元，撤销了要求家乐福承担连带赔偿责任的请求。黄学钧告诉《**经济周刊》，改变诉讼请求是希望更简单更快地把案子了结，其他几款被侵权字体将会单独提起诉讼。

海淀法院并未当庭宣判。

为什么告宝洁？

尽管身为国内字库厂商的龙头，拥有 160 多种、数百款字体，占据国内字库市场的大半江山，但方正字库本身并不赚钱。“字库业务的投入和产出基本持平，要靠公司的其他业务来养，” 黄学钧告诉《**经济周刊》，“我们面临的最大问题就是盗版问题。”

以方正电子 2007 年与演员徐静蕾合作开发的个性化字体——方正静蕾简体为例，自推出到现在，10 元一套的字库，方正电子只卖出了 2000 多套，而网上的非法免费下载，据方正电子估计，应该不少于 100 万套。“产品推出的第二天，网上就出现了盗版，我们为开发这款字体投入了大量的人力、财力，最后赔了。”

用百度检索 “方正字库下载” 和 “方正字体下载”，分别有 27800 和 33800 个页面。而这 6 万多个下载链接中，没有一个是方正授权的。“我们现在的合法用户几乎全在报社，我们的收入来源也主要在报社。” 据黄学钧介绍，这和双方多年来的合作有关，方正的传统业务就是报纸的排版系统，直到今天，将近 90% 的内地报纸和海外中文报纸依然是方正的客户。

根据方正字库的授权模式，用户购买了一套正版的方正字库即拥有了字库软件的使用权，可以安装到一台计算机上使用。个人用户可用于个人非商业目的，企业用户可用于内部编辑、打印、设计小样等工作。如果企业要将方正字体应用于广告、产品包装等商业目的，必须得到方正电子专门的授权。根据用户选择的字体、使用范围和使用时间，方正电子根据现有价格体系提供相应的授权价格。

“就像你买了一张 DVD 光碟，你自己在家看，没有任何问题，但你要用作商业目的，就得另外掏钱。” 据黄学钧介绍，常见的字库侵权行为有三种：一为非法复制，如全球知名游戏开发和运营公司美国暴雪公司，在其开发的网络游戏《魔兽世界》中，未经方正电子的许可，大量复制、使用了方正北魏楷书体等 5 款字体。二为剽窃，如潍坊文星科技开发有限公司（下称 “文星公司”）将方正电子的 12 款字体进行简单修改后，作为自己的字库产品进行销售。三为非法使用，在方正电子看来，宝洁就属于这一情况，未得到授权就将方正倩体用做商业用途。

“很多盗版我们视他们是善意的，他们不了解，不清楚，无意中使用了我们的字体，我们先给他发个函件，告知他侵权的事，大部分都会在收到函件后积极和我们协商解决。” 黄学钧告诉《**经济周刊》，之所以起诉宝洁，是因为宝洁收到方正电子的律师函后没有积极地回应，“刚开始还有一两个邮件回复我们，后来就不理我们了。没办法，我们只能寻求法律上的帮助。”

而起诉宝洁的目的，则是想 “教育市场”。“主要是觉得公众、企业的版权意识越来越强，环境越来越好，我们去打这样的官司才有意义，否则，忙活半天，无疾而终，做了也白做。” 方正电子字模部总经理张建国表示。这从 2007 年方正电子起诉暴雪公司侵权案可以得到证明。

“起诉暴雪对我们有直接的正面影响。我们现在向企业发函，谈字库的使用、授权，企业已经很少和我们谈法律问题了，一般都直接谈授权价格。以前和企业交涉，他们和网友的想法差不多：这东西还有版权？这两年，有企业会主动和我们联系，而且主动的越来越多。” 据业内人士透露，基于 “为和而打，以打促和” 的原则，2008 年，方正把世界 500 强在华的企业挨个 “捋了一遍”，收获 500 多万。

方正：野心家还是受害者？

2007 年方正诉暴雪字体侵权案，尽管至今尚未正式开庭，但在方正电子看来，一点悬念也没有。

“100% 能赢，我们非常有信心。” 黄学钧说，因为暴雪公司是非法整体复制方正的 5 款字体，侵犯了字库作为软件的著作权。“案子至今尚未审理，主要是过程中的问题，法院调查、取证，包括审计暴雪公司靠游戏盈利的情况，可能需要一定的时间。”

此案曾位居《**经济周刊》推出的 “2007 **十大知识产权案件” 之首。

但宝洁案和暴雪案并不一样。第一，宝洁公司购买了方正电子的正版字库软件；所以，并不构成侵犯字库软件的著作权。第二，宝洁公司相关产品只使用了方正倩体等 5 款字体的部分汉字，并非像暴雪一样，整体复制。

据媒体报道，宝洁公司的代理律师认为，宝洁公司已经购买了方正字库，所以有权在外包装上使用该字体，方正公司的诉求属于 “二次收费”，损害了文字的传播，损害了公众利益。

有网友说：“方正疯了，想垄断汉字。” 如果说，诉暴雪的方正在许多人心中尚是 “民族英雄” 的话，那么，诉宝洁的方正在许多人心中似乎已成了 “野心家”。至少，宝洁公司的代理律师就宣称，他们不是为宝洁而战，而是为社会而战。

“字体不等于汉字，这是两个概念。” 黄学钧表示，字体是汉字的风格，就像汉字的衣服，方正的各款计算机字库都是投入巨大的人力、物力、财力开发出来的，具有软件和美术作品的著作权，宝洁公司在未得到方正电子授权的情况下将方正字体用于广告、包装等商业用途，属于侵权行为。

此外，黄学钧还表示，方正电子不仅没有垄断汉字，相反，为了方便大家使用汉字，主动放弃了方正的书宋、仿宋、黑体、楷体 4 款字体的发布权收费，“只要你购买了正版字库软件，这 4 款字体，不管是个人使用还是商业使用，我们都不再收费。这 4 款字体完全可以满足人们日常生活中 90% 以上的需要。此外，只要是公益性质的或者非商业学术性活动，方正所有的字库产品都是免费的。”

方正电子的代理律师董秀生告诉《**经济周刊》，本案的焦点是字体是否应该受到《著作权法》中的美术作品著作权保护。记者在采访中了解到，字库作为软件受到著作权的保护，已是法律界的共识，但能否作为美术作品受到著作权保护，还存在争议。

记者曾多次致电宝洁**，但截至发稿时未能与相关部门取得联系。

“我们饱受盗版之苦，但这么多年来我们没有大声地去说，去主张我们的权利，因为‘大声说’需要花钱，我们没钱。” 黄学钧说。

方正尚且如此，其他字库厂商可想而知。

字库厂商：

“如果方正输了，我们就死了”

让人不可思议的是，最关心、最紧张方正诉宝洁侵权案结果的，并不是当事双方。因为对于他们来说，结果无非是输赢。但对于一些字库企业来说，此案的结果 “关系着自己的生死”。

一家字库企业的苦涩

这是一家曾经非常辉煌的字库企业，但因为盗版等原因，企业长期亏损，目前已几乎无法正常运营。公司的老总在讲述过程中，几度眼眶湿润，他用 “惨状” 来形容企业的现状。“我就是一个最贫穷的家长，带着一帮孩子，天天围着灶台转，煮了一锅稀饭，别说吃好了，我能把他们喂饱吗？能把他们养活吗？”

因为还要继续艰难经营，他不希望记者披露他的姓名和企业的名称，“因为这些状况写出来太难看了。当然，你就是不说名字，同行也知道我是谁，因为做字库的就剩我们几家了。”

2000 年时，这家企业便开始出现亏损，并持续至今。因为一直亏损，大股东开始裁员减薪。“我们的薪水在上世纪 90 年代曾经是中上水平，但 2004 年之后，竟然倒退到了 1998 年的水平，现在还是这样。10 年间，物价涨了多少？现在北京市的平均工资 3000 多元，而我们的员工一半以上都不用交税，因为收入达不到个税起征点。”

“我们的员工都是字库行业的精英，他们从 18 岁就开始做字库，都有 10 多年的从业经验，在全球字库行业都应该是大家争抢的人才，但薪水就这个价格。我们生活在社会的最底层。有的员工工作十几年了，老婆都娶不起。许多员工买不起房子，养不起小孩，看不起病，基本上要靠家人养着。但这个行业又很窄，员工另找工作也不容易，除非跳到方正，但也就这么一家方正。”

这位公司老总说，自己最不好意思和外人提及薪水状况，“我是总经理，1998 年我的月工资就有 5000 多元，而现在只有 4000 多元。有一次，我觉得一个培训班挺好的，想参加，但需要缴纳 2000 元的费用，我就没去，太贵了，公司不能再加大亏损了，一分钱我得当两分钱花啊。我办公室的花挺漂亮吧，都是我自己掏钱买的。”

薪酬过低导致公司人才流失严重。“我的设计师被挖走了，我的销售经理被挖走了，我的技术支持改行了，我的技术经理跳槽了。” 据这位公司老总介绍，公司员工已经从几年前的 40 多人减少至目前的十几个人。现在，他还兼着技术部经理、市场部经理和造字部经理三个职务。“没办法，我只能兼着了，一个人做四个人的活儿。”

因为长期亏损，该公司已经许多年没有进行字库研发，没有推出新产品了。“我们现在已经难到不能再难了。” 据公司老总介绍，大股东一直想放弃，一直要卖掉公司。“我对他们说，我在这里做了这么多年，公司就是我的孩子，你卖给谁，我就跟着谁走。但是最好别卖，我们的技术和品牌还在，卖了，国内就剩方正一家了，就没竞争了。我们也是**文化产业的一个重要组成部分，消失了是一大损失。”

“我们非常希望媒体能把我们的惨状告诉公众和相关部门，多宣传宣传我们字库行业，让大家知道字库是有知识产权的，是我们投入心血和劳动换来的，” 这位公司老总告诉《**经济周刊》，“我们非常关注方正起诉宝洁的案子，如果方正赢了，我们就可以把它作为案例去维权，去和那么多使用我们字库的企业谈判：你们都免费用了这么多年了，该交钱了吧！但如果方正输了，我们就死了。” 最后几句话，他几乎是咬着牙，一个字一个字地说出来的。

国内的字库行业似乎从来没有像今天这样的脆弱。10 多年前，业内人士还自豪于字库行业的 “辉煌”。

曾经的辉煌

计算机时代到来之前，我们暂且把这个设计字体、铸造铅字的行业称为字体行业。

我国古代印刷出版业在宋代进入黄金时代。宋代木刻雕版的字体逐渐形成一定的风格，并于明朝趋于成熟，被称作 “宋体” 或者 “明体”，是现代最通行的汉字印刷体——宋体的始祖。

清朝末年，近代印刷术传入**，铅字印刷继续沿用宋体。与此同时，**印刷出版界开始研究、推出新的字体。至上世纪三四十年代，仿宋、黑体、楷体等现代最通行的印刷字体先后出现。

解放后，随着我国出版事业的繁荣发展，以及配合国家汉字简化方案的实施，才逐步形成现在我们所使用的标准化、规范化的字体。上世纪 60 年代初，黑体、宋体、仿宋、楷体（简称 “黑宋仿楷”）成为印刷出版中的常用字体。

据《中华印刷通史》记载，到上世纪 70 年代末，国内三家字模厂共有设备 463 台，职工 1084 人，字模年产量达 3457 万只。

据方正电子字模开发部部长黄学钧介绍，计算机字体出现前，国内仅铸字耗用的铅合金便达 20 万吨，铜模有 200 万副，当时价值人民币 60 亿元。这是一个规模庞大的产业。以文字 605 厂（原上海字模二厂）为例，其 1987 年的产值便达到了 1300 万元。

1975 年，由北京大学王选教授主持研制汉字激光照排系统，史称 “748 工程”。1987 年，方正汉字激光照排系统开始在《经济日报》全面应用，**出版印刷业告别 “铅与火”，迎来 “光与电”。字模厂、字模、铅字逐渐退出历史舞台。

据方正电子字模部总经理张建国介绍，当时许多企业出于惯性开始生产字库。“方正有报纸排版系统，**印刷科学技术研究所有图书排版系统，联想、四通有文字处理机，大家必须要开发中文字库。但限于当时的技术水平，各家字库无法兼容，方正当时开发的字库，别家的系统也没法用。” 激光照排应用后，信息化时代到来之前，字库开发主要为了印刷，解决铅字时代的很多印刷字体字稿，如黑宋仿楷等的数字化的过程。简单地说，就是如何把纸上的汉字变到计算机里去。“当时，市场对字库的需求量很大，大家处于一种饥渴的状态。”

北京汉仪科印信息技术有限公司（下称 “汉仪公司”）便是在此背景下成立的。它成立于 1993 年，由**印刷科学技术研究所（下称 “印科所”）与海峡交流基金会首任董事长辜振甫先生旗下的台泥资讯股份有限公司合资成立，专业从事开发、销售中文字库。

“汉仪的名字就是辜振甫先生起的，意思是宣扬汉字的仪态、汉文化的风度。” 据汉仪公司副总经理刘嘉煜介绍，上世纪 90 年代初期，国内市场上还没有数字化曲线轮廓字库（目前的主流字库类型），仅有 10 来种字体风格的点阵或矢量的数字化字库，如黑宋仿楷、魏碑、隶书、圆头、彩云，且字数不全，彩云体才 4000 多字。而且，点阵字库在显示上并不能令人满意。“我们看好这个市场，觉得未来有很大的发展空间，公司成立之前，就和台泥开始合作，去国外接受培训，购买设备和技术，同时，组织专家设计字稿，比如把彩云体补齐。” 1995 年，汉仪公司便向市场推出 46 款高质量的字体。

据刘嘉煜介绍，从上世纪 90 年代初开始，整个 90 年代成为我国字库行业发展最辉煌的年代，国内大大小小的字库厂商有几十家，比较知名的有方正、汉仪、华文、华光、中易、四通、长城等。短短 10 年中，国内高品质的数字化曲线轮廓字库从无到有，发展到近 200 种不同字体风格的近 400 款字库。

据记者了解 ，字库行业主要厂商都有各自的客户群。新闻出版界，主要是方正；平面设计方面，主要是汉仪；电雕制版行业，主要是华文。

盗版来了

“1997～1999 年，公司还是盈利的。” 汉仪公司副总经理刘嘉煜告诉《**经济周刊》，当时，汉仪的高端产品捆绑在照排机上销售，每套售价六七万元，在市场上非常受欢迎。“但后来，盗版出来了。”

字库产品分为前端产品（用于排版系统）和后端产品（即高端产品，用于输出设备）。前端产品售价低，以汉仪字库为例，从 1995 年到 2007 年，从 40 多款字体到 130 多款字体，价格一直没变，每套 168 元，2007 年后，调价至 1000 元。

“前端产品没法保护，你提不提价，反正没人买，都是盗版使用。每次我们参加展会等活动，打折，50 元一套，能卖出几十套就不错了，一年的销售额也不过几万元。” 后端产品是汉仪公司的主要收入来源。但因为盗版的出现，汉仪字库受到了极大的冲击。“我们的后端产品本来是加密的，但道高一尺魔高一丈，被解密了。我们怎么加密，人家怎么解密，我们不得已开始降价，但人家总比我们便宜很多。因为盗版，后端产品的市场迅速饱和。此外，大大小小的输出中心越来越多，输出行业的利润空间越来越小，输出四色胶片，原来一张 40 多元，现在一张只有几块钱，他们也不可能花很多钱买我们的字库。再加上一些公司搞了新技术，把我们的前端字库进行转化，可以用在后端设备去输出使用，更是雪上加霜。”

据刘嘉煜介绍，由于字库厂商的投资得不到应有的回报，厂商开发字库的热情降低。最近五六年，投放市场的字库数量较之上世纪 90 年代有了很大的下降，只有几十款。国内的字库厂商数量也从几十家减少到几家，而真正具有生产规模的字库厂商只有方正和汉仪。字库行业的很多优秀人才也纷纷改行。记者在采访中了解到，有的字体设计师甚至改行做了汽车销售。

据方正电子字模开发部部长黄学钧介绍，方正因为有排版软件、输出软件，所以自己的字库不仅单独卖，还会加在系统里卖。“只卖字库是生存不下去了。现在，学设计的年轻人，愿意做字体设计的很少，因为赚不了钱。我们公司做字体设计的，在方正体系内还可以，因为方正对字库还有投入，但离开方正就很难生存。”

汉仪公司则开始转向海外市场。“我们这些年在做海外市场，还能赚些钱，有时还做代工，谁给钱我们就给谁设计字体，我们得吃饭。” 汉仪公司副总经理刘嘉煜感慨地说。

被误解的字库经济

几乎每个人都是字库厂商的直接或间接用户。即便你不读书不上网不用手机，但你难道不看电视，不看春晚？而春晚的字幕、贺电和对联等，用的便是某家字库厂商的字体。但这家企业的负责人很委婉地拒绝了记者的提问——“它付钱了吗？”

面对巨大的生存压力，面对规模庞大的 “善意” 的盗版者，字库企业谨慎地表达着自己的愿望。

汉仪公司副总经理刘嘉煜告诉《**经济周刊》，很多用户不了解造字行业，有很多误解。

首先，有人认为，字库是先设计几十或几百个字，然后其它字由电脑程序变化出来的。

“实际上一款好的字库是经过很复杂的工艺流程设计、加工出来的，像绣花一样，是一个字一个字地绣出来的。一款国标 GB2312-80 字库有 6763 个汉字，根据难易程度，成本在 20 万～50 万元人民币。截至目前，公司在开发字库上已投入了几千万元。”

其次，有人认为，常规的正文字库，如宋、黑、仿、楷等字体，是老祖宗留下来的东西，字库厂商怎么会拥有版权呢？应该是由国家投资，做好后让大家免费使用。

“实际上，做字库是没有政府行为的，国家没有投一分钱，这都是厂商的投资行为。黑宋仿楷比别的字库更难做，费用高、周期长，因为它是印刷字体，用途广，要求高。”

第三，有人认为，古人的字迹、作品加工成字库后应该没有版权归属，大家可以随便使用。

“以宋徽宗赵佶的瘦金体为例，国标字库至少需要 6763 个汉字，但赵佶没写那么多字，只有 4000 多字，而且还是繁体字，还有异体字，大家不一定认识。我们要进行简化字设计，还要拼字，有一系列的再加工。古人的书法作品没有版权，但经过厂商投入，制作成数字化字库之后的字体是有版权归属的。”

第四，有人认为，买了字库光盘就可以任意使用：如显示、编辑、打印、传输、媒体发布等等。

“我们需要强调和宣传的是，字库是一种艺术作品的集合，任何艺术作品在复制、发布、发行时都是需要获得授权的。”

许多人还无法接受使用某款字体需要付费的现实。而字库企业无法接受的是，自己的字库即使卖得这么便宜，许多人还不愿意付费。“我们在销售字库时，把产品分成了‘使用权’和‘发布权’，这是国情决定的。国外一个西文字库，百十个字符，卖几十美金或者欧元，我们一款字库，至少近 7000 个汉字，卖不到人民币 10 元。所以，要对发布权进行授权使用，否则我们靠什么生存？一个广告公司，你有几百台电脑，一年流水十几个亿，你哪怕 100 台电脑中安装我的正版软件，也花不了多少钱，才几万元。因为你安装得多，我会给你打折。”

一家不愿意透露姓名的字库企业负责人告诉《**经济周刊》，如果有 5% 的用户使用正版，公司就可以生存下去，但目前使用盗版的用户是 99.99%。

字库的未来

作为信息化时代的高新技术产品和新鲜事物，字库维权在法律上缺少足够的支持，法律界对如何保护字库的著作权也有不同的看法。怎么保护字库？应不应该保护字体？国外哪些做法可以借鉴？如何判断字体侵权？

方正电子字模部总经理张建国告诉《**经济周刊》，方正开始重视版权，是从起诉文星公司侵权开始的。“上世纪九十年代之前，整个行业的版权意识都不是很强。我们饱受盗版之苦，但也不知道怎么保护。当时文星把我们 12 款字库拷贝之后，改了个名字，就变成他的文星××字体了。我们当时还不知道怎么去起诉，就是觉得这里肯定有问题，但它侵犯了我们什么权利，我们也和律师在讨论。法院最后判它侵犯我们的美术作品著作权，从那时候开始，我们才知道有这样一条路可以走，可以去维权。” 为防止侵权，方正在设计字体上进行着越来越严格的量化，比如宋体 “一” 字的右上角有一个小三角，“我们会把三个角的度数确定下来，并申请著作权保护”。

“字库行业很窄、很冷门，没人了解我们的酸甜苦辣，我们怎么活的，怎么生存，大家都不知道。所以，现在维权、打盗版非常难。那些提供非法下载的小网站，好多我连他的联系人和联系方式都找不见，好不容易找到一个，举报了，关了，人家两个小时后重新注册一个域名，又开始了，防不胜防。我们有时候连诉讼的保全费都出不起，经常出了很多调查费用、公证费用，找不着人，维权之路艰难而漫长。盗版，音乐开始抓了，电影也在抓了，图片也在抓了，可我们字库呢？” 一位字库企业的负责人说。

其实，世界上最好、最大的中文字库在日本。据方正电子介绍，目前，大陆有 421 款中文字库，香港有 106 款，**有 296 款，三者相加，也不及日本字库总数的零头，日本有 2973 款字库，仅宋体就有 300 多款，每一款字库中，除几十个片假名、平假名外，其他几千个字都是汉字。受盗版所累，国内的字库产品不仅字体少，字体质量也差，技术也落后。

“我们经常看见国外的明星有汉字纹身，会很高兴，很自豪：外国人喜欢**和**文化。其实，这些老外中间有相当一部分人都以为这是日本字，因为他们是从日本字库或者日本出版物里选的。” 一位业内人士叹息道。

事实上，常被我们引以自豪的、如群星璀璨的**书法名家的作品，大部分并未开发成字库。国内字库产品中，大多数是印刷字体，是不同风格的黑宋仿楷系列。以方正为例，古今书法名家的字体，只开发了 5 款：柳（公权）体、瘦金书、康（有为）体、舒（同）体、启（功）体。原因是：目前的正版客户主要集中在出版印刷业，这个领域的主要需求是印刷字体。“**古今书法名家的作品，是我们独特的、巨大的、珍贵的资源。这将是我们以后的重点开发方向，但目前，我们只能先保证企业生存。” 方正电子字模开发部部长黄学钧说。

汉仪公司副总刘嘉煜告诉《**经济周刊》，经常会有用户问她：“汉仪的字这么好，我们很喜欢用，你们为什么不开发新产品了？每次他们问我这个问题时，我就反问：好啊，我们可以做新字体，你会掏钱买吗？对方笑一笑，就不吭声了。”

cnBeta 网友评论

• 悲哀 (2009-08-10 08:48:51)：看到没有，这就是盗版害死了**仅有的一些自主创新的企业！
• 匿名人士 (2009-08-10 08:51:18)：“这是一家曾经非常辉煌的字库企业” ＝文鼎
• 匿名人士 (2009-08-10 08:54:59)：如果我是陪审团，我认为宝洁、WOW 有罪。应该付钱。
• 匿名人士 (2009-08-10 08:56:27)：英文字母仅 26 个，而中文文字有好几千，在中文文字上付出的劳动也多得多，受保护是正常的，应该得支持。
• 匿名人士 (2009-08-10 08:57:57)：这个事情支持方正了，商业用途重要适当给些钱吧？但是王选大师的排版系统也是被方正自我封闭的做法弄的日薄西山了！
• 匿名人士 (2009-08-10 09:07:17)：方正赢定了！没有字库厂家的生产，哪来那么好看的字？
• 匿名人士 (2009-08-10 09:16:46)：美国公司，如微软，不太怕**盗版，是因为还有西方和日本等市场的正版率。**软件公司，可能还能通过海外市场的版权获益，比如去日本卖杀毒软件或者办公软件。但是汉字，西方人根本不用，最多就是日本，没有海外市场可言，真的就只能被唯一的国内市场盗版文明用语死。
• 匿名人士 (2009-08-10 09:23:04)：版权意识问题，**和日本，这个世界唯一两个最大的汉字使用国，却有不同的结局。
• 匿名人士 (2009-08-10 09:41:34)：像这种产业，国家为什么不出来扶持一下？
• 匿名人士 (2009-08-10 22:35:42)：还有什么方正开放四款免费字库，你的声明在哪里呢？你的版权协议呢？事实是你把字库使用权卖给了微软，微软用在 Windows 里面，你方正根本没有免费提供给大家使用。（注：这个说法有误，为 Windows 开发 “宋黑仿楷” 字体的是中易公司。）

今天在处理某个 JavaScript 函数的过程中，犯了一个错误。我下意识地认为 null==0 是成立的。

我们知道 null===0 肯定是不成立的。但 null==0 呢？

JavaScript 是弱类型语言，有一套复杂的类型转换规则。记忆中 null 转换为布尔值应该是 false，而且 0 也是这样，于是就想当然地认为这个相等是成立的。

但是，相等运算符（==）并不是把两个值转换为布尔值之后再进行比较，它有自己的一套比较规则。我查阅了《JavaScript 权威指南》，结果证明我最初的想法是错误的。

这就是今天的一点收获。同时也要承认，作为一个 JavaScript 初学者，自己的基础还是有很多薄弱的地方！

当我在 Google Reader（谷歌阅读器）上看到一篇好文章，想转发到 “新浪微博”，该怎么办？手工复制粘贴？那样太麻烦了，其实我们可以利用 Google Reader 的 “Send to”（发送到）功能来实现。

Google Reader 的 Send to 功能

Google Reader 在今年 8 月份的一次更新中推出了 Send to 功能，可以将正在阅读的文章转发分享至其它网站。Send to 功能不仅内置了发送到 Facebook、Twitter 等知名 SNS 网站的选项，同时还提供了自定义 Send to 菜单项的功能。

在 Google Reader 中，进入 Settings → Send to，可以进行相关设置。在设置页面的底部，我们可以点击 “Create a custom link” 来自定义自己需要的 Send to 菜单项。

Google Reader 提供了四个字段，分别表示当前阅读文章的来源网站名称、原始网址、文章标题、短网址等信息，可以在 URL 中作为参数传递给目标网站实现一定的功能。

听起来有点复杂？就让我们以 “转发到新浪微博” 为例，尝试一下自定义 Google Reader 的 Send to 功能。

新浪微博的 API

发送信息到新浪微博，除了手工发布之外，便是利用 API。所谓 API 就是程序提供的接口，可以接收数据并实现某种功能。目前新浪微博并没有正式公布 API，我所能找到的可称作 API 的东西就是新浪博客的 “分享到新浪微博” 功能。在每篇新浪博客的正文下方都有这个链接，点击它就可以进入转发页面。

这个转发页面所提供的功能虽然简单，但已经完全满足我们的要求——简单分析一下就可以发现，它可以通过 URL 中的参数信息来接收数据（包括文字和网址等等），并将其发布至新浪微博。

经过测试，我发现它目前只接受网址和文字标题这两个参数。于是我们可以把这个转发页面的 URL 精简如下：

http://v.t.sina.com.cn/share/share.php?url=文章网址&title=说明文字&content=utf-8

也就是说，把上述 URL 中的 “文章网址” 替换成真实的网址、把 “说明文字” 替换成合适的说明文字，再在浏览器中打开，我们会发现这个转发页面会把这些信息自动填入到发布框中，直接点击 “分享” 按钮就可以发布到新浪微博了。

发布环节搞定，那么现在 Google Reader 要做的，就是把文章的相关信息传递过来。

自定义 Send to 菜单项

回到 Google Reader → Settings → Send to → Create a custom link，新建一个自定义链接。我们在这里需要填写三项内容：

• Name 表示 Send to 菜单项的名称。
• URL 表示接受信息的目标网站，比如我们刚刚研究的转发页面。
• Icon URL 是 Send to 菜单项的小图标。

首先，第一项自然要填入 “新浪微博”，这个没什么可说的。

第二项是重头戏，需要用到我们在前面分析出来的新浪微博 API。我们把 Google Reader 提供的文章信息字段代入到转发页面的 URL 中，并略作加工，得到这样的结果：

http://v.t.sina.com.cn/share/share.php?url=${url}&title=转发自 Google Reader：《${title}》&content=utf-8

这串代码就是我们需要填写的第二项内容。

（你可能会惊讶这里面居然可以赤裸裸地使用汉字！没有关系，一方面新浪微博可以通过 URL 中的 content 参数来识别来源信息的字符编码格式；另一方面 Google Reader 会自动对这些 URL 中的汉字进行转义编码，不需要我们操心了。）

最后，为 “新浪微博” 菜单项挑选一个小图标。我们可以选择新浪博客页面中的微博小图标（15×15 像素）：

http://simg.sinajs.cn/blog/images/miniblog_icon.gif

也可以选择新浪微博的 Favicon（16×16 像素）：

http://t.sina.com.cn/favicon.ico

这取决于你的偏好了。

好了，保存一下我们的工作成果，回到 Google Reader 的阅读界面，就可以在 Send to 下拉菜单中找到刚刚定义好的 “新浪微博” 菜单项了（就像文章开头的图片所展示的那样）。

今后，通过简单的几次点击，就可以把我正在 Google Reader 里阅读的文章转发到新浪微博了！

“围脖精灵” 简介

“围脖精灵” 是一款供 Firefox 浏览器使用的 Greasemonkey 用户脚本（俗称 “GM 脚本” 或 “油猴脚本”），对 “新浪微博” 的界面和功能进行了增强，并提供个性化设置。

“围脖精灵” 详细介绍 >>

版本历史

v2.00.20100204 Beta

• [Update] 支持新浪微博新版。
• [Update] 暂时去除了鼠标悬停触发大头像的功能。
• [Update] 永久去除了一些微博新版自身已经实现的功能。

v1.01.20100118 Beta

• [Update] 优化架构，小幅提高性能。
• [Fix] 修正部分细微代码 bug。

v1.00.20091227 Beta

• [New] 全新架构，控制面板提供个性化设置。
• [New] 在话题页启用独立的话题搜索框。

v0.77.20091209

• [Fix] 修复当话题页面无翻页时部分功能失效的问题。

v0.76.20091203

• [Fix] 修复（受新浪微博架构更新的影响）大面积功能失效的问题。
• [New] 为对话框标题栏设置可移动鼠标的样式。

v0.75.20091126

• [Update] 去除 “禁止发布框自动获得焦点的特性” 功能。
• [Update] 临时性去除 “去掉我的首页的狗皮膏药（任务提示框）” 功能。
• [Update] 进一步调整话题页面 “高级筛选 >>” 链接的布局。

v0.74.20091125

• [Fix] 进一步修正 “原文转发”、“原文评论” 链接在视频转气泡发框内的布局错位。
• [Update] 调整话题页面 “高级筛选 >>” 链接的布局。

v0.73.20091123

• [Fix] 修正 “原文转发”、“原文评论” 链接在视频转气泡发框内的布局错位。
• [Update] 进一步优化禁止发布框自动获得焦点的功能。

v0.72.20091115

• [Update] 采用拉幕动画效果去除 “我的首页” 的任务提示框（黄色狗皮膏药）。
• [Update] 优化了禁止发布框自动获得焦点的功能，更加稳定可靠。

v0.71.20091113

• [New] 为表单标签设置手形鼠标的样式。
• [Fix] 修正在新浪微博登录页面 JS 报错的 bug。

v0.70.20091113

• [New] 去除发布框自动获得焦点的特性（防止打断阅读）。
• [Fix] 修正话题页面底部的 “我要说说” 按钮点击无法展开发布框的 bug。

v0.61.20091109

• [Fix] 修正 “关闭‘关于我’模块” 功能在某些页面失效的 bug。
• [Fix] 根据新浪微博的 UI 调整，修正话题页面 “关注该话题” 链接的布局。

v0.60.20091108

• [New] 关闭侧边栏的 “关于我” 模块（节省侧边栏的空间，提高利用率）。
• [New] 消除了鼠标在 “我关注的人” 列表上滑过时的页面跳动。
• [Fix] 修正在新浪微博首页和运营页面 JS 报错的 bug。
• [Update] 当短网址的源网址够短（不超过 40 字节）时，直接用源网址替换短网址。
• [Update] 采用新浪微博的原生动画 API 实现话题页面发布框的展开。

v0.50.20091022

• [New] 对转发气泡框内的 “原文转发”、“原文评论” 链接进行重新布局（纯 UI 调整，很小的调整，却是非常贴心）。

v0.42.20091021

• [Fix] 在单条微博的详情页面中也可以处理短网址了。
• [Update] 当短网址的源网址够短（不超过 30 字节）时，直接用源网址替换短网址。

v0.41.20091020

• [Update] 当某一短网址比其源网址更长时（这种看起来不合理的情况确实存在），直接用源网址替换短网址。

v0.40.20091019

• [New] 在状态栏直接显示 sinaurl 短网址的源地址（符合正常浏览习惯）。
• [New] 点击 sinaurl 短网址直接进入源地址（省去无意义的中转，速度更快）。

v0.31.20091016

• [Fix] 对粉丝列表页面的后续页也进行处理（比如去除 “关注所有人” 按钮等），原先只处理粉丝列表的第 1 页。

v0.30.20091016

• [New] 话题页面的搜索框自动填入当前话题关键词（便于进一步搜索）。
• [New] 话题页面的发布框自动折叠隐藏，并可展开（减少视觉干扰和误操作）。

v0.20.20091015

• [New] 去除了粉丝列表页面的 “关注所有人” 按钮。
• [New] 消除了鼠标在粉丝列表上滑过时的页面跳动。
• [Update] 自己的头像不放大，更省资源。
• [Update] “我的首页” 任务提示框的屏蔽方式改回为删除式，原因在于微博发布框会自动获取焦点，页面跳动不可避免。（但愿在 “围脖精灵” 的后续版本中，我能去掉这个烦人的 “发布框自动获取焦点” 的特性。）

v0.11.20091014

• [Update] 头像放大功能增加了 loading 提示图标，更友好。
• [Update] “我的首页” 任务提示框的屏蔽方式改为占位隐藏，而非完全删除，避免页面跳动。

v0.10.20091011

• [New] 去掉 “我的首页” 的狗皮膏药（发布框下方的任务提示框）。
• [New] 可在用户的个人资料区显示清晰大头像（鼠标悬停触发）。

本文已删除，请继续浏览其它文章。

本文目录

• 简介
• 安装方法
• 主要功能
• 开发计划
• 版本历史

简介

“围脖精灵” 是一款供 Firefox 浏览器使用的 Greasemonkey 用户脚本（俗称 “GM 脚本” 或 “油猴脚本”），对 “新浪微博” 的界面和功能进行了增强，并提供个性化设置。（开发环境为 Firefox 3.6 + Greasemonkey 0.8，条件所限，未在其它环境下测试。）

“围脖精灵” 也可称为 “微博精灵”，英文名为 “Sina Miniblog Tweak”。

目前最新版本为 v2.00 beta。

安装方法

1. 安装 Firefox 浏览器，并安装 Greasemonkey 扩展。
2. 进入 “围脖精灵” 安装地址，点击 “Installed” 按钮，安装 “围脖精灵”。
3. 登录新浪微博，无需任何设置，“围脖精灵” 会自动为您服务。

主要功能

“你的围脖你做主”——控制面板提供个性化设置

从 v1.00 版开始，“围脖精灵” 采用全新架构。“围脖精灵” 提供的所有功能都可以在控制面板中单独打开或关闭，用户可以根据自己的偏好来打造个性化的微博环境。

在用户的个人资料区显示清晰大头像

话题页的多处优化

• 搜索框自动填入当前话题关键词
• 在话题页折叠隐藏发布框，并可展开
• 在话题页启用独立的话题搜索框

优化 sinaurl 短网址

• 在浏览器状态栏直接显示短网址的源地址，符合正常浏览习惯；
• 点击短网址直接进入源地址，省去无意义的中转，速度更快；
• 当短网址的源网址够短时（不超过 40 字节），直接用源网址替换短网址。

其它界面布局和样式优化

• 对转发气泡框内的 “原文转发”、“原文评论” 链接进行重新布局。
• 消除鼠标在 “我关注的人” / “关注我的人” 列表上滑过时的页面跳动。
• 关闭侧边栏的 “关于我” 模块（节省侧边栏的空间，提高利用率）。
• 为表单标签设置手形鼠标的样式。

开发计划

• 优化图片/视频框、图片/视频转发框，提供更便捷的操作。
• 优化评论功能，比如去掉评论框自动获得焦点的特性（它真的很烦）、在评论气泡框右下角增加关闭按钮。
• 增加 “静默式” 提醒功能——即只在个人首页右侧的菜单栏显示新增粉丝数、@ 数、评论数、私信数，而不是每页顶部都提醒，避免信息焦虑。
• 微博列表（Feed List）、评论、@我的、私信中的黑/白名单过滤功能。

版本历史

版本历史详细信息 >>

经过近期的实测，发现 Googlebot 已经可以正确追踪重定向到相对路径的 301 跳转。

因此，本文内容永久性作废！

熟悉 SEO 或 HTTP 协议的朋友对 301 跳转（永久重定向）一定不会陌生，它通常用于域名变更、网站迁移等。例如，当你更换博客系统之后，为了保持博客文章原 URL 的有效性，通常就需要利用 301 跳转将访问者重定向到新地址，从而保证网站对用户和搜索引擎的友好性。

实现 301 跳转通常有 DNS 服务器、WEB 服务器、动态网页程序三种方式，最常用、最灵活的就是最后一种。以 ASP 为例，实现 301 跳转的代码通常是这样的：

<%@ Language=VBScript %>
<%
Response.Status="301 Moved Permanently"
Response.AddHeader "Location","http://www.cssmagic.net/"
Response.End
%>

这里有一个 “陷阱”。比如某一 URL 需要重定向到同一目录下的另一页面（比如 index.asp 跳转到 default.asp），根据正常思维，我们可能在 "Location" 字段中直接输入新页面的文件名（比如 "default.asp"）就完事了。因为在同一目录下嘛，根据相对路径的原理，路径自然就可以省略。此时在浏览器中测试，通常也没有问题。

但是，一次偶然的机会，我发现 Googlebot 无法正确识别这种使用相对路径的 301 跳转。遇到这种情况，Googlebot 会在 “网站管理员工具” 当中提示 “无法追踪” 错误。目前尚未确定具体原因，可能 Googlebot 是以网站的根目录（而不是当前目录）为基准来计算相对路径的，抑或是它根本就认为在这里使用相对路径是不合法的。

不管怎样，当我把 ASP 代码中的相对路径替换为绝对路径（比如 "/blog/default.asp" 或更完整的 "http://www.cssmagic.net/blog/default.asp"）之后，“网站管理员工具” 便不再报错了。

有鉴于此，撰文记录。使用 301 跳转的本意通常是考虑到 SEO，不过如果没摸透搜索引擎的脾气，效果可能就会大打折扣喽！

蓝色理想论坛正在和图灵合作举办 “《锦绣蓝图》试读赠书” 活动。于是，花了一个小时写了篇读书笔记。我承认，这是一篇完全为奖品而写的无营养无技术含量的命题作文，顺便很无耻地凑一篇博。当然，书还是不错的。只是在电脑上阅读样章实在有些难受，所以希望能赢一本书回来，哈哈。

信息架构，这是一个设计师在成长之路上必然要面对的话题。

从 “网页设计” 到 “网站设计”，设计师遇到的第一个问题应该就是信息架构。对于绝大多数网站来说，如何组织、管理、呈现数据和内容，都是需要精心设计的。如何设计一个良好的信息交互型网站，《锦绣蓝图》一书给了我们一些颇有价值的指引和启发。

在试读《锦绣蓝图》的过程中，我有很多收获。从读书笔记中摘录两个小片断与大家分享。

元数据

元数据指的是那些关于数据的数据，通常可分为固有性元数据、管理性元数据、描述性元数据这三种类型。通过对元数据的合理分析、设置、管理，可以令网站的数据更易组织和获取。

书中举了一个搜索照片的例子。作者将视角放在了用户（需要获取照片的人）这一侧，通过对具体任务（搜索照片）的模拟和推演，从而试图找到更好地为数据（图片）设置元数据（尤其是描述性元数据）的方式，从而令数据具有更好的 “可查找性”。

受控词汇表

对于交互设计与界面设计来说，为网站编辑一份文案规范词典是非常必要的。与此同时，不可忽视的是，我们还要为网站的业务或内容建立一份 “受控词汇表”。这个术语有点晦涩，可以暂且简单地理解为 “近义词表”。

它的意义在于，不同背景、不同习俗的用户对同一概念可能会存在不同的描述方法，这种差异可能表现在语言习惯上，也可能在于描述精度上，甚至可能源于笔误或以讹传讹。因此，对于网站来说，不仅要规范和统一自身的表达方式，而且还要对用户的表达具备一定的 “宽容度”，从而建立更加人性化的、更具亲和力的交互流程。

其实我们对于受控词汇表并不陌生。我们经常使用的搜索引擎在这一方面就做得非常突出，比如 Google 的搜索建议——“您是不是要找：×××”，就是受控词汇表的典型应用。

对于其它类型的网站，受控词汇表同样非常重要。例如，对于电子商务网站来说，建立一份合理的受控词汇表将大大提高产品的 “可查找性”、更好地满足顾客的检索需求，从而提高转化率，显著地促进销售。

限于篇幅，简单跟大家交流这么一些吧。

从本书的目录来看，书中还介绍了相当多的关于信息架构的理论、方法和技巧。如果有机会，一定拜读。

又一是篇意识流，建议直接标记为已读。很久以前就想写的，不知道现在还能否还原当时的思绪。

形式与内容

多年以前就职于建筑设计公司时，因为业趣和特长的关系，我也兼做设计方案的装帧设计。做得似乎还可以，同事和客户的反馈都不错。但是有一次老板跟我谈话时说道，装帧设计毕竟不是 “设计”，所以……（言下之意，这些工作非并公司主流，其酬劳是无法与我们本职的 “建筑设计” 相比的。）既然如此，我的精力也就着重放回了所谓的 “设计” 本身。

现在重新回想那句话，又另有一番理解。装帧毕竟只是一种外在形式，相对于建筑设计项目本身来说，它的重要性和影响力微乎其微，可以这样说，“形式永远无法大过内容”。

或者，从另一方面来说，这种形式上的设计，并没有多高的门槛。任何一个艺术设计专业的实习生或许都可以搞定，或者简单地外包出去也没有什么问题。但是对于建筑设计公司来说，优秀的建筑设计师和技术人才，才是真正的稀缺资源。

为形式而设计

我从小爱好美术，曾几何时，我对这种 “为形式而设计” 的思路习以为常。“好看就是王道”！时装、广告、家居装潢貌似也都是这样。但，好看的东西看多了，也就那样了，真正让你留下深刻印象的、对你来说产生实际价值的，还是它的本质所提供的——或内容，或功能。

一把造型新颖的椅子坐上去未必体贴，一双张牙舞爪的球鞋穿上去未必舒服。一只优雅别致的水龙头让人困扰如何操作，一台流线形订书机上的装饰构件让你无法看清订书针压在纸上的实际位置。华而不实的东西我们见过太多。

这没有意义。

我开始唾弃这些设计。因为它们没有意义。我们不是视觉的奴隶。我要做的不是这种没有意义的设计。

互动设计

很可惜，并不是每个人都和我英雄所见略同，尤其是那些可爱的客户们，还有我一不小心误入的互动（互联网互动广告营销）行业。

当我转行到互联网和 IT 业时，第一个接触的就是互动行业。我不知道 “互动” 算不算一个 “形式大过内容” 的行业，但至少从我们产出的作品来看，事情似乎就是这样。应该说，在这个务实的世界里，这相当罕见，而且很难理解。

在这里，视觉大过一切；这在里，视觉就是 “设计” 的全部。（——哦，天哪，我转了半天又回来了？）

在这里，“一定要炫”，是不变的信仰——仿佛它就是银弹。打开任何一件作品，任何一个 UI 元件的 hover 特效都炫目得让你想要尖叫，更不要说华丽的 3D 转场动画和劲爆的背景音乐！亲爱的，你沉醉了没……

似乎客户总是天真地以为，只要把网站做炫，就可以让浏览者乖乖掏钱买单——仿佛浏览者都是没有见世面的土包子——仿佛这种炫目的 UI 所带来的所谓 “视觉冲击” 就可以让浏览者兴奋到失去理智。但事实真的是这样吗？

登录一个汽车品牌网站，你不得不等待无法中断的 N 兆的片头动画下载完毕，耐着性子看完片头之后，华丽的主界面令你目不暇接不知所措，你费力地寻找着你最关心的配置表的链接在什么位置……那一瞬间，你对这个品牌的好感降至冰点……

当然，我相信这并非互动设计之原罪，但是，它正在被滥用。

视觉设计

我曾经是一个视觉设计爱好者，任何一颗晶莹剔透的 icon 或者任何一款如梦似幻的 filter 都足以让我为之迷恋，为之痴狂。

但是，渐渐地，我越发感到，不顾及技术实现的纯粹的视觉设计没有任何技术含量，谁都可以做，同样没有任何门槛；而不考虑实用性和易用性的纯粹的视觉设计更是没有意义，花拳绣腿纯摆设。

所以，很多自我标榜为 “网页设计师” 的同学，充其量也只能算是个 “视觉设计师”，或者说得难听点儿，也就是个 “美工”。网页设计师不是那么好当的，连单选框和复选框你都分不清楚，你还能算是个网页设计师吗？！

能把一个 UI 做到炫，真的只是一个最最低级的要求。

“好的设计影响世界。”——这里的 “设计” 绝不仅仅局限于视觉。

交互设计

让一个设计变得有意义，需要在设计过程中引入交互设计，以及一些相关的概念——可用性、用户体验、UCD 等等。

对我们来说，交互设计是一个全新的广阔领域。貌似在大多数时候，它只存在于传说之中，以至于很多现实中的人们将它和互动设计或互动程序（ActionScript）设计混为一谈，杯具。

交互设计致力于研究和优化软件产品（包括互联网产品）的人机交互流程和方式。

“任何开发基于软件的产品的公司都应该认真考虑在开发过程中导入交互设计过程。”——唐骏在 Alan Cooper《交互设计之路》一书的推荐序中这样写道。毫不夸张地说，这样的一本书和这样的一句话改变了我的人生轨迹。

如果说真的存在拯救所有糟糕的、无意义的设计的银弹，它或许就是交互设计，以及它的那帮兄弟。

在《交互设计之路》中，“交互设计” 完全成了 “设计” 的代名词。在转了一圈之后，我心目当中的 “设计” 也暂时定格在了这里。

设计？设计什么？什么设计？

这将是我一生思考的问题。

完。

“Firefox 图标不就是一个小狐狸抱着地球吗？”——其实不然，Firefox 图标的花色款式还不少呢。我是一个收集狂，今天就展示一下各款 Firefox 图标。

Phoenix/Firebird

也许你曾听说过，Firefox 最开始是不叫 Firefox 的。在 Firefox 项目创立之初，Mozilla 将它称作 Phoenix，即埃及神话中的不死鸟，意喻 Netscape/Mozilla 浏览器的血脉浴火重生。但不巧的是，这个商标已被注册。Mozilla 又将它改名为 Firebird，但仍然存在重名的问题。最终，Firefox 这个名称正式确立。

在 Firefox 这个名称启用之前，它就已经以 Phoenix 和 Firebird 的名称发布了数个测试版。很显然，它们的图标不会是一只小狐狸。

简练的线条，质朴的配色，是不是很有一种复古的感觉？

Firefox 初版

从 0.8 版开始，Firefox 这个名称正式确立，Mozilla 为它设计了全新的 logo，基本上就是我们现在所熟知的 “小狐狸抱地球” 的造型。很朴实的渐变色块的叠加，构成了这一经典的 logo。

始作俑者

八卦也要 “八” 出专业精神，这个经典的 logo 是由谁操刀设计的？

经过一番查证，我们得知，它由美国设计师 Daniel Burka 提出概念，由加拿大设计师 Stephen DesRoches 勾划草稿，最终由英国设计师 Jon Hicks 在 Fireworks MX 中绘制完成。来看一下它的铅笔草稿吧。

Firefox 改良版

不知从哪个版本（可能是 1.5 或 2.0）开始，Mozilla 对初版 Firefox 图标进行了改良。这个改良版的图标细节更为丰富，制作更为精细。地球变成了水晶效果，火焰般的狐狸尾巴也愈加鲜亮。

Firefox 加强版（草案）

为了以一个崭新的形象推出 Firefox 3.5 版本，Mozilla 决定再次改进图标。在大约 2009 年 5 月 16 日，新版图标的草稿被发布出来。

在这个版本中，图标中的地球部分基本没有变化，而火狐形象的改变较大——除了皮毛的颜色和质感之外，最显著的特点就是尾巴完全演化成了燃烧的火苗形态。

Firefox 加强版（正式稿）

在 Firefox 3.5 的第一个 RC 版发布之时，新版图标也正式面世。这个版本的图标兼具其草案和上一版图标的某些特征，它最显著的变化在于：地球的色泽更明亮，水晶高光的表现手法更突出；狐狸尾巴的火苗开始环抱地球，整个图标的立体感更强。

从图标阴影的表现手法可以看出，如果之前版本的图标像是一个平面的圆形徽章的话，这一版图标就像是一个活生生的球体了。

值得一提的是，Firefox 3.5 更换图标之后，很多粉丝大呼新图标 “不好看”、“不够精致”，尤其是在 16x16 的小图标形态下。我觉得这是一个 “习惯” 问题吧，你觉得呢？

（其实通过对照大图，我们可以发现，16x16 的小图标是单独制作的，并不是简单地缩放。因为它实在是太小了，只有像素级的绘制，才有可能最大限度地保留图像细节。）

Firefox 3.6 继续使用了这一版图标，Firefox 的下一个版本 4.0 也很可能会沿用它。

Firefox 移动版

Firefox 移动版叫做 Fennec，它实际上是一个全新的品牌，主攻手机等移动平台的浏览器市场。遗憾的是，Fennec 目前似乎还没有太大作为。

“Fennec” 的英文原意是耳廓狐，一种生活于非洲沙漠的小动物，小巧敏捷。它们最明显的特征就是那对大耳朵了。来看一下它的图标吧。

为了在低分辨率或低色深的设备上也可以清晰地显示，Fennec 的图标还有一个简化版。

关于 Firefox 移动版的 logo 图标，最被误解的一件事是，下面这张图被认为是 Fennec 的最新版图标。其实它是 Mozilla 组织的一次 Firefox 移动版形象推广海报设计大赛的优胜作品，作者是 Yaroslaff Chekunov，题为《Pocketfox》。

粉丝作品

关于 Firefox 图标的粉丝作品有很多，流传最广的应该就是这张 “狐狸咬 IE” 了吧。

其它还有一些 “大胸美女图” 也是广为人知吧，详见本文的相关链接。

最后……

为了将八卦贴伪造成技术贴，我还需要提供一些高清素材和相关链接啥的。如果你觉得以上图片的精度不够，或者想了解一些扩展话题，那么下面应该有你想要的。

相关素材

• Firefox Logo 图标铅笔草稿高清晰图片
• Firefox Logo 图标初版高清晰图片
• Firefox Logo 图标改良版高清晰图片
• Firefox Logo 最新版图标官方高清晰素材下载
• 粉丝作品 “狐狸咬 IE” 高清晰图片

抱歉，目前没有发现能稳定保存原图的网上相册，所以暂时无法提供本地的高清晰素材。它们都来源于网络，如果实在搜索不到，请在 新浪微博 发私信联系我。

相关链接

• 维基百科的 “Mozilla Firefox” 条目
• 维基百科的 “Mozilla Firefox 历史” 条目
• 设计师讲述 Firefox Logo 的诞生历程
• Firefox 移动版形象推广海报设计大赛
• 更多关于 Firefox 图标的粉丝作品

老博客的留言本存档

暴 [2010-01-20 08:38:26]

博主您还是裸奔吧~ 现在的页面太窄了，而且风格也古早了点

cssmagic [2010-01-20 17:24:19]

呵呵，没什么时间打理博客的外观。

ivane [2010-01-01 02:49:16]

请问怎样可以联系到你？

hemin007 [2009-10-09 17:26:36]

同行，加我QQ：50462391

答案：贺敏

cssmagic [2009-10-09 23:52:28]

你好，我不用QQ，你加我微博吧！:)

stri [2009-09-08 23:18:23]

呵呵!

若比邻 [2009-08-16 16:31:19]

看了您的那个2009迅雷2009页面重构工程师面试题，发现在火狐下文字有一半没半隐藏 ，比如“世界上头发最长的美女令人叹为止”的“止”就有一半漏出来，一半被隐藏。

cssmagic [2009-09-05 01:09:06]

谢谢提醒。

确实是这样，因为 Firefox 目前仍然不支持纯 CSS 实现省略号截断。

其实也是有解决方案，让文字完整截断。但需要对 Firefox 写 hack，比较复杂，于是在这个 demo 中就没有喧宾夺主了。

软件网 [2009-07-27 20:33:23]

从蓝色个人资料连接过来，写得几篇文章都很不错，很认真滴说。

随便看了下技术性蛮强的，不过文章好像很少哟~~

cssmagic [2009-02-08 01:22:22]

测试留言本~~

cssmagic [2009-08-09 13:21:33]

测试回复

这是一篇几乎与技术完全无关的文章。如果你因为技术而来，那么可以跳过本文。并且，敬请期待其它文章，近期应该会有比较密集的更新，至少我的计划是这样的。

以下是意识流。

我把这篇文章的日期设定在七夕——我的农历生日。公历生日已经过了，那一天收到一些电话和短信祝福。身在异乡收到的生日祝福，大多来自真正在乎你的人，他们对你来说也应该是非常重要的人。他们居然还记得，我心里想。公历生日那一天，吃了蛋糕许了愿，我的愿望仍然如往年一样简单。而农历生日这天，很平淡地度过。

如题所述，我 31 岁了。

来上海一年多，恋爱、失恋、无业、转行，算是一波三折。迈进而立之年的我，仍然一事无成。有时会觉得，二十多岁时，有很多日子似乎真的是虚度了，或者说，“走了弯路”？也许吧，路，都是自己选的，我不后悔。

我的爱好似乎太广泛了，加上头脑也还算灵活，所以什么事情都想尝试。三十岁之前，确实是尝试了很多行业，很好玩，很过瘾。

（此处省略四百字）

但是三十岁时，我知道自己必须要安定下来。被老外的几本书蛊惑，毅然决定转行到一直关注的 IT 行业，毅然决定投身大上海，从此开始我的 IT 民工生涯。

回首这一年多的历程，中间有过停顿和调整，但大方向应该是对的。其实我的内心已经有了一个目标，它正在逐渐清晰。但是我知道，它需要我真实的努力去实现。

这段时间的健康略有些小状况，但总体正在好转之中。接下来会好好经营一下这个博客。原先挖的坑也填得差不多了，博客的各项功能也基本可以用了，接下来就是专心写一些有价值的东西。笔记本上已经记录了很多心得，头脑中也已积累了很多素材，它们是有价值的，我相信。

似乎近期的写作遇到了瓶颈，很难再有十年前那种一口呵成的感觉。记得那时的情形常常是这样的，躺在宿舍的床上打腹稿，然后一翻身一口气一字不差地写下来，自己都非常佩服自己。现在就没那么顺。是自己的文字能力在退步吗？有可能，不过我估计跟工作压力也有很大关系。十年前完全闲得发慌，也没什么娱乐，空闲时间都用来构思文章了。现在一天工作下来，早就头晕脑涨了，写点东西自然没那么容易。

好了，意识流到此为止，接下来做回我 “技术流” 的本色吧！

某日，我在流量统计系统的 “浏览器分析” 页面中发现一条奇怪的记录 “Version 10”。这是什么浏览器？版本号达到两位数的浏览器也只有 Opera 了，所以最大 “嫌疑” 应该是 Opera 10。网上搜索的结果也证实了我的猜想。

Opera 10 用户代理字符串的变迁

之前我明明看到过 “Opera 10” 的记录啊，怎么现在显示为 “Version 10” 了？

原来 Opera 10 的用户代理字符串有变化。在 2008 年底发布的 Alpha 版中，Opera 10 的用户代理信息中规中矩：

Opera/10.00 (Macintosh; Intel Mac OS X; U; en) Presto/2.2.0

但是在后续发布的 Beta 测试版（以及即将发布的正式版）中，Opera 10 将使用类似下面这种有点奇怪的用户代理信息：

Opera/9.80 (Macintosh; Intel Mac OS X; U; en) Presto/2.2.15 Version/10.00

大跌眼镜是吧？华丽丽的 10.0 变成了 9.8？！

为何要做如此奇怪的修改

Opera 的工程师在测试中发现，Opera 10 Alpha 在很多老网站上的运作很不正常。原来，有很多网站使用了 “浏览器嗅探” 技术，也就是说网站会针对不同的浏览器提供不同的内容或功能。然而不幸的是，这些网站无法识别两位数的浏览器版本号，于是 Opera 就成了首当其冲的受害者——它们把 Opera 10.0 误认为是 Opera 1.0，并因此向 Opera 10 提供不完整的功能，甚至有些网站干脆拒绝 Opera 10 的访问。

这当然是 Opera 不愿意看到的。于是，Opera 的工程师们决定，将用户代理信息中的版本号定格在 9.8，并另外启用 Version 字段来标识真正的版本号。当然他们也考虑过选用 9.99 这个最接近 10 的可用作版本号的数字，不过出于预留空间的考虑，最终还是决定采用 9.8 作为象征性的版本号——它正好介于（Opera 9 的最后一个版本号）9.6 与 10 之间。

怎么会收集到 Version 10 这条记录

为什么我的流量统计系统会收集到 Version 10 这条记录，而不是 Opera 9？

我使用的流量统计系统是自己修改的 “阿江统计 1.3”，我着重对浏览器统计功能进行了一些优化。在对访问数据的分析过程中，我发现 Safari 早已开始在用户代理字符串中使用 Version 字段来标识版本号了（令人意外的是，Safari 字段标识的是 WebKit 内核的版本号），所以我的流量统计系统会对该字段进行分析和记录。同时，考虑到可能会有其它浏览器也使用 Version 字段，我只对在 Safari 的用户代理字符串中出现的 “Version” 进行替换处理。所以这个与 Safari 无关的 Version 10 就直接暴露出来了。

发现这个问题后，我也迅速调整了流量统计系统，实现了对 Opera 10 的准确判断。和我一样热衷于流量分析的朋友也赶快跟进吧！

参考资料

• Why Opera 10's User Agent Smells Bad
• Opera 用户代理字符串格式改动

这是我的第一次露营经历。我不是一个很会玩的人，当然也不太会写游记。所以这里也只能简单记录一下流水账，留个纪念。

缘起

公司的**同事 Zoie 不久就要回台了，走之前想邀上海的朋友一起出去玩，我很荣幸地位于此列。她是一个很可爱的人，和我遇到过的大多数人不太一样，感觉更简单，更纯粹。她少年时在美国长大，是基督徒，这次回**是为了继续基督教方面的学业，志愿以助人为自己毕生的事业。我虽然也自认一心向善，但永远不可能做到像她那样纯粹。

她的表兄 Joey 应该是个户外达人，他选择了一家户外活动团队帮助我们安排这次安吉之旅。我们定于周五晚出发，在安吉住两晚，于周日回上海。

启程

之前我以为这次露营只是公司的几个同事一起去，没想到我们其实是一个 40 人的 “国际化” 大部队。原来 Zoie 在上海的教会结识了很多朋友，基本都是外国人和 ABC。她每周都会花很多时间和他们在一起，亲密无间。

在出发的这一天，其他几个原本说好的同事突然都有事去不成了。所以当天下班后只有我和 Zoie 一起离开公司。想想即将和一大群陌生人一起旅行，我心里还真的有一点忐忑。

我没什么户外经验，按照 Joey 发来的邮件指南胡乱带了一些随身用品。Zoie 喜欢唱歌，所以还背了一把吉它。我们打车赶到出发的集合地——龙之梦，胡乱买了点吃的就上了大巴。车上已经有了一些人，有老外，也有**人，我胡乱地用中英文打着招呼。

首先认识的老外应该是来自巴西的、自称 “蔬菜” 的 Su Tzai 女士，很热情很搞怪。我坐定之后就开始胡乱地解决晚饭问题，正吃着，迎来了前几天在公司见过面的 Alan，他居然跟我说 “好久不见”，不知道是幽默还是不记得我了，呵呵。Zoie 车上车下寒暄一番之后在我身边坐下，快到发车的时间了，车上也基本坐满了。考虑到车程接近三小时，我去了趟厕所，认识了在浦东工作的郑羽同学。不久大巴就发动了，奔赴安吉。

途中又陆续认识了其他人，比如老大哥 Joey、彬彬有礼过来问好的 Russ 等等。在 Zoie 的介绍下认识了亲切随和的 Andy。当然不得不提的还有车上的焦点人物——风趣的 Paul 和她的太太爱萍。Paul 正在学习汉语，车上的女生们都在逗他说成语，一路欢笑。在 Zoie 的召唤下，我在途中还移动一下位置，认识了来自上海的小沈（Sonia）和小游。

接近午夜时分，我们终于到达目前地——浙江省湖州市安吉县天荒坪镇大溪村的某旅馆。我、郑羽、Andy 三人合住一间，时间不早，我们稍作洗漱就休息了。

高桥速降

第二天我们早早起床，Paul 过来串门。虽然我的英语水平还算不错，但跟老外聊天还是比较吃力。幸好 Paul 似乎对 IT 比较感兴趣，我们聊了一些网络方面的话题，这对我来说还算可以勉强应付。

吃过早饭，我们乘坐大巴来到今天上午的活动地点——某桥，而我们的活动项目就是有几分刺激的 “高桥速降”。

这是一座钢筋混凝土拱桥，大约 50 多米长，30 多米高，横跨在一条山涧小河之上。小河的两岸即是连绵不绝的青山竹林。远离都市喧嚣，顿觉神清气爽。

负责主持和安排活动的教练名叫大宝，也是我们这次户外旅行的领队，一个热情而稳重的山东小伙子。他在大学时就拿到了此类户外运动的教练资格。他的助手也就是他的夫人 Barbara，稍有些内向的北京女孩。

大宝在桥上叮嘱我们关于高桥速降的注意事项，Joey 负责同声翻译。这个项目有非常严格的安全措施，我们需要全附武装，头盔、救生衣、绳索、锁扣和腰带等等一个都不能少。我们每个人都会借助这些器具从桥上降落，就像从天而降的飞虎队那样。桥上的护栏上绑定了两处绳索，我们可以选择降落到河岸边，或是降落在河的正**——在降到离水面 2 米左右的高度时来一次自由落体运动。

刚听完介绍，男生们就有些跃跃欲试了。阳光渐渐火辣起来，但大家的热情不减。活泼搞怪的 Paul 第一个披挂上阵，顺利降落之后，他就跳入河中畅流起来。

在揣摩了一下基本要领之后，我第三个尝试。虽说是 “速降”，但速度完全是由自己掌握的。我在空中缓缓下降，欣赏着周围的美景，很是惬意。因为下午还有活动，而且我也没有带很多备用的衣服，所以对下水还是有点顾虑，就在岸边欣赏大家速降的英姿了。

很快就到了中午，最后几个犹豫了半天的女生终于也完成了自己的壮举，我们回到旅馆解决午餐。

山间雷雨

下午的安排是到下游的水库游泳。我们从高桥附近出发，沿着河水顺流而下。小河的水流量很小，水位不高，或许称之为小溪更合适。我们可以随意地趟溪涉水，或是在溪边的巨石上跳跃前行。抓抓小蟹、打打水仗也别有一番乐趣。

途中经过稍深一些的水潭时，就有男生按耐不住跃入其中。下午的气温还是略高，游泳实在是美事一桩。不过突然间天色一变，雷声隆隆，黄豆大的雨点就劈头盖脸地砸落下来。我们便在小潭边避雨休整。

山间雷雨来得快，也去得快。不一会儿，雨就停了，气温也凉爽多了。为了尽快到达目的地，我们上车继续前进。车外又断断续续下了几阵小雨，当我们到达水库时，雨终于完全停住，仿佛安排好的一样。

水库游泳

下车，来到大坝上。大坝的一侧是村庄，另一侧就是一个大水库。水看起来很清。

很多年没有游泳了，今天实在忍不住要试一下。其实还是有些犹豫，雨后的天气已经很凉了，怕水太凉膝盖受不了。但下水后才发现，水居然是温温的，非常舒服。

确实是多年没游了，加上肩膀上有点伤，没一会儿功夫，就觉得有点累了。游回岸边的浅滩站着休息一会儿。这时 Barbara 带着一些救生衣过来了，我拿了一件穿上，又回到深水区。漂浮在水面上的感觉非常悠闲，可以不费力地仰躺着，青山碧水尽收眼底。

在水里泡过瘾了，上岸准备下一个节目，也就是此行的重头戏之一——烧烤。

烧烤晚会

来到水库边的一小片空地上，发现大宝已经在那里搭了几堆简易的石头灶台，准备生火了。

这时女生们开始准备烧烤的食物，男生们就负责煸风点火。不一会儿，岸边就炊烟枭枭了。我们的条件艰苦了点儿，没有专业的烧烤箱，只有简易的铁丝网来摆放食物，不过大家还是忙得不亦乐乎。随着一堆堆羊肉串、牛肉、鸡翅、烤肠的新鲜出炉，大家的热情也是持续高涨，欢笑不断。

夜幕降临，大家一边吃着，一边聊着天。而 Zoie 则和几个朋友在一起唱着歌，可惜他们唱的都是福音歌，我都没听过，不然我想我也会加入其中的。

尾声之时，大家围坐成一个大圈，轮流介绍自己，并抒发对一整天活动的感想。在这个环节中，我对这些新朋友又有了更多的了解。Paul 还是那么逗趣，在我用英语介绍完自己后，他还自告奋勇地为我做中文翻译，大家自然又是笑成一片。

晚会结束后，大家收拾了一下残局，去准备我们期待已久的露营。

露营

我们坐大巴来到上午速降的那座大桥，它便是我们今晚要露营的地方。其实我们这次并不是真正的那种 “野外生存” 式的露营，整个行程都是事先准备好的。尽管如此，这些对我来说仍然是十分新奇的。

山里的蛇很多，所以大宝告诉我们，他特意选择在桥面上过夜，相对安全一些。

由于时间有限，女士们先乘车前往旅馆洗漱，而男生们则在先留在桥上搭帐篷。大宝演示了一遍之后，我们就各自分头动手实践。这种拱形的帐篷跟家里的蚊帐很相似，很快我们就完成了任务。

搭好帐篷的男士们步行回旅馆，大约一刻钟的路程。和 Alan 聊了一路，彼此更加熟悉了。路上我们还遇见了一条金环蛇，大家难免惊咤了一下。

回旅馆迅速洗漱完毕，全体队员们乘车回到桥上，准备睡觉喽。我还是和小郑同学合睡一顶帐篷。晚上很凉爽，但帐篷里面却十分闷热，我们就没有用睡袋。为了防止蚊虫钻进来，帐篷的内帐是必须拉严的，只有顶部的一个巴掌大的网状进气口可以通风，我真担心我们会不会闷死。

第二天一大早，山里的鸟儿就把我们叫醒了。在野外过夜的感觉虽说不上刺激，但也确实很难得。呼吸着清晨山里的新鲜空气，掏出手机来拍几张照片吧。

藏龙百瀑

早上回到旅馆，梳妆打扮，吃早饭。今天的节目比较简单，就是去这里的一个景点 “藏龙百瀑” 游览。

出发之前，几个外国朋友在玩着橄榄球，相互投掷传球。我昨天中午就尝试过，Russ 还教我来着，可是我就是不得要领。今天早上还是一样，投得还没有一个女生好，唉，汗颜。

今天的阳光还是比较热烈，我们涂好防晒霜就出发了。景点离旅馆不远，我们步行几分钟便到达那里。与昨天的丰富活动相比，今天的安排略显单调，也就是爬爬山，看看小瀑布。山上的游客也比较多，加上有些疲惫，我们大多意兴阑珊，走马观花般地匆匆结束了今天的全部活动。

我们回到旅馆，吃了一顿相对比较丰盛的收工饭，稍事休息便踏上了归家的旅途。

归程

回来的路上，我和 Andy 坐在一起，聊着天。经过这几天的同行，不仅交了一些比较熟悉的朋友，而且大多数队友我都可以叫出名字了。除了前面提到过的几位，还有 Alan 的夫人 Dassy，在美国长大的**男生 Jeff 和他的来自巴西的华裔美女老婆 Helen，美国的 Adam 和他的上海太太 Fredy，还有独自一人从英国来到**的小女孩 Jessica，美国美女 Rachel，帅小伙 Matt，通晓多国语言的女生 E.（不好意思要查一下 Facebook 才能写对全名）等等等等。

坐了两个多小时的车，我们顺利回到上海龙之梦。和大家告别之后，我乘地铁回家，圆满结束了这次难忘的周末旅行。

这次旅行受到的一个很大刺激，就是在这个群体之中，我的英语口语水平几乎是垫底的。要加油喽！

HTML 的空白符处理规则

HTML 中的 “空白符” 包括空格 (space)、制表符 (tab)、换行符 (CR/LF) 三种。

我们知道，在默认情况下，HTML 源码中的空白符均被显示为空格，并且连续的多个空白符会被视为一个，或者说，连续的多个空白符会被合并。

然而在有些时候，我们希望 HTML 源码中的多个连续空格在网页浏览器中可以真实地呈现，或者需要源码中的换行符能起到真正的换行作用。于是，我们发现了 <pre> 标签，它可以真实还原它内部文本的空白符的真实情况。

于是我们经常会把一段表示计算机代码的文本放进 <pre> 标签中，它们在浏览器中会表现出自身的空格缩进和换行效果，而不需要我们增加额外的样式和标签来控制它的缩进和换行。

随着对 CSS 的了解不断深入，我们发现，原来这一切都是 white-space 属性在安排。<pre> 元素之所以如此神奇，是因为它自身具有 {white-space: pre;} 这一默认样式。

white-space 属性

CSS 中的 white-space 属性用于设置文本空白符的处理规则，这其中包括：是否合并空白符、是否保留换行符、是否允许自动换行。各属性值的不同行为如下表所示：

white-space 属性值一览表

（注：在 CSS1/2 下，white-space 属性只可应用于块级元素；在 CSS 2.1 下，可应用于所有元素。）

如果我们需要某个容器元素具有类似 <pre> 元素的空白符处理行为，则为它设置 {white-space: pre;} 样式即可。

对 pre-wrap 的需求

我们先解释一下上述表格中的 “自动换行” 行为，它是指某元素内部的文本流按照文本方向排版，当文本流遇到限制其继续延伸的边界时，是否换行。“不允许自动换行” 则意味着文本流会溢出该元素。

因此，{white-space: pre;} 样式有时候并不能满足我们的期望。比如，在某些不需要特别严谨的场合，或者排版某些对换行不敏感的代码片断（比如 HTML 或 CSS）的时候，我们不希望代码片段中的一行长代码令它的容器元素产生水平滚动条，因为那样不便阅读。我们希望在这种情况下，长代码自动换行就好。

这时，对照一下上表中各属性值的不同行为特征，我们会发现 pre-wrap 这个属性值脱颖而出——它正是我们所需要的。

对 pre-wrap 的另一种需求

再来看另一种实战中可能会遇到的情形。

表单中的文本域（<textarea> 元素）可以接受包含换行符的文本数据，这是它有别于文本框（text 类型的 <input> 元素）的重要特征之一，所以我们通常也称它为 “多行文本框”。

随之而来的一个问题就是，我们通过多行文本框提交多行文本数据，是为了在网页上最终显示出多行文本。但由于浏览器对 HTML 源代码默认进行空白符合并处理，为了确保我们提交的多行文本数据最终在网页上正确地呈现出多行的形态，通常需要在服务器端做处理，比如将文本中的换行符转换为 HTML 的换行标签 <br>，再写入数据库；或者从数据库中读出文本数据时进行类似的转换操作。

这样当服务器向网页输出这些文本数据时，原始的回车状态才能得到再现。

但是，由于设计失误（或系统有意限制），服务器端可能就不会做这样的处理。从而导致这些文本信息中的换行符无法呈现出换行效果，取而代之的是一个小空格。

（下图为 cnBeta 网站对评论文本的两种不同处理方式：左侧为普通评论，可能为了限制各条评论的高度、防止恶意刷屏，系统未做换行符转换处理；右侧为热门评论，系统进行了处理。）

如果服务器端因为疏忽没有做换行符转换处理，那么在前端是否可以用最小的代价来补救？这时，pre-wrap 就可以发挥作用——无需做任何的额外处理，直接为文本的容器元素设置 {white-space: pre-wrap;} 样式，就可以还原多行文本的真实状态。

杯具的 IE6 和 IE7

再来看一下上面的表格，我们发现 pre-wrap 是从 CSS 2.1 才开始引入的属性值。然而，目前网民使用最为广泛的 IE6 和 IE7 浏览器都是基于 CSS1 和部分 CSS2 的，它们完全不能识别 pre-wrap，当然也无法实现 pre-wrap 的空白符处理行为。

在疯狂地问候了微软、IE 及其相关人等之后，网页开发者们还是不得不面对这个问题——如何在 IE6,7 下实现 pre-wrap 的效果？

在 IE6,7 下变通实现 pre-wrap

经常反复测试，我们找到了在 IE6,7 下变通实现 pre-wrap 效果的方法。

比如，有如下 HTML 结构：

<div class="content">这是一段多行文本数据
其中某些文本行会非常长从而溢出容器比如你现在看到的这行
行与行之间有换行符
但没有使用 HTML 换行标签</div>

我们需要将 .content 元素设置为 pre-wrap 样式，理想情况下只需要编写如下 CSS 代码就可以了。

.content {
    white-space: pre-wrap;
}

但为了应付 IE6,7，我们需要将上述 CSS 代码修改如下：

.content {
    white-space: pre-wrap;
    *white-space: pre;
    *word-wrap: break-word;
}

这样就可以了，我们在各浏览器中实测一下，可以发现我们需要的效果完美实现。

当然，你可能注意到了，我们使用了一点儿 CSS hack。别担心，它们条理清晰并且容易维护，我觉得这可以接受。在面对低能浏览器的时候，我们只能给予它们一些额外关照。

原理

如果你是一个实用主义者，那么文章到这里已经结束了。你可以把代码存下然后走人，或者继续浏览 CSS魔法 的其它文章。如果你是一个充满好奇心的 CSS 学习者，那么我很乐意与你一起来分析一下它的实现原理。

在上面的最终版 CSS 代码中，很显然对于标准浏览器，我们是用正常的 {white-space: pre-wrap;} 来实现所需效果的。而对于 IE6,7，我们使用了 CSS hack，让它接受额外的样式声明，使用其它方法来实现类似 pre-wrap 的效果。

首先，在 IE6,7 下，{white-space: pre-wrap;} 这条样式声明由于不能识别而被丢弃，于是我们为 .content 另外设置了 {white-space: pre;} 的样式。我们已经很熟悉 pre 了，它的特性与我们想要的 pre-wrap 效果只有一点区别，即 pre 不允许自动换行，也就是说，较长的文本行可能会溢出其容器元素。

因此，接下来，为了让这些较长的文本行自动换行，我们为 .content 元素设置 {word-wrap: break-word;} 样式（谨慎起见，我们用 CSS hack 将这条声明隔离给 IE6,7；不过即使将它暴露给所有浏览器，它也是无害的）。这条声明负责对 .content 元素内的文本行进行约束，并强制其换行。也就是说，{white-space: pre;} 完成了识别文本换行符的任务，剩下的自动换行的任务交由 {word-wrap: break-word;} 来完成。

插播 word-wrap 的相关资料

CSS 发展至今经历了多个版本，但它对文本排版的控制仍然不够精确和灵活。于是微软的 IE 浏览器开发了一些私有属性，扩展了 CSS 的文本排版功能，尤其可贵的是，这些扩展属性大多考虑到了非拉丁语系语言的排版规则。由于这些私有扩展属性确实很有价值，它们被整理并收录到了 CSS3 草案中。

word-wrap 属性就是其中很有代表性的例子。它决定了文本行超过容器的边界时是否断开转行。目前这一属性已经得到了绝大多数主流浏览器的支持。

回到前面的原理分析，其实我们会发现一个矛盾，{white-space: pre;} 很倔犟地不愿换行，而 {word-wrap: break-word;} 则要求内部文本自动换行。面对这样的冲突，浏览器如何决断？

在 CSS 中，控制文本换行方式的属性有很多，当发生冲突的时候，某些属性在文本排版中的优先级更高，因而会在冲突中胜出，决定最终的文本样式。很显然，在上面的这起冲突中，{word-wrap: break-word;} 更加强势，倔犟的文本行最终还是乖乖地换行了。

结语

感谢你看到了这里，希望这篇文章对你有所帮助！

公司开始关注 OJT（On-the-Job Training，在职培训），把刚刚完成的 “作业” 整理一下凑一篇博。

目前身在互动行业，由于互动公司通常都会配备专职的视觉设计师、Flash/AS 设计师，本文仅讨论网页制作的相关技能。考虑到部门员工的总体技术水平，本文以基础性的介绍为主，见笑，前端精英请跳过本文。（P.S. 虽然从广义上来说 Flash 的编程与制作也应属于 Web 前端范畴，但其已有脱离出去形成独立技术门类的趋势，因此，本文与本站其它文章所提到的 “Web 前端” 通常特指 HTML/CSS/JS 等 W3C 技术标准的应用。）

一、技术标准

• HTML 4.01/XHTML 1.0
• CSS 2.1
• JavaScript（ECMAScript/BOM/DOM）

二、专业技能与应用软件

• 基本英语技能。掌握基本英语词汇和语法，对文件系统、页面元素、程序变量进行合理命名。
• 计算机应用基础。利用 Windows 操作系统进行高效的、有条理的工程文件管理，手工实现基本的版本控制等。
• 图片管理。对图片文件进行高效的管理和批量操作。主要应用软件：ACDSee/Photoshop 等。
• 文本编辑。对纯文本文件进行高效快捷的编辑和处理。主要应用软件：EditPlus/UltraEdit/Notepad++ 等。
• 图像处理。精确分析和处理设计师交付的 PSD 设计稿，切片、编辑、输出网页所需图片；根据图片性质合理选择图片格式；根据图片内容和页面布局选择合理的切片方式。主要应用软件：Photoshop/ImageReady 等，推荐使用 Photoshop CS3 版本，并掌握图层分组、智能对象等高级功能。
• 基本网页制作。使用可视化网页编辑软件进行 “表格布局” 的静态网页制作与编辑，适当使用 CSS 设置文本样式。主要应用软件：Dreamweaver，版本要求 8.0 以上，熟悉站点、模板、库件等高级功能。
• 高级网页制作与调试。编写简洁、健壮的符合 Web 标准的静态页面，熟练使用 “CSS 布局” 技术，熟练编写基本的 UI 特效，熟练使用前端调试工具，熟悉跨浏览器解决方案。
• 网站规划。合理规划网站结构，保证网站的可扩展性和易维护性。
• 全局观念与上下游意识。

三、专业知识储备

• 互联网基础知识与搜索引擎相关知识。
• 服务器端基础知识：Web 服务器、动态页面语言、数据库等。
• 客户端相关知识：浏览器基本原理、浏览器的历史与种类、浏览器差异、客户端性能优化等。
• HTML/CSS/JS 等行业标准。
• 高阶知识与前沿趋势：RIA、HTML5、CSS3、Ajax、JS 框架、语义化、微格式、可访问性、用户体验、平稳退化与渐进增强等。

推荐阅读

• Web 前端工程师技能列表
• 你是一个职业的页面重构工作者吗？
• 再读《你是一个职业的页面重构工作者吗？》

继续聊一聊搜索引擎的话题。

除了您目前正在访问的这个 “CSS魔法” 之外，我还维护着另外一个站点（其实早已停止更新了，只是偶尔看一下后台流量统计的情况）。发现从 2008 年下半年（或者更早的某个时间）开始，经常出现一些来自微软 Live 搜索的流量，导致 Live 在我的 “流量统计系统” 的搜索引擎排名中迅速杀进前三甲。“CSS魔法” 开张之后不久，很快也遇到这一现象。不得不说，很意外。

其实 Live 搜索的前身就是 MSN 搜索（曾在《逃离克隆岛》电影中大做植入式广告），被微软寄予厚望。然而事与愿违，Live 搜索在全球搜索市场一直无甚作为，在**市场更是直接被无视。在这种状况之下，微软坐立不安、意图吞下雅虎抗衡 Google 自然也在情理之中。

可能是从众心理作祟吧，我对微软的东西没什么好感，对这个 Live 搜索更是没什么兴趣。我相信国内大多数网友也不太可能会选择它。可是，它为什么能够在本站的搜索引擎流量数据中稳占三成、位列三甲呢？我不由对这些来自 Live 搜索的流量充满好奇。

留意了一下访问明细，发现这些流量着实有些神秘和蹊跷。

从行为上看，它们似乎是访客，但又不太像。这些流量的来源 URL 都是清一色的 http://search.live.com/results.aspx?q=ABC（ABC 代表各种不同的关键词），URL 当中除了关键词之外没有其它任何参数，这很不正常。此外，这些关键词通常也都是简短的英文单词，顺着这个来源网址回访一下看看，会发现，把搜索记录翻过好几页也不一定能找到自己的小站。这简直让人摸不着头脑。

接着来分析这些流量，我发现这些 “用户” 居然像是克隆出来的一样。操作系统清一色 Windows Server 2003，浏览器清一色 IE6，屏幕分辨率清一色 800×600（妈呀，这是什么配置啊这是？），IP 地址清一色美国。我的脑袋再一次转不过来了。

美国？微软总部？？Live 搜索的爬虫？？？

它们很有可能是爬虫（Crawler），我这样猜测。但我很快又推翻了这个想法。因为搜索引擎的爬虫一般都会在用户代理信息中声明自己，比如 Live/MSN 搜索的爬虫据说叫做 “msnbot”，它没有道理在用户代理信息中声称自己是运行在 Windows Server 2003 上的 IE6 啊！

在网上查找搜索引擎用户代理信息的时候，偶然看到一个网友也遇到类似的情况，他认为这些流量是来自微软实验室的一些搜索实验项目。我不认同。

最终，我跳出技术思维，回到这个行业的大环境当中来思考这个问题。我得出结论，它们是 “托儿”！

前面提到过，Live 搜索在全球搜索市场上一直表现疲软，而面对竞争中的劣势时，微软难免会动些歪点子（改天我们聊一聊 “第一次浏览器大战” 的故事，很有意思）。于是我认为，这些莫名其妙的流量其实是微软派来的 “伪用户”，这些机器人伪装成来自 Live 搜索的普通用户，唯一目的就是向网站的真实流量当中注水，抬升自己在这些网站后台的流量统计系统中的排名，用一片虚假繁荣来骗取站长和开发者的重视……

在互联网时代，微软也就这点伎俩嘛。可惜这还是咱玩剩下的，这比我当年玩选秀刷票还要无聊！

后记

这是一篇老文，但即使在 “Live搜索” 演化成了 “必应” 的今天，它仍然有效。因为闹剧还在不断重演。

在 Live 搜索的域名已经重定向到必应之后的一段时间内，我仍然持续收到来自 Live 搜索的流量。真是哭笑不得。

但从本月的某个时候开始，这些 “托儿” 们已经完全换上了必应的新装。就在刚才，我收到了两次来自 http://www.bing.com/search?q=ABC 的访问。于是翻出老文，与各位分享。

今天继续蛋疼地八卦一下关于浏览器蛋糕的话题。

考虑到流量问题，所有图片只提供低精度版本，但你可以点击小图来探索原图。

IE 团队送蛋糕祝贺 Firefox 2.0 发布

在所有的浏览器蛋糕中，最具知名度的应该是 IE 团队送给 Mozilla 的两个蛋糕了。

2006 年 10 月 24 日，Firefox 2.0 正式版发布。当天，IE 团队专门制作了一个巧克力蛋糕递送到 Mozilla 公司总部，上书 “恭喜发布”，以示庆贺。

花絮

• 由于 IE7 正式版略早于 Firefox 2.0 几天发布，有粉丝开玩笑说，IE 团队的这帮家伙在交工之后 high 过头了。
• Mozilla 的员工们则开玩笑说：“下毒了？！” 不过实事上，不知道出于礼貌还是什么原因，Mozilla 员工确实保留了一块没有吃，就是 IE logo 的那一块，一直冷冻着。

IE 团队再送蛋糕祝贺 Firefox 3.0 发布

差不多两年后，2008 年 6 月 17 日，Firefox 3.0 正式版发布。IE 团队再次送上蛋糕表示祝贺。

与上次相比，这个蛋糕更加华丽，同时那个精心制作的 IE logo 也更加霸气。

花絮

• Mozilla 员工表示它很好吃！
• 媒体评论：“Mozilla 员工不但会吃掉微软刚刚送上门来的蛋糕，Firefox 也会继续蚕食 IE 的市场份额。”
• 有粉丝开玩笑说，IE 团队在蛋糕上写下 “Love” 字样时，内心一定十分纠结。因为当 Firefox 3.0 发布之际，Firefox 各版本的市场占有率已经升至 1/5，而 IE 正在持续下跌。
• 还有粉丝揶揄说，这个蛋糕里肯定有很多 bug。
• 在收到这个蛋糕之后，Mozilla 的那群家伙把上次吃剩下的 IE logo 也拿出来了，终于可以理直气壮地把它消灭了吗？

罗马尼亚 Firefox 3.5 发布聚会上的蛋糕

2009 年 6 月，Firefox 3.5 正式推出。罗马尼亚的粉丝貌似自发组织了一场聚会，他们用啤酒、蛋糕和一些小纪念品来庆祝这个重要版本的发布。

Firefox 五周岁生日蛋糕

2009 年 11 月 9 日是 Firefox 1.0 发布五周年纪念日，此时 Firefox 的市场份额已经接近 1/4。Mozilla 公司在世界各地举办聚会，庆祝这个特殊的日子。粉丝们也是各显神通，为 Firefox 制作生日蛋糕。

其中那个球形蛋糕可谓别出心裁，独树一帜啊！

“Mozilla 计划” 十周年蛋糕

1998 年 1 月，网景（Netscape）在与微软的浏览器大战中逐渐落于下风，此时的网景决定开放源代码，借助开源社区的力量完善自己的产品，史称 “Mozilla 计划”。即使是这样一个相对冷门的历史事件，也仍然有粉丝为它庆祝十周年纪念日。

谷歌浏览器一周岁生日蛋糕

2008 年 9 月 3 日，谷歌浏览器（Google Chrome）发布首个测试版。一年后，Google 公司举办了谷歌浏览器一周岁生日聚会。生日聚会当然少不了蛋糕啦！

谷歌浏览器除了采用苹果公司的开源页面渲染引擎 WebKit 之外，还自行开发了全新的 JavaScript 引擎——V8。看起来 Google 的这群天才对 V8 相当满意，做蛋糕时也不忘表示谷歌浏览器有一颗 V8 的心。

谷歌浏览器日本一周年聚会上的蛋糕

2009 年 10 月 8 日，日本东京举办了一场谷歌浏览器一周年聚会。看起来除了蛋糕之外，还有很多好吃的。

Opera 公司 15 周年纪念日蛋糕

什么，15 周年？！——没错，Opera 是一家来自挪威的老牌浏览器厂商，成立于 1995 年，同年发布 Opera 浏览器 1.0 版本。它至今仍然活跃在桌面浏览器和移动浏览器市场，被粉丝誉为最具创新意识的浏览器。

2010 年 6 月，Opera 迎来公司成立 15 周年纪念日。这貌似是公司聚会中的蛋糕吧。

最后……

我的生日快到了，送我个蛋糕吧！

由于众所周知的原因，本站域名将由 cssmagic.cn 迁移到 cssmagic.net。目前这两个域名同时有效，但在短暂的过渡期之后，将完全迁移到新域名。

感谢各位订阅本博客的朋友，现在需要麻烦你们更改一下 RSS 源的地址。请退订当前 RSS 源，并添加新的地址：

http://www.cssmagic.net/blog/rss.asp

如果您使用下列 RSS 阅读器，可以快速订阅：

• 订阅到谷歌阅读器
• 订阅到QQ邮箱
• 订阅到抓虾
• 订阅到鲜果
• 订阅到豆瓣九点

请放心，新的 RSS 源将输出本博客所有文章，不会遗漏。但如果您对旧 RSS 源中的文章加过星标，还要劳烦您重新操作一次。

域名迁移实属无奈，请您见谅！谢谢支持！

说到 “微格式”，有人力捧，有人质疑。归根结底，我觉得还是浏览器和终端设备的支持没有跟上，没有形成一个完整的应用流程。尽管如此，Yahoo、Google 等行业巨头已经开始在各自的主流产品中应用微格式。而作为网站开发者和个人站长，你对 “微格式” 的应用仍在观望之中吗？

其实，微格式并不复杂，它离我们也并不遥远。不妨现在就行动起来，试试在网页中添加微格式吧！

在我看来，微格式最主打的应用非 hCard 莫属。所以本文将着重介绍一些 hCard 的应用经验。

vCard/VCF

在讨论 hCard 之前，有必要先介绍一下 vCard。

vCard 是电子名片的文件格式标准，它可以存储联系人的姓名、公司名称、职位、电话、地址、电子信箱、网站等信息。vCard 的文件扩展名通常为 .vcf，一个简单的 VCF 文件看起来通常是这个样子的：

BEGIN:VCARD
VERSION:2.1
N:Michael;Jackson
TEL:13912345678
END:VCARD

虽然对普通网友来说，VCF 文件似乎并不常见，但事实上它已经在众多领域得到了广泛的支持和应用。

我第一次接触到 VCF 文件是在整理手机通讯录时。当时我需要将手机中的通讯录转移到新手机中，我下载并试用了一些相关的工具软件，比如 PC 端手机管理软件 NOKIA PC Suite 与 Oxygen Phone Manager、通讯录管理软件 Outlook/Outlook Express、手机端通讯录备份工具 SmartVCard 等等。我发现所有这些软件都 “不约而同” 地支持 VCF 格式，NOKIA Symbian S60 智能手机甚至原生支持在手机端导入/导出 VCF 文件。

hCard

再来看看 hCard。我们知道 hCard 是一种微格式，通常应用在 HTML 等语言中，主要用于组织并标记网页中的联络信息。hCard 直接采用 vCard 的属性名称作为自身的标记规则，这意味 hCard 与 vCard 有着天生的兼容性。这些特性令它成为最受关注的微格式应用。

和其它微格式一样，hCard 对网页的浏览者是完全透明的。hCard 使用 HTML 标签的 class 属性来对数据进行标记。有时，当 HTML 文档中现有的标签不足以进行细致的标记时，可能需要增加额外的标签（通常是不影响网页外观的 <span> 或 <div> 标签）。关于在网页中添加 hCard（或将 vCard 转换成 hCard）的具体方法，我不打算在此赘述，因为网上已经有了非常详尽的参考资料，我会将它们列在本文的末尾。

在何处添加 hCard

在网页的什么地方添加 hCard 呢？其实从它的用途可以看出，网页中凡是涉及到个人、网站或公司的联系信息都可以采用 hCard 来进行标记。

以 CSS魔法 的首页为例，涉及此类联系信息的页面元素有站点标题、“关于站长”、“友情链接” 三块区域，我们就可以分别以网站、站长、朋友为主体单独设置 hCard。

为什么要使用 hCard

你可能会问，既然 hCard 对网页的浏览者是完全透明的，那我们为什么又要费神费力地在网页中添加 hCard 呢？

目前看来，这似乎是一件费力不讨好的事情，因为 hCard 等微格式尚未得到浏览器和终端设备的良好支持。但是一旦这些不足得到了改善，hCard 就会为我们的数字生活带来极大的便利。来看几个理想中的例子：

• 当我用手机浏览某公司的网站时，手机浏览器识别出了网页中的 hCard 信息。这个 hCard 标记了该公司的多种联络方式，手机浏览器很聪明地提示我 “是否保存到通讯录”，于是我很经松地保存了我所需要的信息。
• 手机浏览器还可以将页面中的 hCard 导出为 VCF 文件，我将 VCF 文件用蓝牙传输到同事的手机上，他们也轻松保存了这些联系信息，同时也可以方便地同步到电脑上的通讯录软件中。
• 更令我惊喜的是，手机浏览器识别出了 hCard 中的地理位置信息（经纬度），并可将此信息传递给手机内的 GPS 导航软件，这样连出行道路都不需要我四处打听了！

这些应用看起来似乎不错吧？其实这些情景离我们已经越来越近了，目前 hCard 已经有了一些可行的应用流程。

现阶段的 hCard 应用

现阶段的 hCard 应用主要以桌面端为主，因为目前似乎还没有支持微格式的手机端浏览器。

目前可以识别微格式信息的浏览器包括安装了 Tails Export 或 Operator 扩展的 Firefox，以及安装了 Safari Microformats Plugin 插件的 Mac 版 Safari 浏览器。

这些的浏览器在识别出页面中的 hCard 信息之后，通常都可以提供导出 VCF 文件的功能。这些导出的 VCF 文件可以很方便地添加到本机的通讯录（Outlook 或 Address Book）中，随后便可以通过 NOKIA PC Suite 或 Apple iTunes 等软件将本机通讯录同步到 NOKIA 手机或 iPhone/iPod 等便携设备之中。

其中，Safari Microformats Plugin 插件可以直接将 hCard 中的联系人信息导入本机（仅限 Mac OS）的通讯录。

此外，Firefox 的 Operator 扩展还提供了一些针对微格式的在线应用，比如 “使用 Google 地图查找”、“添加至雅虎通讯录” 等等，有效地丰富了 hCard 的应用范围。

值得一提的是，还有一个完全在线的、与浏览器无关的实现方案——Microformats Bookmarklet（微格式书签）。虽然它的界面明显借鉴自 Safari Microformats Plugin，但它实际上是跨浏览器的（支持 Safari、Firefox 和 IE 等浏览器）。它的使用很简单，也很有趣，把这个链接 “[微格式书签工具](javascript:%28function%28%29{function%20l%28u,i,t,b%29{var%20d=document;if%28!d.getElementById%28i%29%29{var s=d.createElement%28'script'%29;s.src=u;s.id=i;d.body.appendChild%28s%29}s=setInterval%28function%28%29{u=0;try{u=t.call%28%29}catch%28i%29{}if%28u%29{clearInterval%28s%29;b.call%28%29}},200%29}l%28'http://leftlogic.com/js/microformats.js','MF_loader',function%28%29{return!!%28typeof MicroformatsBookmarklet=='function'%29}, function%28%29{MicroformatsBookmarklet%28%29}%29}%29%28%29;)” 拖放至书签栏（或添加到收藏夹），就算是完成了 “安装”。此后在浏览任何网页时，只要点击这个书签项（或打开这个收藏夹项目），就可以识别并操作网页中的微格式信息了。（不过这个工具需要调用 jQuery，可能会与网页自身调用的 JS 库相冲突，或者因 jQuery 加载失败导致失效，不够稳定。）

结语

虽然目前微格式尚未得到浏览器和终端设备的良好支持，但我们相信，在不远的将来，hCard 等微格式应用会令网页中的信息更加精确和丰富，并为互联网用户带来更多的便利。

相关阅读

• hCard 的官方资料
• 中文维基百科: vCard
• 中文维基百科: hCard
• 用 hCard 添加手机联系人（应用流程示例）
• 微格式 Microformats >> hCard（中文参考资料）
• 使用微格式来丰富网站语义: hCard

日常生活中思空见惯的小物品也可能蕴涵着大智慧，不信来看一下这个传说中的 “神奇的小便斗”。

小便斗里的 “苍蝇”

在新浪微博上看到一张趣味贴图，据说：

荷兰一个城市的洗手间里，可以发现每个小便池里都有一只苍蝇。

仔细看，这隻黑色轮廓的苍蝇，蚀刻在陶瓷上，原来会诱使男士一看到便瞄准。“小便池里的苍蝇” 这项研究发现，它成功地把飞溅出来的小便减少了 80%。

这个创意令人拍案叫绝。我们都知道，在公共厕所减少小便溅洒一直是一个让人头痛的问题。这种微妙的心理引导显然要比 “是人上前一步” 这样的标语要优雅和有效得多。

在 Google 图片搜索里看了一下，已经有相当多的国家（包括**）的公厕采用了这个创意。比如 这里 和 这里。

方形的小便斗

在小便斗这个题材上，有杰作，也有反面教材。比如我平生第一次遇见的 “方形小便斗”。

我在公司楼下新装修的卫生间里被它雷到了，一眼看过去，我感觉它有几大硬伤：

• 相对常见的圆形或凸形，它消耗的材料更多，重量大，生产运输更耗能。
• 平面相对曲面更容易导致小便溅洒。
• 从视觉上来说，方形的物体轮廓会阻碍用户的靠近，进一步导致小便溅洒。

这里着重解释一下最后一条，我们用一个例子来说明。用 Windows 自带的 Times New Roman 字体来显示 “OL” 这两个字母，只要字号相同，它们看起来就是一样高的，这没有什么异常。

但如果将它们放大，我们会发现看起来高度相同的两个字母，实际上高度是不同的：圆形（或凸形）的轮廓实际上总是超出我们视觉概念中的高度界限，而方形则具有先天的视觉膨胀效应。考虑这种视觉差异，几乎所有的字体在设计时都会对不同形状的字母进行相应调整。

同理，对于小便斗来说，在视觉上，方形小便斗与用户之间具有天生的隔阂。

此外，从人类的生理构造角度来看，圆形（或凸形）小便斗更容易令人靠近；而我在使用方形小便斗的时候，则明显感觉到它在向外 “推” 我——毕竟谁也不喜欢自己的裤子碰到小便斗吧！

总之，我无法解释为什么它会被设计出来，并且活生生地存在。难道是因为：

• 建模更方便？
• 堆叠、装箱更方便？

但是在这两条理由中，用户在哪儿？还有那些溅洒在地上的小便呢？

终于享受到了一把公司福利，或者也可以算是一次意外的收获。

没想到我们公司的大客户雪佛兰会发邀请函来，我们忙得昏天黑地，总算有点补偿。这次的活动叫 “雪佛兰之夜”，我不太清楚活动的具体内容，但看到邀请函上那帅气的 “大黄蜂”——雪佛兰 Camaro 跑车，我的情绪立马高涨起来。但是，我完全没有想到，我会见到《越狱》男主角温特沃什·米勒（Wentworth Miller）！

慌乱的雨夜

今天下着雨，但我还是很想去看一看 Camaro 的，幸好几个同事也都说会去。吃过晚饭，时间有一点紧，匆忙出门打车奔赴会场——1933老场坊。半路上突然发现自己忘了带邀请函，晕！回去取是来不及了，算了，先过去再说。

路程有一点远，又撞上坏天气，灰头土脸赶到目的地时显然已经迟到。首先要解决的是进场问题，跋山涉水跑来却被挡在门外岂不是太窝囊了！不过我不得不承认我当天的 RP 确实不错，刚进门就发现有一同事携女友正准备 check in，我赶紧上前亲密寒暄，谈笑间便已翩然混进会场。

优雅的米勒

电梯直达四楼主会场，未进大门就听见主持人那彪悍的女高音：“……米勒先生！”

什么？米勒？！

温特沃什·米勒是雪佛兰新车 “科鲁兹” 的代言人，这我早已知道，而且这个活动据说也是跟新车发布有关，但是我完全没有预料到今晚的活动会有米勒在！没什么可说的，冲进会场，掏出手机开拍。

场内已经围了很多人，还有举着 KT 版的影迷，我这个迟到者只能被隔离在十米开外。米勒被安排在内场背景墙上的一个看台上，离地三、四米左右的样子。米勒身边还有女主持人和影迷代表。

不知道米勒与影迷见面的环节已经进行了多长时间，我进场时影迷代表正在送礼物给米勒。米勒与现场影迷用汉语互道 “我爱你” 之后离开。米勒果然还是那个米勒，他就像一个真实的 Michael Scofield，彬彬有礼，气宇不凡。

迷人的 Camaro

米勒的环节结束之后，影迷骤散。主持人也适时宣布，接下来可以自由享受音乐和饮料。此时众人关注的焦点自然就转移到了 “大黄蜂” Camaro 的身上。热情的观众将 Camaro 团团围住，我等了很久才有机会与它合影。我承认，第一次见到现实版的大黄蜂，我还是有些激动的。

Camaro 是典型的美系跑车，硬朗，低调。熟悉的黄黑涂装令人心动不已。我知道我和它的 “缘份” 仅限于此，但我还是乐此不疲地围着它拍了又拍……

精致的会场

雪佛兰显然是为这次晚会下了不少功夫，会场被精心装饰，新颖雅致。“金领结” 标志也被巧妙融入到环境与道具之中，随处可见。同事 MM 们在炫目灯光的映衬下，似乎也变得妩媚动人起来……

慌乱的雨夜·续

夜已深。准备离开时发现雨伞丢失，而窗外正是滂沱大雨。

在一楼大厅看见几位 MM 捧着 “Wentworth 贴吧” 的牌子正在合影，这一幕似曾相识。驻足 N 秒，离开。

不出所料，老场坊大门口等车的群众已是人满为患。与几人合打一部车得已离开，随后辗转几路地铁之后终于归家。

累了，但还是有那么一点兴奋。《越狱》第四季刚刚复播，新出的第 17 集还没来及得下载观赏，没想到却看到了米勒。

不错，很神奇的一天！

做为一个资深铁杆骨灰级的变形金刚迷，必须要聊一聊这部电影——《变形金刚 2：堕落金刚的复仇》。我知道这个话题似乎已经有些泛滥了，但我这里为你准备的是一些你可能不知道的特别花絮。

IMAX 版与普通版

上一集没有看过 IMAX 版，这次身在上海，我当然不能错过。如果你以为 IMAX 版和普通版是一模一样的，那你就错了。那么这两者究竟有何区别？下面为你一一道来。

删改镜头

IMAX 可不仅仅是银幕大一点，它的胶片是一个完全独立的版本。上映前夕你可能听到有传言说，部分涉及上海的镜头在大陆公映时会被删减。但实事上这些镜头被重新制作了，抹掉了部分关键标识，从而保证全片在大陆完整上映。

这其中最有具代表性的镜头就是（开场不久擎天柱与毁灭者相遇时）立交桥侧面的 “淮海中路” 和 “雁荡路” 的路牌，这些字样在 720P 的预告片中清晰可辨。在**大陆的影院版中，这个镜头中的路牌被拿掉了（场景都是三维模型，重新渲染了一遍而已）。但是，在 IMAX 版本中，路牌是存在的！当时在看 IMAX 的时候，我差点蹦了起来！

宽屏与全屏

相信每个人回忆起这部电影，都会对树林中的那场激战津津乐道。但如果你看过 IMAX 版本，你会更加赞不绝口。在 IMAX 版本中，部分高潮场景的画面由正常的超宽银幕（2.35:1）切换为全屏尺寸（4:3），纵向视觉高度得到极大扩展，观众的视野瞬间被完全占据，相具临场感，那种视觉震撼无以言表。

这种全屏效果并非简单粗暴地把画面拉伸变形，实际上，这些场影在拍摄和制作时就使用了 4:3 的胶片。而普通版胶片在处理这些场影时，只能截取原始胶片中间的一长条区域，可以说是 “不完整” 的版本。

总之，对铁杆迷友来说，IMAX 确实值得一看。

片名

第二集的片名似乎在第一集上映后不久就曝光了，《Transformers: Revenge of the Fallen》也有译作 “卷土重来” 的。当时很多人应该都没有想到这个 “Fallen” 居然是片中某个角色的名字。但事实上这个 “堕落金刚” 曾在变形金刚漫画中登场。

除此以外，这部电影中还有其它一些令老迷友倍感亲切的经典元素。

经典元素

虽然真人版的变形金刚电影并没有以现有的变形金刚动画或漫画为创作原型，但片中还是保留了一些经典元素。即使剧情略显单薄，但这些经典元素仍然让人眼前一亮。

堕落金刚与十三使徒

我对变形金刚漫画不甚了解，而且变形金刚漫画系列又是如些繁杂。我只知道在某个漫画系列中，原始天尊为与宇宙大帝抗衡，创造了第一批变形金刚——十三使徒。然而他们中间出现了一个叛徒，就是堕落金刚。这其中的某些细节与 G1 系列的设定不同，但无伤大雅，其实变形金刚的故事主线在这么多年来，一直在处在不断的修正和完善当中。

领导模块/能源宝/能源矩阵

前两个词是我们熟悉的 G1 动画中的翻译，后面一个是《变形金刚 2》电影中文字幕的翻译，它们指的都是同一个东西（The Matrix）。领导模块是变形金刚系列中非常重要的道具之一。在 G1 动画中，它由至尊太君制造，它的历史至少可以追溯到原始天尊与宇宙大帝的对立时期，后成为汽车人的传家宝，汇聚了汽车人历任领袖的灵魂和智慧。在《变形金刚 2》中，它是十三使徒的遗物，是激活某种能量的钥匙，除此之外并没有更多的交待。

在电影中，领导模块的造型标新立异。但是它像第一集中的火种源（魔方）一样被轻易摧毁，再次让人感到有点无厘头。这些变形金刚的圣物在地球这儿也太没地位了吧，来一样灭一样。

挖地虎与大力神

大力神可是变形金刚动画中最令人印象深刻的角色之一，因为它是第一个出现的组合金刚，实力排名也是屈指可数。在电影中，工地旁的几辆貌似平常的工程车突然变形合体，着实令人震憾！只可惜一世英名的大力神居然变成了四足行走的怪兽，意外，但似乎也在整部电影的格调设定之中。值得一提的是，大力神的绝招 “吞食天地” 让我想到了另一个永远吃不饱的怪物——宇宙大帝。

擎天柱复活

在 G1 动画中，擎天柱多次以不同方式复活。在这部电影，再现了这一经典剧情设置。同时，“合体加强版” 也是我们非常熟悉的噱头。

天火倒戈

天火弃暗投明，这也与 G1 动画中的情节类似。更有意思的是，在 G1 动画中，天火也是很早之前就来到地球并沉睡至今。

好了，怀旧时间告一段落。接下来聊点常规话题。

特效

原版的《变形金刚》动画系列可以说就是一部宏大的史诗片，然而，这些优秀的素材很显然被浪费了。目前这两集真人版《变形金刚》电影的剧情乏善可陈，活生生降级成了 “视觉大片”。不过它们也确实不辱 “使命”，不仅叫座，而且也当仁不让地代表了目前电影特效的最高水平。

《变形金刚 2》的视觉特效仍然由工业光魔（ILM）操刀，延续其一贯的高超水准。从建模到渲染，从贴图到动态，以及数字场景与实拍场景的融合，都做得异常逼真。整部电影完全看不出加工的痕迹，让人忘记这是一部电脑加工合成的 “虚拟” 电影。

展望

很早就已经得知，变形金刚的真人电影版会拍成三部曲。第三集的拍摄也早已列入计划，并预定于 2012 年夏季上映。

虽然前两集的剧情都相当一般，但看到那么经典元素，我对第三集的剧情还是有那么一点期待。前两集的场面已经相当宏大，无形之中为第三集的制作带来不小压力。组合金刚也出来了，十三使徒也露一小脸了，第三集玩点什么呢？

或许第三集的战场会转移到太空？或者按照终极 Boss 的演化过程（威震天 → 堕落金刚）来看，第三集可能不得不引出真正的幕后黑手——宇宙大帝？？届时，美国大兵再次如有神助，再上一出《独立日》？？？

谁知道呢，在恶趣味的麦克尔·贝手里，一切皆有可能。

Steve Krug

Steve Krug 是谁？也许这个名字听起来有点陌生，但说到他的大作却是如雷贯耳。他就是网站可用性（易用性）经典著作《Don't Make Me Think》的作者。

Steve Krug 大师是我的偶像，他的这本著作改变了我的人生。每当我在工作中遇到挫折的时候，我都会翻出这本书，重新燃起内心深处的动力。

新书

Steve Krug 大师这回带来了他的新书——《Rocket Surgery Made Easy: The Do-It-Yourself Guide to Finding and Fixing Usability Problems》，又一本关于网站可用性的著作，被誉为《Don't Make Me Think》的姐妹篇。

据说，自上市以来，该书雄据 Amazon 网站设计类图书排行榜前三名。

这本书将由人民邮电出版社引进。出版社表示，史无前例，Steve Krug 授权**读者来为新书的中文版命名。因此，人民邮电出版社与蓝色理想经典论坛在 5 月中旬联合举办了征名活动。

征名

“为 Steve Krug 新书翻译书名？！”——天哪，这个活动我当然要参加！

我梳理了一下思路，很快提交了我的方案：

书名：

《妙手回春：无师自通的可用性优化指南》

创意说明：

如果你知道《Don’t Make Me Think》的中文版译名，那你看到一定知道我在说什么，并会心一笑。

没错，《DMMT》的中文译名是《点石成金：访客至上的网页设计秘笈》，很多人很不喜欢，我觉得还凑合。主标题用一个成语来翻译，这个点子不错，多于四个字的主标题很可能会被淘汰。（以上各位，我无意冒犯。）

因此，我在翻译这本新书的书名时，仍然保留前作《DMMT》的中文译名风格。主标题采用四字成语，而且同样有一定的玄幻色彩。“妙手回春” 犹如信手拈来，恰似翻掌之间便扭转乾坤，大师般的从容淡定突出一个 “易” 字（Made Easy）；同时这个成语通常用于形容高超的医术，暗合 “火箭手术”（Rocket Surgery）。

再看副标题，依然与前作的中文副标题一呼一和，仿佛对联般工整。“无师自通” 即是 “Do-It-Yourself” 的最高境界；而 “Finding and Fixing Usability Problems” 所做的，不正是 “可用性优化” 吗？

圆梦

我对这个译名还是很满意的，我也最终如愿，在这次活动中胜出！

出版社表示将采用我的方案，同时编辑老师做了一些修改，最终定名为《妙手回春：网站可用性测试及优化指南》。

作为优胜者，我获得了出版社提供的 200 元赠书。更令我兴奋不已的是，据说我的名字将作为书名提供者出现在书中。能出现在偶像的书中，荣幸之至！

后记

目前，这本书在人民邮电出版社的网站已经可以查询，出版日期显示为 2010 年 7 月，应该很快会在各大网上书店铺货。

旧观念

在我的既有观念中，搜索引擎的网页爬虫/蜘蛛/机器人（Crawler/Spider/Robot）只抓取页面的 HTML 代码，对于内部或外部的 JS 与 CSS 代码是一律无视的。所以我们也经常会说，Ajax 不利于搜索引擎的抓取，不利于 SEO。

因为在我们看来，搜索引擎爬虫毕竟不是功能强大的浏览器，它无法运行 JS，也无法渲染 CSS。那些五彩缤纷的页面，在爬虫眼中不过是纯粹的文本流（或包含了结构标记的文本信息流）而已。

然而，近期看到的两则关于 Google 的新闻，彻底颠覆了我对搜索引擎爬虫的认知。

新闻一

一段来自 Google 资深工程师 Matt Cutts 的视频震惊了我。Matt 告诫我们，不仅文本与背景同色、字体大小设置为 0、用 CSS 隐藏文字等等这些伎俩已经是小儿科了，而且 Google 现在还可以识别通过 JS 来隐藏文字的作弊方法。

在视频中，一段隐晦的 JS 代码将某元素的 .style.display 属性设置为 'none'，试图隐藏那些只打算提供给搜索引擎、而不展示给用户的文字。Matt 表示，这种作弊方式现在已经瞒不了 Google 了。

新闻二

新闻二更加恐怖，据说 Google 可以抓取 Ajax 内容！该文表示，给 URL 的 hash 部分加上特定的标识符（即 domain.com/#abc 改为 domain.com/#!abc），会让 Googlebot 领悟到该 URL 是一个 Ajax 页面（而非页面中的锚点），并进行抓取。

你可能对 Google 的这一技术改进没多少兴趣，但你肯定注意到了问题的本质：Googlebot 可以抓取 Ajax 内容，也就是说，Googlebot 完全有能力运行页面中的 JS，而且功能完善！

爬虫与浏览器

如果这两则新闻都是真的，那么，从某种意义上说，爬虫的行为和能力已经与浏览器越来越接近了。这也意味着，搜索引擎爬虫将抓取更多的内容（包括 JS 和 CSS 文件），网站的流量负载将会加大。

另一方面，爬虫在抓取页面的过程中也将产生更多的资源消耗——毕意仅仅处理文本信息的资源开销要远远小于完整地渲染页面和运行客户端程序。

因此，我目前仍然对这两则新闻半信半疑。难道这是 Google 放出的烟幕弹？或者是好事者炮制的假新闻？如果 Googlebot 真的已经具备了运行 JS 或渲染 CSS 的能力，那么为了将资源开销控制在合理的范围内，或许 Google 会在内部启用黑/白名单机制？

站长们

如果担心爬虫对主机流量的侵蚀，或许可以考虑在 robots.txt 文件中禁止爬虫对 *.js 和 *.css 文件的抓取。不过暂不确定这样做是否存在不良的副作用。

或许也有人会担心，正常的页面布局有时候也需要使用一些隐藏文字的手段，比如 CSS 图代文、隐藏模块的 hx 标识信息等等。这样会不会被 Google 判定为作弊呢？

我相信对于像 Google 这样 “聪明” 的搜索引擎来说，它即然有能力让爬虫运行 JS 和 CSS，它也必然有能力来判断什么是作弊、什么是正常的布局需要。所以我觉得站长们大可不必惊慌，平常该怎样就怎样，身正不怕影斜，规则总是用来约束那些 “不法之徒” 的。

所以，对于某些 SEOer 来说，这似乎是个坏消息。如果他们还在考虑是否还有新的作弊方案，那么我觉得意义不大。很显然，SEO 作弊手段的生存空间将越来越小，与此同时，网站自身内容的价值才是 SEO 的真实基础。我的建议是：语义化是最好的 SEO。

相关阅读

• 作弊链接骗不了 Google
• 微调 URL 使得 Google 能索引 Ajax 的内容 (原文) (地址已失效)
• 微调 URL 使得 Google 能索引 Ajax 的内容 (玩聚SR存档)

小站还没有 “穿衣服” 就匆匆上线之后，陆续迎来了一些来自搜索引擎的访客（当然这其中以 Google 用户为主）。通过 “流量统计系统” 分析了一下来路关键词，发现一些惊喜。

小站开张之后，我就一直在关注小站的站名 “CSS魔法” 在搜索引擎里的表现。小站在这个关键词的排名上很快就勇拔头筹——当然这是意料之中的。但接下来发现，小站在其它一些关键词上的表现也非常突出，譬如 “CSS 习题”、“CSS 练习题”、“Web 标准面试题” 等等，居然也是非常靠前的。在发布了 某篇 CSS 教程 之后，“二级导航制作”、“折叠二级导航” 等关键词也给小站带来了少许流量。这些情况倒是令我有些意外，毕竟小站未做刻意推广或 SEO。

如果要找原因的话，我觉得还是应该归功于良好的 HTML 结构和语义化标签的运用。在建博之前，小站的页面均为手写，力求语义化标签的合理运用；同时，对页面头部的 <title> 和 <meta> 信息也做了合理的安排。这其中的要点在于：

• 正如每篇文章都有其标题一样，每个页面都必须拥有 <h1> 元素，其内容应该是页面内容的大标题。而且通常页面 <title> 也应该包含此信息。这样一来，<h1> 元素和页面 <title> 很自然地就包含了站点或该页面的核心关键词，并不需要刻意地进行所谓的 “优化”。
• 合理地运用 <h2>、<h3> 等标题元素。对于内容页来说，它们自然就是文章的不同级别的标题；而对于首页或功能页来说，我一般还将它们用作功能区块的标志元素。
• 页面描述的 <meta> 信息的重要性不可忽视，应包含或概括页面的核心内容。（不过由于精力有限，本站早期页面的描述信息采用的是公用的模板。）
• Web 标准的优越性已经深入人心了，结构与表现的分离至关重要。在制作页面时，尽量保证页面代码纯净无杂质，避免表格的嵌套和 <font>、<center> 等纯表现的标签。这样整个页面的体积非常轻巧，便于搜索引擎抓取。
• 还可以在页面中使用 <strong>、<em>、<dfn> 等元素进一步强化关键词。似乎这个步骤的重要性远不及前面几条，适量使用就好。

做完了这些，搜索引擎自然会对页面的品质和价值有一个积极的判断。我甚至在猜测，像 Google 这样聪明的搜索引擎，会不会对采用丰富的语义化标签进行编写的页面更有好感，从而加大权重？

P.S. 窃喜了一段时间之后，我也很快冷静下来，小站的优势关键词还是比较冷门。如果哪天在 “CSS” 这样的关键词排名中也名列前茅的话，那才叫牛×！