博客园-棕熊@Think Fast棕熊@Think Fast

[多图尝鲜] Google Chrome 试用 Tips

棕熊 — Mon, 08 Sep 2008 06:40:00 GMT

阅读: 2467 评论: 11 作者: 棕熊发表于 2008-09-08 14:40 原文链接

Hi, 大家好~ 好久没有发有营养的东西，今天就扔一篇最近热点的Google Chrome 浏览器的试用心得吧。

先说个比较搞的事情，Google Chrome 的英文名字其实还不错（虽然会让人联想到Firefox 的 chrome 协议），但不知为何，中文语言包就硬生生地把它翻译成了“谷歌浏览器”…… 这……Google被翻译成谷歌已经实属郁闷了，这次干脆把Chrome几个字吃掉了，好硬的牙口=v=

言归正传，还是以web前端开发者的角度来谈谈Google Chrome 吧。

首先呢，google做了一件虽然看上去是普宣，但其实多少故意针对前端开发者的很smart宣传——大家请看——google chrome geek comic：

本物comic 网址：http://www.google.com/googlebooks/chrome/

这种geek comic 其实是前端开发间很流行的一种艺术形式，算是很恰当的把技术和现代艺术结合了，所以看得懂这个的人，应该很有潜质做前端开发才对

在Google Chrome 发布以前，流传着一些Google会自己开发浏览器内核的风闻。不过随着Chrome的发布，流言不攻自破。Chrome 的确是使用了Webkit 的内核，所以基本可以参照同类的Safari，连UA都是这样的：

Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US) AppleWebKit/525.13 (KHTML, like Gecko) Chrome/0.X.Y.Z Safari/525.13.

所以初步测试，对于样式表的解析和javascript的执行，Chrome 与 Safari 类似度颇高：

左图为Chrome, 右图为Safari。可以看见，Safari 除了拥有自己的字体加强算法之外，其它的呈现和Chrome无异。（PS: 照片系老赵授权发布，请大家不要转载，要看的可以去这里保存，另外还有老赵超多的萌图雷图等你发现）

甚至两者都有相似的输入框高亮和改变textarea大小的功能：

连ACID3评分也差不多：（如果不了解ACID3，可以到这里看看100分是什么情况的）

好消息是，Chrome也会支持一些未来世代(?)的功能。还记得这个Canvas应用么？

所以至此，我们不必太担心hack对Chrome的影响，因为和Mac 的Safari 3.1 （自称是上最好的浏览器……Apple官网）使用同样的webkit core, 所以hack方面完全兼容——其实在这样令人省心的浏览器上，根本没必要用hack。如果真要使用的话，推荐用一些CSS3的伪类，比如:first-of-type。不过这样真的是完全没有必要的

不过现在暂时还没有报导声称能使用CSS hack 区别Chrome 和Safari 3.1（理论上也不太可能会有）。对此我们以娱乐的心态持续关注中=v= （撒花

最后顺便介绍一下Chrome 为前端开发者提供的一些小工具：

首先是Web Inspector: 在页面上任何地方点右键，在上下文菜单里会有“审查元素”的选项。不过这词翻译的……审查

之后就会有一个类似于DOM inspector 的东东出现……感觉到有点像Opera的Dragonfly。请注意右下角的metrics：

另外，也支持 javascript console（有代码提示功能）：

以及网页下载速度分析的功能，支持按照时间轴，文件大小，单个文件查看：

但是似乎还是不能查看一个文件详细的header信息，所以暂时还要借助Fiddler

只能以命令行方式运作的 JavaScript Debugger:

只有最基本的功能……期待这块以后有所加强。完全可以和firebug 一样集成在DOM Inspector里嘛

不过下面这个东西还是很好用的——一个内建的Task Manager：

可以监测网页的性能，比windows 自带的task manager 精确多了，可以用来跑一些test case 来测试性能也不错

基本就这些了，如果有些新的发现再向大家汇报哟~ 以上，大家下次见了哟~

PS：上文部分技术规格来源于Google Chrome相关文档。

评论: 11　查看评论　发表评论

最新新闻：
· 淘宝网通过索引模式涉足网络文学(2010-02-10 15:59)
· 苹果发布 iPhone/iPad SDK 3.2 beta2 开发包(2010-02-10 15:37)
· “谷姐”：披着“谷歌”羊皮的悲哀？(2010-02-10 15:32)
· 2010，奇虎的本命年(2010-02-10 15:26)
· 微软赢得Windows XP WGA诉讼(2010-02-10 15:23)

编辑推荐：Google Buzz相关新闻

网站导航：博客园首页个人主页新闻闪存小组博问社区知识库

嘿嘿，插播消息，最新一期的流言终结者

棕熊 — Sat, 30 Aug 2008 03:57:00 GMT

阅读: 35080 评论: 3 作者: 棕熊发表于 2008-08-30 11:57 原文链接

在给nVidia 的nVision 作广告。Adam 老了很多，Jamie 还是老样子。两个人还是很恶搞 =v=

评论: 3　查看评论　发表评论

编辑推荐：Google Buzz相关新闻

网站导航：博客园首页个人主页新闻闪存小组博问社区知识库

[Quicky] block 和 inline 答案揭晓~ 另付一则，关于 word-break

棕熊 — Fri, 04 Jul 2008 11:31:00 GMT

阅读: 2238 评论: 5 作者: 棕熊发表于 2008-07-04 19:31 原文链接

Hi hi, 大家好~ 过了短短的一天我们又见面了哟~

在昨天的文章，《 [Quicky] block 和 inline 的区别是？》里，我给大家留了个问题——LI 元素到底是block level 的，还是 inline的？现在让我们来揭晓答案吧——

当当~ 恭喜Duron800同学~ 答对了哟~ 撒花~~

的确，LI 元素既不是 block level, 也不是 inline 的，因为 BODY 元素不能包含 LI 。LI 只能被 OL, UL, DIR 和MENU 这几个元素包含。其中后两个元素已经不被推荐使用了，常用的只有前两个。至于显示上，一个LI 元素默认的 display 属性一般都是 list-item (在比较旧的IE上是block)，一般会被呈现成两个block box (一个是LI 的内容，一个是LI 前面的记号，比如一个小点，或者阿拉伯数字什么的)。

同样道理，DT, DD 这样的标签，因为不能被 BODY 包含，所以也会处于这种两者都不在的状态，真可怜

另外讲个今天发现的，关于 word-break: break-all 的小故事。请大家先看代码——

     DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>word-break: break-all demotitle>

    <style type="text/css" media="screen">

    p {

        border: 1px solid #000;

        width: 100px;

        margin: 20px;

        padding: 20px;

        font-size: 14px;

        word-break: break-all;

    }

    style>

    head>

    <body>

    <p>MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMp>

    <p>?????????????????????????????????????????????????????????????????????????????????????????????????p>

    body>

    html>

立即运行这个demo (记得要用IE哟=v=)

看见了吧，IE 在两个连续的标点之间，是不会正确的呈现break-all 的

其实我本人是极力反对使用break-all 这种东东的，因为作为一个样式属性，活生生地把一个单词从中截断，明显会影响这个词的意义——也就是数据——这个不应该被样式表操作的东西，于是违反了样式表将数据和表现分离的初衷。但是国内做项目么……过度需求也不是什么个别现象了

所以，在很多时候不得不使用到word-break: break-all。但是今天，被tester 的jj 一顿暴利破坏式乱打，居然测出了前面的这个东东

因为以前对这个属性没啥研究，所以特意去问 Dflying gg，这是不是IE的啥bug，结果1居然说，这个不是bug, 是feature，各么我彻底 ft =v=

据1的解释，这个是因为标点符号必须和文字分别处理造成的，但是我翻遍了~~架空的~~规范，似乎只找到了说要对CJK（即中日韩）文本的标点作特殊处理，而不考虑其他语言的。对于这个，我们只能耸耸肩，起码IE 能不完全的支持这个CSS3的属性已经很不错了。

在这里，权且写上这么一句，大家以后遇到类似问题起码有个借鉴

最后，向大家求个好用的Windows Live Writer 的语法高亮插件。现在我用的是一个叫 Code Snippet 的东东，但是它生成的样式和我现在的blog 实在不太合拍。不知道有没有什么插件能定制代码块的样式？或者有个方法能定制一下这个插件生成代码的样式也行。先bow了

那么，大家下次再见了哟~

评论: 5　查看评论　发表评论

编辑推荐：Google Buzz相关新闻

网站导航：博客园首页个人主页新闻闪存小组博问社区知识库

[Quicky] block 和 inline 的区别是？

棕熊 — Thu, 03 Jul 2008 11:55:00 GMT

阅读: 4148 评论: 38 作者: 棕熊发表于 2008-07-03 19:55 原文链接

Hiya, 大家好~ 又是我哟

在讲样式表开发管理之前，我想插播一个小知识。前几天看web标准设计组里，看到龍佑康同学问到关于 block 和 inline 的区别。记得以前也经常会有人问这样的问题，国内的论坛也好，国外的论坛也好，似乎大家都会比较疑惑这两者究竟是用来干什么的。想想其实好多人都会在这里犯一些比较常见错误，所以干脆就开一篇文章专门讲讲 block 和 inline 吧。

- 讲表现之前先要讲概念

这里我要强调一下，概念在前端开发中是很重要的啦~

可能很多人都觉得，随便搞个样式，左摆摆右弄弄，能用就行了，但是实际上，很多情况都会有一些非常棘手的状况。对于这些状况，你需要有应对。应对的方法取决于很多因素，其中一个是灵感，还有一个就是对概念深入的理解了。

这里，我们要明确的概念是——什么是 block, 而什么又是 inline 呢？

其实，金光闪闪bling bling的规范里，在三个完全不同的地方提到了block和inline的概念。或许这个就是为什么这么多人都会感到confused 的原因吧=v=

- Block-level Elements VS Inline Elements

第一处讲到block和inline概念的地方是在 HTML 的规范中。确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素):

所有允许被 BODY 元素包含的元素，要么是块级的；要么是内联的；要么既可以算作块级的，也可以算作内联的。但是绝对不存在一个能被BODY包含，但即非块级，又非内联的元素。

常见的块级元素有 DIV, FORM, TABLE, P, PRE, H1~H6, DL, OL, UL 等等。

常见的内联元素有 SPAN, A, STRONG, EM, LABEL, INPUT, SELECT, TEXTAREA, IMG, BR 等等。

另外，SCRIPT, OBJECT, MAP, BUTTON, DEL, INS 这些元素，既可以作为块级元素，也可以作为内联元素。

那么块级元素和内联元素具体有什么区别呢？具体表现在以下几个方面：

一般来说块级元素可以包含块级元素和内联元素；但内联元素只能包含内联元素。要注意的是，每个特定的元素，能包含的元素也是特定的，所以具体到个别元素上，这条规律是不适用的。

比如 P 元素，只能包含内联元素，而不能包含块级元素。
```
 1: 
```
```
 2: <div>一段文字div>p>
```
```
 3:  
```
```
 4: 
```
```
 5: 一段文字span>p>
```
另一个区别是在显示上。块级元素通常被现实为独立的一块，前后都会和换一行；内联元素则前后不会产生换行，一系列内联元素都在一行内显示。但是，最终决定页面显示的是样式表，而非元素本身。这条规则的制定，估计多半是为了让那些先于规范出现的浏览器能自圆其说而已

比如我们知道，TABLE 元素的默认显示布局其实是用一套独特的 display: table 规则；而 BR 元素，根本本身就是个换行；哪怕一个DIV，都能用样式表直接指定它 display: inline，所以这条规则也根本等于没用。

那么本质的区别呢？其实最本质的区别在于——在 Strict 的DTD下，BODY 元素只能包含块级元素，而不能包含内联元素。或许你要问，不是说BODY包含的元素不是块级就是内联么？怎么没有内联了？很简单——因为在Transitional 的DTD里，BODY也是可以包含内联元素的

大家来看具体例子：

    DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Block-Level vs Inline Demotitle>
    head>
     
    <body>
     
    
    <img src="/SomeImage.png" title="an image" alt="an image" />
     
    
    <p><img src="/SomeImage.png" title="an image" alt="an image" />p>
     
    body>
    html>
    

    DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Block-Level vs Inline Demotitle>
    head>
     
    <body>
     
    
    <img src="/SomeImage.png" title="an image" alt="an image" />
    <p><img src="/SomeImage.png" title="an image" alt="an image" />p>
     
    body>
    html>
    

- Block Box VS Inline Box

大家应该对CSS的盒式模型有些了解了吧。网页上内容的布局，都是靠controlling box来实现的。

在CSS2.1的规范里，Controlling box 分三类——block box, inline box, 和至今都没怎么被广泛支持的run-in box。这就是规范中第二处提到block 和inline 的地方。网页上的内容，不论是不是有标签包围，或者设定了何种显示方式，最终都会被计算成一个 controlling box，并应用布局规则。

好在这个过程对于前端开发来说是透明的，大家可以不用去考虑，而只要考虑这两种盒的区别就行了

在普通布局中，block box 是从上至下，一个隔一个的布局的；inline box 则是从左至右（也可能因为设置了direction而从右到左，或者从上到下）首尾相接，不间断的布局的。
inline box 不响应垂直margin, width, height, max/min width/height 等属性声明；block box 则可以响应这些属性。

常用的基本上就这样了。

- display: block VS display: inline

最后一个有提到block 和inline 的地方就是这里了。和其他两个地方不同，block 和inline 并不是display 这个属性的唯一取值。CSS2.1规范中，display 属性的取值可以为以下的任何一个：inline, block, list-item, run-in, inline-block, table, inline-table, table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell, table-caption, none, inherit。

在通常情况下，display: block 能让元素生成一个block box, 而display: inline 会生成inline box。至于两者的区别请见上一节

- 最后大家有兴趣的话

可以思考一下LI 元素到底是block level 还是inline 的哟~

结果明天公布。那么，就到这里吧，大家下次见说

评论: 38　查看评论　发表评论

编辑推荐：Google Buzz相关新闻

网站导航：博客园首页个人主页新闻闪存小组博问社区知识库

[教程] 谈谈网页设计中的字体应用 (4) 实战应用篇·下

棕熊 — Thu, 26 Jun 2008 08:23:00 GMT

阅读: 6384 评论: 24 作者: 棕熊发表于 2008-06-26 16:23 原文链接

Yoho, 大家好，又是我哟~

首先抱歉让大家等了这么多时间。最近实在比较繁忙啦。不过我还是会尽量抽空出来给大家讲点有的没的，欢迎大家继续关注哦。

上次我讲了在实际应用font-family时会遇到的浏览器兼容性问题。这次我要从操作系统方面来讲如何安排字体族。另外，由于中文字体的选择范围实在太小，所以本章中设计的内容主要以西文字体为主，比较适合上一章中的“方案二”。

- 不同操作系统的常用字体

如何让你的字体在任何系统，任何电脑上都看起来一致？

原则很简单。尽可能使用所有操作系统都存在的字体。虽然听起来比较简单，但是其实还是很tricky的一件事情。为此，你首先需要了解常用的操作系统的字体。

下面我会列出一些除了windows以外的常用操作的默认字体。windows么……想来大家应该已经很熟悉了

- Mac OS X 中的常用字体

一个典型安装的 Mac OS X 10.4 会包含以下常用西文字体（某些非常用字体就不列出了）：

sans-serif	serif	monospace
Helvetica	Times	Courier
Arial	Times New Roman	Courier New
Arial Narrow	Georgia
Arial Black
Comic Sans MS
Gill Sans
Impact
Trebuchet MS
Verdana
Lucida Grande

- 典型的 Linux 字体

典型的Linux只有kernel，所以字体要自己安装

既然这样，自然无法正确预测使用Linux的用户装了啥字体。不过好在大家都会装一些常用的字体，因此不会有什么大问题。

- 比较各个操作系统的字体，我们会发现——

其实，windows 常用的字体其它操作系统都有，甚至很多人认为windows only 的 Arial 字体也不例外~

不少设计师都认为 Arial 是个不典雅的字体，所以希望在 Mac 上能用更经典的 Helvetica 字体来代替，于是产生了这种代码：

font-family: Arial, Helvetica, sans-serif;

但是因为Mac OS 其实也有Arial 字体，所以永远都只会显示Arial

其实这种问题，只要稍加修改就OK了啦：

font-family: Helvetica, Arial, sans-serif;

但是事情往往不是这么简单的。比如上面的Mac OS X字体表中，由个 Lucida Grande 字体。照理说这个字体是Mac only的，所以大家理应可以放心的这么写：

font-family: "Lucida Grande", Arial, sans-serif;

那么Mac用户可以看到Lucida Grande, 而PC用户可以看到Arial字体。多好的应用典范。

但是实际上呢，不少PC用户居然看到了乱码，而不是 Arial 字体

怎么回事呢？因为市面上有不少字体下载网站，而上面就有那个Lucida Grande下载。可惜这个广为流传的 Lucida Grande 是个rip版，而且rip的时候有缺陷，导致所有换行字符都会显示成一个乱码……

——囧大了

不要说这种事情只会在乱装英文字体的用户上发生哟。能在XP上显示微软雅黑的，不都是rip版的嘛——那个网上广为流传的版本，也存在着类似缺陷，只不过不至于严重到产生乱码而已。所以在选择字体时需要注意一下。

- 常用西文字体介绍

Tahoma 16px Tahoma 14px Tahoma 12px

Tahoma是我本人比较喜欢的一种非衬线字体。首先几乎所有的系统都默认安装了这个字体，所以不会存在兼容性问题，其次，这个字体也比较均衡，显示段落也不错。

Verdana 16px Verdana 14px Verdana 12px

说老实话，Verdana太宽了，不适合中英文混排。很多时候Verdana的一个字母都要比同样size的中文字符宽了。国外设计师喜欢用Verdana, 很多时候是因为Verdana 11px以下的小字效果的确十分理想，但是国内很多设计师想也不想就照搬过来，并用在12px 乃至14px的布局上，导致本来就局促的空间更显紧张，所以不推荐作为font-family 打头阵的字体。

如果要使用Verdana字体的话，就一定要考虑它和一般系统default的sans-serif字体之间的大小差距。不论和Helvetica 或者Arial 比起来，Verdana都大得多了。不过好在几乎所有的系统也都会默认安装这个字体……

Trebuchet MS 16px Trebuchet MS 14px Trebuchet MS 12px

Trebuchet MS 是个很多人都会忽视的字体。其实我个人也比较欣赏这个字体的。与其使用Verdana, 还不如用这个线条更圆润的的字体来替代。对各种操作系统也有很好的支持。

缺点是和Verdana一样，因为过宽，而不适合用在中英文混排。也要注意和default sans-serif font 宽度差距的问题。

因为考虑到有些Linux 系统可能不会安装这个字体，所以如果要用在一个font-family的开头话，可以使用Verdana 做后续字体。

Arial 16px Arial 14px Arial 12px

Windows 操作系统的默认sans-serif 字体。没啥好说的，永远都不会用到的默认字体。

Helvetica 16px Helvetica 14px Helvetica 12px

为啥同样是默认字体，Helvetica 就这么典雅呢？哪怕就是用在font-family的开头也是能独挡一面的啦。

另外，这里有个 Helvetica 和 Arial 打架的flash游戏~ 像超级玛利一样踩 Arial 字符就可以了。顺便没有 Helvetica 字体的人可以看一下两个字体的具体区别~ 茶~

Georgia 16px Georgia 14px Georgia 12px

我最喜欢用的 serif 字体。不仅很适合做正文，也适合做标题。尤其是意大利体的 Georgia Italic 更是魅力难挡。缺点仍旧是不适宜和汉字混排，因为Georgia的衬线哪怕对于宋体来说也太重了，所以看上去硬邦邦的……

Times New Roman 16px Times New Roman 14px Times New Roman 12px

Windows 的默认serif 字体。没啥好说的，西文字体的元老了。很多字体，比如大家都熟悉的Courier New都是从Times New Roman派生出来的。

不过现在印刷业都很少用这个字体了，更多的是在用它的后代——Times Europa 和 Times Europa Office。

在具体的网页字体应用上，要注意同样字号的Times New Roman比普通字体小的多，所以一定要考虑进字体大小的变化

Courier New 16px Courier New 14px Courier New 12px

常用的等宽字体之一。其实等宽字体的选择比较小啦，所以基本上要兼容所有系统，也就只能选这个字体了。

不过还好，等宽字体通常都是在写代码的时候有用，所以只要等宽就没什么大问题。类似于 Lucida Sans Typewriter, Lucida Console, Monaco 之类的字体也都很好用。

- 综上所述，总结几套实用而简单的font-family

font-family: Tahoma, Helvetica, Arial, sans-serif;

Tahoma 系的中性字体。推荐使用在13px以上的环境。

font-family: Trebuchet MS, Verdana, Helvetica, Arial, sans-serif;

Verdana 系的宽扁字体。推荐在11px以下环境使用。

font-family: Geogia, Times New Roman, Times, serif;

衬线字体的不二之选。

font-family: Lucida Console, Monaco, Courier New, mono, monospace;

一系列等宽字体。写代码很好用。另外，如果觉得Lucida Console太宽的话，可以换成比较窄的Lucida Sans Typewriter。话说老赵blog上的代码块使用的就是Lucida Sans Typewriter 哟~

- 你知道吗？

字体的别名
系统中的一个字体是允许有多种别名形式存在的。比如，在windows 下，Georgia 也可以用 Georgia MS 来命名，它们其实是同一种字体。宋体的正式名称是SimSon，而“宋体”只是它的别名。

按照规范，浏览器应该能自动识别字体的别名，并映射到正确的字体文件。比如，font-famliy: SimSon 和 font-family: "宋体" 应该具有等价的效果。可惜，似乎很多浏览器都不能正确执行前一条定义……
什么时候在字体名称前面加引号
大家来看这个字体样式定义：

font-family: Times New Roman, 宋体, serif;

很多人都会说，这个样式写法是错的，因为 Times New Roman 和宋体都应该用引号括起来，像下面这样：

font-family: "Times New Roman", "宋体", serif;

实际上呢，上面两种写法都是对的。和很多人想象中的不一样，字体名称外面的引号其实并非必须的。那么加引号和不加引号有什么区别呢？

其实最大的不同在于对字体名称中空白字符（如空格、制表符）的解释。

不加引号的时候，浏览器对于字体名称中空白字符的解释应该和XML中一样，即忽略字体名称左右的空白字符，并且单词中间的空白字符被解释为一个空格。比如 font-family: Times New Roman , serif; 会被解释成 font-family: Times New Roman, serif;

加引号的时候，浏览器必须保留引号内所有的空白字符。如果写成 font-family: "Times New Roman"; 那么浏览器不会显示 Times New Roman 字体，而是搜索一个叫做“Times New Roman”的字体。

至于“宋体”这样的字体名称，因为中间没有空白字符，因此完全没有必要加引号。但是考虑到并非左右的操作系统都有汉字支持，并且并非所有的程序员都会注意css文件的正确编码问题，所有保险起见，一般会加上引号。当然，解决这种问题的最好方法是使用别名。比如宋体，其实应该写成SimSon，这样哪怕浏览者的系统不支持中文，并且这个css文件被错误的编码成了GB2132也没问题，浏览器还是知道这是宋体，并且做出正确的字体搜索。可惜，不是所有浏览器都支持就是了……

网页设计中的字体应用这个专题就讲到这里了，希望对大家有所帮助。下次我打算讲一下在项目中如何应用样式表管理，适合稍微有些样式表基础，并且正在参与、或者有意参与大型开发项目的朋友们听哦~ 其中还可能穿插一些小文章，解释一些实际工作中大家遇到的容易误解的地方。不过最近偶会比较忙一些，所以可能会花些时间来写，请大家耐心等待啦。

那么，大家下次见了哟~

评论: 24　查看评论　发表评论

编辑推荐：Google Buzz相关新闻

网站导航：博客园首页个人主页新闻闪存小组博问社区知识库

Hiatus

棕熊 — Fri, 30 May 2008 15:39:00 GMT

阅读: 1285 评论: 9 作者: 棕熊发表于 2008-05-30 23:39 原文链接

最近几周工作比较忙，实在无暇照顾自己的博客。今天偶然一看，居然大家都这么热心的留言，让偶大为感动@@

好在该忙得都快忙得差不多了，过几天后我会继续写以前没完成的文章，并且回复大家最近的留言。在这里我谢谢大家的热心关注了~ 偷偷的说，我可是很感动的哟

评论: 9　查看评论　发表评论

编辑推荐：Google Buzz相关新闻

网站导航：博客园首页个人主页新闻闪存小组博问社区知识库

[教程] 谈谈网页设计中的字体应用 (3) 实战应用篇·上

棕熊 — Sun, 11 May 2008 12:44:00 GMT

阅读: 5309 评论: 27 作者: 棕熊发表于 2008-05-11 20:44 原文链接

Hello, 大家好，又是我~

大家有看过font set和一些要注意的基本问题以及通用字体族两篇文章后，应该对字体的基本有了一些了解。现在我们开始把这些知识都应用到实战中吧！

- 规范中 font-family 的解释方式

我们定义下面这个字体表：

font-family: "Comic Sans MS", "幼圆", "黑体", sans-serif;

按照W3C的规范，浏览器在使用这个 font-family 显示一个字符时，首先应该寻找 Comic Sans MS 字体。如果找不到 Comic Sans MS 字体，那么顺序搜寻下一个字体，即幼圆字体。如果找到 Comic Sans MS 这个字体，那么浏览器会在 Comic Sans MS 字体中寻找这个字符。如果找到这个字符，就使用 Comic Sans MS 字体来显示这个字符。如果没有找到这个字符，或者这个字符对应一个缺字符（缺字符是字体文件中的一种特殊字符，用来表示字体文件中没有这个字符。通常就是显示一个方块），那么就要到下一个字体，也就是幼圆体中继续搜寻这个字符。如此搜索整个字体表，知道搜索到这个字符为止。如果在通用字体，也就是这里的 sans-serif 字体中也找不到这个字符的话，那么浏览器就应该显示该字体的缺字符。

所以，如果有下面这句话：

所以我说：“这也是没办法的，it ain't going nowhere”。

那么，在一个正常的Windows XP系统上，所有中文字符都会被显示为幼圆，英文字符都被显示为 Comic Sans MS 字体。比如“说”字，浏览器先搜索 Comic Sans MS 字体，得到一个缺字符，于是搜索幼圆。系统中存在幼圆字体，于是终止搜索，将“说”字显示为幼圆字体。对于英文字符“i”，浏览器在 Comic Sans MS 这个字体中就能找到这个字符，于是就用 Comic Sans MS 显示 i 这个字符。

另外，双引号——“”，这两个字符其实在 Comic Sans MS 中也有。所以浏览器会用 Comic Sans MS 中的双引号来显示。

- 事实上呢？

大家来看看截图吧：

Internet Explorer 7

Firefox 2

Opera 9

Safari 3.1 Windows

……简直是一个浏览器一个样子嘛

这样还叫人怎么正经干活嘛

仔细看看，其实Firefox 和Safari 显示的还算靠谱，在这个例子里，显示的都正确。IE 和 Opera 都没有能用正确的字体显示中文字符。因为在 Comic Sans MS 搜索失效后，理应搜索幼圆字体。但不知道因为什么原因，IE 和 Opera 都没有顺序搜索下一个字体，甚至也没有搜索后面的黑体和sans-serif，而是直接跳到系统默认字体了——请注意，是系统默认字体，因为我已经在 Opera 里把 sans-serif 设成了雅黑，如果 Opera 还有良心搜索下 sans-serif 的话，还是应该用雅黑显示中文字符的。而且，不知怎么的，Comic Sans MS 中明明存在的双引号，也没能在 Opera 中得到正确的显示。什么号称最完美支持 CSS 的浏览器嘛，简直浪得虚名

IE 7 起码还好些，至少认了和英文字符直接相连的双引号。但是除此之外，也算是完败。

另外大家也不要认为Safari 是好人——某些版本的 Safari 3 for Windows 在第一个字体中寻找不到中文字符时，它干脆就显示了那个字体的缺字符，于是，所有的中文网页变成了整屏的囗囗囗囗囗囗囗，根本无法阅读经本人和其他许多发现这个bug的人多次向Apple交涉，他们才最终修正了这个bug。

至于 Firefox, 其实也不完美，因为 Firefox 不支持字体别名。于是幼圆你只能写成"幼圆"，黑体你只能写成"黑体"，而不能用他们在系统中的正式字体名称——YouYuan 和 SimHei 。

对于浏览器为什么会产生这么多五花八门的奇怪渲染，偶也不知道，估计只有问这些浏览器的开发人员了

- 解决方案

因为主流浏览器在中文显示中实在无法统一，因此，解决上面这个问题的办法也只能是折衷和妥协的方案。至于如何折衷，那么要看你到底想要保证英文字符的显示效果，还是中文字符的显示效果。

如果你希望保证中文的显示效果，那么你必须把你想要显示的中文字体放在 family-font 定义的第一位。比如上面例子里的样式定义，你可以写成：

font-family: "幼圆", "Comic Sans MS", sans-serif;

这样就可以保证所有中文字符都显示为幼圆。至于为什么 IE 和 Opera 又认了在 font-family 首位的幼圆，这个也不要问偶，总之它们就是认了

这样做的缺点也是显而易见的。一般中文字体中都会包含英文字符，比如上面的幼圆。所以网页中的英文字符也会优先应用这些中文字体来显示。而中文字体中的英文字符，通常都不怎么好看。比如还是这个幼圆，里面的英文字符根本就和宋体一模一样，根本和幼圆中的中文字符不搭调。于是中英混排的文章就极其难看。而且很遗憾，一般网页上，中英混排的情况还是很多的，比如用户名、日期时间、URL等等，总是少不了英数字……

另外，这个方案也不能从根本上解决浏览器对中文字符支持的缺陷。比如这种情况：有人非常喜欢黑体字的效果，所以想用微软雅黑来显示你的网页，但是考虑到只有 Windows Vista 才有微软雅黑字体，所以打算在没有雅黑的电脑上用黑体来显示文字，于是他写了这么个样式规则：

font-family: "微软雅黑", "黑体", sans-serif;

但实际测试下来，他会发现，即使第一个字体设置成了中文字体，在这个字体缺失的情况下，IE 和 Opera 还是不会使用第二位的黑体，而继续它们自己的莫名其妙的规则，使用了系统默认字体——宋体。这显然还是不能满足设置 font-family 属性的初衷。

第二个方案是，仍旧按照CSS标准的解释方式来写 font-family，但是在 font-size 上做些手脚，只用 12px, 14px, 16px 等稳扎稳打的字体大小。这样做最大的好处是能优先用最合适的字体显示英文字符。至于中文字符，XP的宋体也好，Vista的雅黑也好，OS的新宋体也好，在上面几个字体大小下显示的都不算难看。何况中文字体的选择范围本来就比较小，无外乎也就是那几个系统默认字体，因此自然也凑合。个人比较倾向使用这种方案。

至于具体选用哪种方案，还需要大家根据实际情况斟酌而定。

今天就讲到这里吧。下次我会从跨平台兼容性上讲述如何实际应用字体哟~

那么，大家下次见吧~

评论: 27　查看评论　发表评论

编辑推荐：Google Buzz相关新闻

网站导航：博客园首页个人主页新闻闪存小组博问社区知识库

[教程] 谈谈网页设计中的字体应用 (2) serif 和 sans-serif

棕熊 — Mon, 05 May 2008 16:19:00 GMT

阅读: 6671 评论: 37 作者: 棕熊发表于 2008-05-06 00:19 原文链接

Howdy, 大家好，又是我~

上一次我们简单的谈了一下font set和一些要注意的基本问题。今天我们继续字体这一话题，深入讲讲上次提到的“通用字体族”。首先是最常用的 serif 和 sans-serif 这两个通用字体族。

- serif

Serif 在印刷学上指衬线字体。为了理解衬线字体的概念，大家先看几个典型的衬线字体的例子：

My
Georgia字体 King
Times New Roman 字体汉字
宋体

单词 My 中的字母 “M”上下方突出的短横线就是所谓的衬线。同样，y的上方，K的上下，i 和n的下方也都有衬线，所以这些字体都被称为衬线字体。但衬线字体并不一定都有衬线，比如上面例子中的g, “汉”和“字”。事实上，只要满足末端加强原则的字体都是衬线字体。所谓的末端加强，就是使用衬线或粗细变化，使字体笔画的末端得到加强，以改善小号文字的可读性。比如上面例子中的y的下半部分，还有宋体的中文字符，都是采取加粗笔划的末端来达到末端加强的效果。除此之外，很多衬线字体还会采用加强竖向笔划（比如宋体中竖比横粗），夸张字形（最明显的就是小写g这个字符了）等方法进一步改善它的可读性。

因为衬线字体的可读性非常好，所以它应用的最多的地方也正是出版物或者印刷品的正文内容等以大段文字作为表现形式的作品上。

比较常见的衬线字体有 Georgia, Garamond, Times New Roman, 中文的宋体等等。

- sans-serif

衬线字体以外的一切字体都是无衬线字体。sans- 这个前缀其实是法语，所以比较标准的发音是 /san/ 而不是 /sans/。它的意思是“没有”。所以sans-serif就是无衬线字体。

Gut
Verdana 字体 Might
Arial 字体书写
幼圆

无衬线字体比较圆滑，线条一般粗细均匀。比较适合用作艺术字、标题等。因为无衬线字体通常粗细比较均匀，所以在小字体显示的时候，可读性会降低，容易引起视觉疲劳。

常见的无i衬线字体有 Trebuchet MS, Tahoma, Verdana, Arial, Helvetica, 中文的幼圆、隶书等等。

- 什么时候用serif？什么时候用sans-serif？

从上面的介绍中，我们可以知道，衬线字体之所以被设计出来，就是为了用作正文内容的。大家可以随手抄起一张报纸，看看上面的文章是不是宋体。如果手头有外语读物的话，也可以翻来看一下，正文都是衬线字体。同样大小的衬线字体比无衬线字体容易阅读：

The quick brown fox jumps over the lazy dog.

然后大家可以把报纸翻到头版头条——标题一般都会是各种粗细一致的综艺体或者是中黑体。英文报纸的标题大多也是无衬线的。这个就是应用他们的基本原则。

但是大家可以看很多网站——它们的正文内容恰恰是无衬线的Tahoma, Verdana, Arial等等。中文网站可能因为字体的局限性，仍旧使用宋体居多，但查看它们的样式表，就会发现候补字体也大多是无衬线的。这样是不是不好呢？

当然不是。

衬线字体的可读性其实仅仅体现在小字体上。大家可以拿出刚刚抄起来的报纸，和你显示器上的文字比较一下——你会发现，报纸上的文字比显示器上的文字整整小一圈。实际上，新明晚报上通常大小的宋体文字，在点距为0.25mm的高质量液晶显示器上，大小大约只相当于10px ~ 11px的显示字符；在普通的液晶显示器（点距一般为0.28mm）上，甚至可能只相当于8px~10px的显示字符。

这个就是 print media 和 screen media 的最大区别。印刷业为了节约成本，因此会尽可能的在保证可读的情况下，把文字印小。显示器不存在这样的成本，因此可以显示比较大的文字。在文字足够大的情况下，无衬线字体也是同样可读的。而且因为无衬线字体通常有艺术性，因此在显示器上显示通常比较赏心悦目；而且无衬线字体种类比衬线字体多得多，因此选择余地也很大。所以大家尽可以放心去使用。但是必须保证以下原则：凡是使用无衬线字体的，必须保证其在正文内容中的可读性。否则，使用衬线字体。换而言之，如果你要使用无衬线字体显示网页的正文内容，那么，你必须把它的font-size设的足够大，以保证用户能轻易阅读。

至于具体将font-size 设多大，是因字体而异的。12px 对于 Verdana 来说已经完全足够，但是要能轻易的阅读隶书，可能需要24px以上才行。

对于11px以下的英文字体，推荐使用衬线字体。至于中文，因为显示器的硬件限制，不论是什么字体，都不推荐使用11px以下的font-size来显示。

- 其他的通用字体族

印刷学中，除了serif 和 sans-serif 之外，通常还有 monospace 等宽字体、scripts 手写体（比如花体）、blackletter 铅字体（也叫 gothic 哥特体。严格的说，很多常用的serif字体其实是gothic字体）、ornamental 装饰体（那些在文字笔划上或者周围有装饰花纹的字体。很多中世纪书籍上很常见。如果脑残体真的成了字体，那么应该可以算装饰体吧……）和 symbol 符号字体（比如有名的wedding123……）。

不过CSS对通用字体族的定义有点不一样。除了serif 和 sans-serif 之外，CSS还允许以下几个通用字体族：

monospace 等宽字体
所谓的等宽字体，是指每个字符宽度都一致的字体。一个著名的例子就是 Courier New 字体。因为字符宽度一致，所以特别容易对齐，能快速精确的定位到某行某列，因此经常用来显示代码。

要注意的是，一个等宽字体同时也可以是一个衬线（或者非衬线）字体。比如 Courier New 这个字体也可以看作是一个serif（严格的说是gothic）字体。
cursive 书写体：相当于印刷学中的手写体。中文的华文行草就是这样的一个字体。
fantasy 梦幻体：相当于印刷学中的装饰体。非常少见的一种字体，基本没有参考价值。

要注意的是，CSS中不支持symbol字体族。使用symbol类的字体请用图片。

- 一些你不知道的事情

中文的黑体其实是衬线字体。大家可以看下面的图：

大家可以看到，其实黑体的确是经过末端加强的，所以很多印刷品的正文也会使用黑体。像这种使用温和的末端加强，笔划粗细大致一致的字体，其实也可以被称为petit-serif/小衬线体。（那些类似于宋体一样有显著末端加强，并且笔划粗细有明显区别的，通常称为slab-serif/雕版衬线体）

只是很遗憾，因为诸多的硬件原因，在显示器上实际显示黑体时，大家还是可以把它看作一个无衬线字体
Italic 不是斜体
斜体是oblique。Italic 顾名思义，是意大利体。Italic 是一种书写方式（calligraphy script），而oblique 是一种印刷样式，两者是不同的东西。中学英语习字册交授的书写方式就是意大利体。除了意大利体外，比较流行的书写方式还有法兰西体（就是传说中的花体字，正名是French Script）、哥特体、亚伯拉罕体等等。

很多考究的字体都会为意大利体定制一套特殊的字体，而不是简单的显示成斜体。比如下面的图片里，三行文字都是Georgia字体。第一行普通；第二行是oblique，也就是斜体；第三行才是真正的italic意大利体。

大家仔细看第三行的a, l, i, e 等字母——很明显的看出区别了吧。实际上，Georgia Italic 和 Georgia 在系统内是两个不同的字体文件。当我们指定 font-style: italic 的时候，系统就会自动搜寻是不是存在Georgia Italic这个字体，并尝试使用这个字体来显示文字内容。

按理说当我们用 font-style: oblique 指定字体样式时，浏览器不应该去寻找Georgia Italic这个字体，而直接将Georgia字体倾斜显示，所以理论上应该得到图中第二行文字的效果。可惜，连W3C在CSS规范中，自己的参考实现也说是“如果UA不能正确显示italic 和oblique, 可以使用italic来代替oblique显示”，所以几乎没有浏览器实现区分italic 和oblique。哪怕你设置的font-style是oblique, 你也会发现，浏览器显示的也还是italic

今天就到这里了。下一讲我会谈谈如何构建一个合理的font-family，并推荐几个使用的字体组合给大家。那么，再见了哟

评论: 37　查看评论　发表评论

编辑推荐：Google Buzz相关新闻

网站导航：博客园首页个人主页新闻闪存小组博问社区知识库

[快报][贴图] ANSI Art 的新形式 - CSS-ANSI Art

棕熊 — Fri, 02 May 2008 17:30:00 GMT

阅读: 3469 评论: 28 作者: 棕熊发表于 2008-05-03 01:30 原文链接

Howdy, 大家好~

谈谈网页设计中的字体应用第二讲正在制作中，不日即可和大家见面。在此之前，先插播一条新闻。

大家如果有用各种term软件上过BBS的话，对ANSI art 和ASCII art一定不会陌生，很多大学BBS也都有ANSI版。

如果再深入了解一下的话，其实这种艺术形式最早始于打印机的普及。当时很多人就用打印机上的字符和换行控制来进行艺术创作，并成为现代艺术的一种形式。这就是所谓的 Keyboard Art, 也称 Typography：

点击放大

之后，随着电脑的诞生，程序员们就尝试着用电脑屏幕做同样的事情。于是ASCII Art诞生了：

ASCII Art - Super Mario Bros
点击放大

ASCII Art - The New Venus
点击放大

然后，随着Term终端的应用，各种形式的BBS得到普及，ASCII Art得到进一步发展，不仅可用的字符便多了，还增加了控制字符，成为ANSI Art：

ANSI Art - Television
点击放大

ANSI Art - Cow
点击放大

不过技术总是向前走的。随着CSS和web标准的普及，终于有一天，人们开始——————————————

————————终于也开始用CSS+字符的方式开始作画了

不过想想也是，从人们开始用DIV堆圆角的时候，多少已经开始出现这种艺术的原形了。之后著名的ACID2测试，也采用了类似的方法。今天，上面辛普森肖像的作者，Román Cortés，只是将其深入一步而已。

虽说这也算是CSS的一种应用，但多少有些违背CSS的初衷。至于作为一种艺术形式，到底能有多大的发展，我们拭目以待吧。

评论: 28　查看评论　发表评论

编辑推荐：Google Buzz相关新闻

网站导航：博客园首页个人主页新闻闪存小组博问社区知识库

[教程] 谈谈网页设计中的字体应用 (1) Font Set

棕熊 — Tue, 29 Apr 2008 10:27:00 GMT

阅读: 6209 评论: 53 作者: 棕熊发表于 2008-04-29 18:27 原文链接

Hihi, 大家好~

最近有不少人都提及了网页上该如何选择字体的问题。问题虽然小，但是却是前端开发中的基本，因为目前的网页，还是以文字信息为主，而字体，作为文字表现形式的最重要参数之一，自然有着相当重要的地位。可惜字体的重要性在很长时间内并没有得到足够的重视。很多人对字体的概念还是停留在 font-family: "宋体", Arial, Helvetica, serif 的阶段，却不明白为什么这样设置，这样设置是否合理等等。现在就让我说说字体的来龙去脉吧。

- font-family

大家知道CSS规则中定义字体是通过 font-family 这条规则来实现的。仔细翻翻CSS的文档，却没有发现任何能指定某一个特定字体的规则。

想想十年前，你可以随处看见类似于这样的代码：

Lorem Ipsumfont>

几乎不会有人考虑到，Frankin Gothic Book是一个 Windows only 的字体。在一台Mac上根本看不到Frankin Gothic Book字体的效果，系统因为找不到这种字体，就改用Mac的默认字体显示了。于是，网页的风格就和原来完全不一样了，根本达不到Frankin Gothic Book的效果。于是W3C提出了font set 的概念——将一系列近似的字体按照优先级顺序组成一个列表；浏览器从列表头部开始匹配，知道找到第一个可用的字体，并使用该字体进行显示。

比如上面这个例子，我们可以创建这样的一个font set：

Lorem Ipsumspan>

我们来看看浏览器怎么来呈现这段文字吧：

Windows下：浏览器从列表的第一个字体开始搜索——系统中存在Frankin Gothic Book，使用Frankin Gothic Book字体显示。
Mac 下：浏览器从列表的第一个字体开始搜索——系统中不存在Frankin Gothic Book，搜索失败。继续搜索下一个字体——Lucida Grande。系统中存在Lucida Grande字体，终止搜索，并用Lucida Grande字体显示。

这样在Mac上，Mac就能以与Frankin Gothic Book类似的Lucida Grande字体显示这段文字。

但是可能存在一台电脑，上面既没有Frankin Gothic Book字体，也没有Lucida Grande字体，那么它仍然无法正确显示上面的这段文字。于是开发人员不得不在这个字体列表中不断增加字体以适应各种系统，导致这个font set失去原本的“组织近似字体”的作用。于是font set中引入了“通用字体族”，也就是我们经常看见的 serif 和 sans-serif。我会在今后的文章中详细的介绍这两个，以及一些其他的通用字体族。在这里，我们可以简单的将它们理解为一种“在所有指定字体都失效的情况下，浏览器指定的一种最终的代用字体”。

比如我们在改进一下上面的那段示例文字：

Lorem Ipsumspan>

我们再看看浏览器怎么来呈现这段改进后的文字吧：

Windows下：浏览器从列表的第一个字体开始搜索——系统中存在Frankin Gothic Book，使用Frankin Gothic Book字体显示。
Mac 下：浏览器从列表的第一个字体开始搜索——系统中不存在Frankin Gothic Book，搜索失败。继续搜索下一个字体——Lucida Grande。系统中存在Lucida Grande字体，终止搜索，并用Lucida Grande字体显示。
某系统：浏览器从列表的第一个字体开始搜索——系统中不存在Frankin Gothic Book，搜索失败。继续搜索下一个字体——系统中也不存在Lucida Grande字体。继续搜索下一个字体——通用字体sans-serif。浏览器应用它的默认sans-serif字体"Arial"来显示这段文字。

请注意两点。首先，通用字体族具体对应哪个字体，是由浏览器决定的。上面例子中浏览器指定Arial为sans-serif字体，但完全有可能另一个浏览器指定Helvetica 为它的sans-serif字体。具体哪个字体被最终应用，是无法预期的。其次，通用字体族只是一种在font set中其他字体都无效时的代用方案。因此——设计者应该尽可能的给出齐全的font set，以尽可能的覆盖所有的系统，而不应该依赖于通用字体族。

类似于以下的两种写法都是错误的：

Lorem Ipsumspan>
Lorem Ipsumspan>

第一种写法的错误在于——它相当于根本没有指定字体，仍旧是交由浏览器选择字体。写了相当于没写。

第二种写法的错误在于顺序。因为通用字体族应该在一个font set中其它所有字体都失效时才起作用。因此，将指定字体放在通用字体之后，会造成制定字体尚未匹配时就使用了通用字体。所以，你应该务必使通用字体处在font set中的最后一位。

另外，这里要说明两件事情。

首先，浏览器应用font set中哪个字体的规则虽然看上去很简单，但其实非常trickish。我会在以后的文章中做出具体的说明。

其次，虽然字体的CSS规则名称叫font-family, 但它的实质是一个font set，而不等是印刷意义上的font family。印刷上的font family 是指一系列相同字样的不同强度组合，比如Lucida Family（包括Lucida Sans, Lucida Sans Typewriter, Lucida Console, Lucida Grande等等）和Arial Family（Arial, Arial Black, Arial Rounded MT等等），但显然这些font family 都不适合直接拿来当作一个font set来使用。

今天就到这里了哟。下次我们来仔细谈谈通用字体族。

评论: 53　查看评论　发表评论

编辑推荐：Google Buzz相关新闻

网站导航：博客园首页个人主页新闻闪存小组博问社区知识库