空格的宽度问题

下载本文示例代码

首先对空格宽度的定义：空格，由于每个浏览器处理会有微小的不同，在这里我将可以选中的宽度作为空格的宽度。视觉宽度和可选中的宽度有 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汉字

　　IE6下的11px和13px汉字

　　IE7下的11px和13px汉字

• 在宋体下，支持 11px，其余几种测试字体都是当成 12px 处理；
• IE 6 会把 Tahoma 的 13px 汉字渲染成 14px；IE 7 正常；其余几种测试字体都按照 13px 正常处理；
• 默认字体、宋体、Arial、Verdana 在 IE 6 和 IE 7 上的字号表现一致。

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

　　默认都是 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 这三种字体。我对这三种字体分别做了测试，同时加上刚才的数据，整理成一个表格：空格的宽度。

小结

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

后记

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

首先对空格宽度的定义：空格，由于每个浏览器处理会有微小的不同，在这里我将可以选中的宽度作为空格的宽度。视觉宽度和可选中的宽度有 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汉字

　　IE6下的11px和13px汉字

　　IE7下的11px和13px汉字

• 在宋体下，支持 11px，其余几种测试字体都是当成 12px 处理；
• IE 6 会把 Tahoma 的 13px 汉字渲染成 14px；IE 7 正常；其余几种测试字体都按照 13px 正常处理；
• 默认字体、宋体、Arial、Verdana 在 IE 6 和 IE 7 上的字号表现一致。

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

　　默认都是 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 这三种字体。我对这三种字体分别做了测试，同时加上刚才的数据，整理成一个表格：空格的宽度。

小结

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

后记

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

下载本文示例代码


空格的宽度问题空格的宽度问题空格的宽度问题空格的宽度问题空格的宽度问题空格的宽度问题空格的宽度问题空格的宽度问题空格的宽度问题空格的宽度问题空格的宽度问题空格的宽度问题空格的宽度问题空格的宽度问题空格的宽度问题

阅读(981) | 评论(0) | 转发(0) |

0

上一篇：html页面中嵌入另一个html页面

下一篇：浅谈HTML向XHTML的转化