测试环境: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 |
当 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 这三种字体。我对这三种字体分别做了测试,同时加上刚才的数据,整理成一个表格:空格的宽度。
小结
后记
因为测试比较琐碎繁杂,可能会有错误,欢迎在实践过程中发现问题者的指正。也欢迎多一些字体的测试
本文作者: