详细解说空格的宽度
来源：blueidea
被读113次
转载请注明出处-中国设计秀-cnwebshow.com
在 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）。
后记
因为测试比较琐碎繁杂，可能会有错误，欢迎在实践过程中发现问题者的指正。也欢迎多一些字体的测试。
