首先对空格宽度的定义:空格,由于每个浏览器处理会有微小的不同,在这里我将可以选中的宽度作为空格的宽度。视觉宽度和可选中的宽度有 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 下实际显示的字号有所不同,经测试如下图:
下面我们开始看空格,以下是测试过程中的一些数据,也可跳过直接看文末的小结部分和这个表格:空格的宽度。在阅读之前请确保已经看过上文的情况说明
默认都是 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 这三种字体。我对这三种字体分别做了测试,同时加上刚才的数据,整理成一个表格:空格的宽度。
小结
后记
因为测试比较琐碎繁杂,可能会有错误,欢迎在实践过程中发现问题者的指正。也欢迎多一些字体的测试。
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
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)]
被人点名参加一个博客游戏,是几天前由博客联盟发起的一个游戏,这里我就写一下我在Blog的过程中曾经犯过的几个错误。
1、没有申请到COM的域名。当我申请注册博客域名的时候,发现.COM和.NET早在98年就被人注册走了,比较后悔没有在那年注册COM域名,所以现在只好用.INFO的域名。
2、没有使用自己的RSS Feed的发布地址。因为我一开始没有使用自己的子域名的方式发布Feed,而是直接使用FeedBurner的地址,这使得我一直都在为FeedBurner是否被和谐而提心吊胆。
3、写博客花的时间太多。直接导致我经常半夜12点之后才睡觉,严重影响我的身心健康,以后应该在这上面少花些时间。
4、回复评论留言和邮件太少。因为每天的评论留言太多,我甚至无法保证看完所有的留言和评论,更无法保证对所有留言进行回复,邮件也是一样,如果把时间投入到这里面,那可真是一个时间的无底洞啊。
最后,我就不点名了,对这个话题感兴趣的博客作者,都请自觉坦白一下曾经犯过的错误。我们的政策是:坦白从宽,牢底坐穿;抗拒从严,回家过年。
八月 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 |