22:46 空格的宽度 » JunChen::Wish Room 1906

首先对空格宽度的定义:空格,由于每个浏览器处理会有微小的不同,在这里我将可以选中的宽度作为空格的宽度。视觉宽度和可选中的宽度有 0~3px 的差异(由于 kerning table 的不同),但以下测试的三种浏览器中相同。又因在 ClearType(次像素平滑)情况下视觉宽度有所不同(据猜测可选中的宽度应该和不开 ClearType 一致),简单起见,本文仅研究不开 ClearType 的情况。

测试环境:Firefox 2.0.0.6 / IE 6.0.2900 / IE 7 on WinXP, XHTML transitional (经测试与DTD无关),以下表格中的数字如无单位,均表示像素(px)。

测试方法:利用 CSS 定义字体和字号,选中空格(中-中、英-英、中-英、英-中四种情况),截图并计算宽度。

另外以下提到的 font-size: 11px; 都是指定义的字号,在 Firefox 下忠实显示,在 IE 下实际显示的字号有所不同,经测试如下图:

11px and 13px

下面我们开始看空格,以下是测试过程中的一些数据,也可跳过直接看文末的小结部分和这个表格:空格的宽度在阅读之前请确保已经看过上文的情况说明

默认都是 16px 的汉字:

中-中 英-英 英-中 中-英
Firefox 2.0 8 8 8 8
IE6 8 4 4 8
IE7 8 4 4 8

注:IE 6、7 下如果调了文字大小,最大时空格为11px,较大时空格为10px

当 font-size: 12px; 时:

中-中 英-英 英-中 中-英
Firefox 2.0 6 6 6 6
IE6 6 3 3 6
IE7 6 3 3 6

在 font-size: 12px; 基础上增加 font-family: simsun; 时(用simsun或者宋体没有区别):

中-中 英-英 英-中 中-英
Firefox 2.0 6 6 6 6
IE6 6 6 6 6
IE7 6 6 6 6

我们可以发现如果不设置字体的话,IE使用英文字体渲染内容。也可以认为在中文网页上使用宋体是相对安全的

在上面我们可以看到空格的大小都是 12px 的 1/2,如果是 11px 或者 13px 呢?三个浏览器怎么处理小数呢?继续测试。

font-size: 11px;默认字体:

中-中 英-英 英-中 中-英
Firefox 2.0 6 6 6 6
IE6 6 3 3 6
IE7 6 3 3 6

font-size: 13px;默认字体:

中-中 英-英 英-中 中-英
Firefox 2.0 7 7 7 7
IE6 7 3 3 7
IE7 7 3 3 7

font-size: 14px;默认字体:

中-中 英-英 英-中 中-英
Firefox 2.0 7 7 7 7
IE6 7 4 4 7
IE7 7 4 4 7

font-size: 11px;宋体:

中-中 英-英 英-中 中-英
Firefox 2.0 6 6 6 6
IE6 6 6 6 6
IE7 6 6 6 6

font-size: 13px;宋体:

中-中 英-英 英-中 中-英
Firefox 2.0 7 7 7 7
IE6 7 7 7 7
IE7 7 7 7 7

font-size: 14px;宋体:

中-中 英-英 英-中 中-英
Firefox 2.0 7 7 7 7
IE6 7 7 7 7
IE7 7 7 7 7

上面看到的数据都是默认字体和宋体,一般网页设计的时候不会使用默认字体(即不设置字体),而且为了让英文更好看,我们通常选用 Tahoma、Verdana、Arial 这三种字体。我对这三种字体分别做了测试,同时加上刚才的数据,整理成一个表格:空格的宽度

小结

后记

因为测试比较琐碎繁杂,可能会有错误,欢迎在实践过程中发现问题者的指正。也欢迎多一些字体的测试。

查看或发表评论

20:35 Eames' information machine » information aesthetics


a short animated film written, produced & directed by Charles & Ray Eames for the IBM Pavilion for the 1958 Brussels World's Fair. the movie topic is the computer in the context of human development, more specifically it traces the history of storing & analyzing information from the days of the cavemen to today's age of electronic brains.

[link: archive.org & cartoonmodern.blogsome.com|thnkx Gabor]

see also Disney's Mars beyond movie

18:29 談公平: 假定有一個資本家(廠主)、一個工程師及二個工人。資本家有工廠,但若沒有工程師及工人則不能賺錢。若資本家與工程師合作,沒有工人,則二人大才小用,做些工人的工作,每月 » del.icio.us/chedong
若加一個工人,因工人有體力技術,效率大增,三人合作每月可賺6萬元,若再加一工人,則一月可賺9萬元。但若只有廠主與工人沒有工程師,則工廠亦不能開工。現在問這9萬元的利潤要如何分
18:04 云风的 BLOG: 多服务器的用户身份认证方案 » del.icio.us/chedong
单点登录解决方案实现.
10:54 淘宝影工坊 » Taobao.com UED Team
晚上10点的会议室,仍旧灯光明亮,财叔(淘宝的总裁)和十几个小二(淘宝对员工的称呼)围绕着圆桌,他们的脸上毫无倦意,但气氛明显很紧张,有的小二紧紧抿着嘴;有的小二低着头努力思考;有的小二故作轻松、左顾右盼,每人轮番发言的同时,眼睛扫过其他人的脸庞。直到某个时刻,大家一起站了起来,互相大声地争辩,把积攒了十几分钟的话一股脑抛出——不要误解了,这可不是我们的什么战略会议,只是下班后一次杀人派的活动,他们享受着“杀人游戏”的乐趣。淘宝是一个年轻的团队,丰富的活动也是我们的一大特色。喜好足球、篮球的小二周末的时间可在附近学校里一展身手;下了班还可以去参加羽毛球派、健身派……今天,介绍一下UED自己成立的摄影活动派——影工坊。 影工坊的成立 我们刚进入用户体验部的时候,师傅除了会给一份素材库,还会叮嘱“如果使用其它图片,千万注意版权的问题”,所以在影工坊成立前,我们的视觉设计师还在灰暗的中世纪痛苦地挣扎,那是一个打着灯笼也看不到几个人头的时代。除了几个看腻的人物外,其他的美女身材诱人,可就是无头,像一具具女尸飘荡在页面中。 有人提出,“淘宝内部的美女帅哥这么多?我们为什么不自力更生呢?”面对这样启发,我们设计师不能不心动。 于是在芸苓、三通的倡议下,影工坊成立了。为了解决启动资金问题,我们一边吃饭一边想了一个办法,利用发行原始股的方式来筹集资金。我们按照每股20元的价格,最初发行了100股来筹集资金。发行得很是顺利,一天时间就被认购了80股,我们的器材、道具问题暂时解决了。 5月10日这一天,除了阿里日之外,还因20个摄影爱好者而多出了另一个新节日,那就是影工坊成立了。 收集照片就是收集这个世界 我们根据每个人的特长分配了不同的任务:如创意策划、摄影师、化妆师、模特管理等职位,目标就是发挥自己的原创摄影能力,并为淘宝页面的美化贡献自己更多的力量。 第一次活动是在下班后,二当家的新家有幸成了我们开机仪式的举行地,(做为这段历史的见证,它将从此被收入阿里博物馆)那里丝毫不逊色于任何影楼的布景,而且刚刚装修好的房间很符合拍摄的条件。我们选择了无主题摄影,阿生和三通作为主力摄影师,跑上跑下,其功不可没。 当然,受累的还有模特,因为灯光的约束,不得不调整到合适的角度来配合摄影师。 这一次我们完成了淘宝客服中心页面的修改。客服中心的页面很快就搬上了淘宝网,新的版本更为的精致,而且融入了更多的现代感,是不是有一种耳目一新的感觉: (青桐设计) 在成立4个月的时间内,影工坊共组织了近10次大型拍摄活动,随着经验的增加,我们拍摄起来也越来越得心应手了。下面2张图就是出现在淘宝页面上经过后期加工的照片,请您欣赏: (上图由芸苓设计) (上图由大雄设计,活动地址:香体露促销)
08:25 music lyrics flickr slideshow » information aesthetics

flickr_music_video.jpg
a flickr-based music video or image slideshow exactly synchronized with the lyrics from a song called "Astronaut". at some moments the sequence of images are "spot-on", on others more humorous or subvert the song's meaning. the images are randomized by date, so that each time the slideshow is different.

[link: avoision.com (project) & avoision.com (blog entry)]

我在写博客过程中犯过的几个错误月光博客 » Che, Dong's shared items in Google Reader

  被人点名参加一个博客游戏,是几天前由博客联盟发起的一个游戏,这里我就写一下我在Blog的过程中曾经犯过的几个错误。

  1、没有申请到COM的域名。当我申请注册博客域名的时候,发现.COM和.NET早在98年就被人注册走了,比较后悔没有在那年注册COM域名,所以现在只好用.INFO的域名。

  2、没有使用自己的RSS Feed的发布地址。因为我一开始没有使用自己的子域名的方式发布Feed,而是直接使用FeedBurner的地址,这使得我一直都在为FeedBurner是否被和谐而提心吊胆。

  3、写博客花的时间太多。直接导致我经常半夜12点之后才睡觉,严重影响我的身心健康,以后应该在这上面少花些时间。

  4、回复评论留言和邮件太少。因为每天的评论留言太多,我甚至无法保证看完所有的留言和评论,更无法保证对所有留言进行回复,邮件也是一样,如果把时间投入到这里面,那可真是一个时间的无底洞啊。

  最后,我就不点名了,对这个话题感兴趣的博客作者,都请自觉坦白一下曾经犯过的错误。我们的政策是:坦白从宽,牢底坐穿;抗拒从严,回家过年。




《我在写博客过程中犯过的几个错误》的相关评论留言

相关文章


^==Back Home: www.chedong.com

^==Back Digest Home: www.chedong.com/digest/

<== 2007-08-05
  八月 2007  
    1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31    
==> 2007-08-07