空格的宽度问题

首先对空格宽度的定义:空格,由于每个浏览器处理会有微小的不同,在这里我将可以选中的宽度作为空格的宽度。视觉宽度和可选中的宽度有 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 下实际显示的字号有所不同,经测试如下图:

FF下的11px和13px汉字
FF下的11px和13px汉字

IE6下的11px和13px汉字
IE6下的11px和13px汉字

IE7下的11px和13px汉字
IE7下的11px和13px汉字
  • 在宋体下,支持 11px,其余几种测试字体都是当成 12px 处理;
  • IE 6 会把 Tahoma 的 13px 汉字渲染成 14px;IE 7 正常;其余几种测试字体都按照 13px 正常处理;
  • 默认字体、宋体、Arial、Verdana 在 IE 6 和 IE 7 上的字号表现一致。
    下面我们开始看空格,以下是测试过程中的一些数据,也可跳过直接看文末的小结部分和这个表格:空格的宽度。在阅读之前请确保已经看过上文的情况说明

默认都是 16px 的汉字:
































中-中英-英英-中中-英
Firefox 2.08888
IE68448
IE78448


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

当 font-size: 12px; 时:































中-中英-英英-中中-英
Firefox 2.06666
IE66336
IE76336


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































中-中英-英英-中中-英
Firefox 2.06666
IE66666
IE76666


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

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

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































中-中英-英英-中中-英
Firefox 2.06666
IE66336
IE76336


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































中-中英-英英-中中-英
Firefox 2.07777
IE67337
IE77337


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































中-中英-英英-中中-英
Firefox 2.07777
IE67447
IE77447


font-size: 11px;宋体:































中-中英-英英-中中-英
Firefox 2.06666
IE66666
IE76666


font-size: 13px;宋体:































中-中英-英英-中中-英
Firefox 2.07777
IE67777
IE77777


font-size: 14px;宋体:































中-中英-英英-中中-英
Firefox 2.07777
IE67777
IE77777


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

小结

只使用宋体是相对安全的,在这三款浏览器里面如此; 除了 Tahoma,其他几种测试情况下,IE 6 和 IE 7 的表现一致(但除了宋体和 FF 一样外,其余都有差别);
在 Firefox 下,同等样式的所有空格(中-中、英-英、中-英、英-中)宽度一致; 在 IE 下,中文字和中文字之间的空格,等于中文字和英文字之间的空格宽度(注意我说的顺序),大于等于英文字和中文字之间的空格(等于的情况出现在设置了中文字体,大于的情况一般是两倍);
如果空格前面是中文,那么空格按照中文处理;如果空格前面是英文,那么空格按照英文处理; 如果已经用了某种英文字体怎么办呢?想办法分别对待空格和内容吧。比如正好是链接与链接间的空格,那么可以给链接设置字号,给空格设置不同字号(还可以分浏览器 hack)。
后记

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