不同浏览器空格的宽度

作者：Farewelli 来源：JunChen 时间：2007-08-22 08:29:00　

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

下面我们开始看空格，以下是测试过程中的一些数据，也可跳过直接看文末的小结部分和这个表格：空格的宽度：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>空格的宽度 The Width of a Space / FF2.0, IE6&7, on WinXP - asp之家 - Http://www.aspxhome.com</title><style type="text/css">body,caption{ font-size: 13px; font-family: Arial;}td{ font-size: 13px; text-align: center;}table{ margin-bottom: 1em;}</style></head><body><table border="1" cellspacing="1" cellpadding="3" summary="测试各种字体和字号设置下的空格（中-中 & 中-英）的宽度"><caption>空格（中-中 & 中-英）的宽度 / FF2.0, IE6&7, on WinXP</caption><tr> <td rowspan="2"></td> <th colspan="4">default</th> <th colspan="4">simsun</th> <th colspan="4">Arial</th> <th colspan="4">Tahoma</th> <th colspan="4">Verdana</th></tr><tr> <th>11px</th> <th>12px</th> <th>13px</th> <th>14px</th> <th>11px</th> <th>12px</th> <th>13px</th> <th>14px</th> <th>11px</th> <th>12px</th> <th>13px</th> <th>14px</th> <th>11px</th> <th>12px</th> <th>13px</th> <th>14px</th> <th>11px</th> <th>12px</th> <th>13px</th> <th>14px</th></tr><tr> <th scope="row">Firefox 2.0</th> <td>6</td> <td>6</td> <td>7</td> <td>7</td> <td>6</td> <td>6</td> <td>7</td> <td>7</td> <td>3</td> <td>3</td> <td>4</td> <td>4</td> <td>3</td> <td>4</td> <td>4</td> <td>4</td> <td>4</td> <td>4</td> <td>5</td> <td>5</td></tr><tr> <th scope="row">IE6</th> <td>6</td> <td>6</td> <td>7</td> <td>7</td> <td>6</td> <td>6</td> <td>7</td> <td>7</td> <td>6</td> <td>6</td> <td>7</td> <td>7</td> <td>3</td> <td>4</td> <td>4</td> <td>4</td> <td>6</td> <td>6</td> <td>7</td> <td>7</td></tr><tr> <th scope="row">IE7</th> <td>6</td> <td>6</td> <td>7</td> <td>7</td> <td>6</td> <td>6</td> <td>7</td> <td>7</td> <td>6</td> <td>6</td> <td>7</td> <td>7</td> <td>6</td> <td>6</td> <td>7</td> <td>7</td> <td>6</td> <td>6</td> <td>7</td> <td>7</td></tr></table><table border="1" cellspacing="1" cellpadding="3" summary="测试各种字体和字号设置下的空格（英-英 & 英-中）的宽度"><caption>空格（英-英 & 英-中）的宽度 / FF2.0, IE6&7, on WinXP</caption><tr> <td rowspan="2"></td> <th colspan="4">default</th> <th colspan="4">simsun</th> <th colspan="4">Arial</th> <th colspan="4">Tahoma</th> <th colspan="4">Verdana</th></tr><tr> <th>11px</th> <th>12px</th> <th>13px</th> <th>14px</th> <th>11px</th> <th>12px</th> <th>13px</th> <th>14px</th> <th>11px</th> <th>12px</th> <th>13px</th> <th>14px</th> <th>11px</th> <th>12px</th> <th>13px</th> <th>14px</th> <th>11px</th> <th>12px</th> <th>13px</th> <th>14px</th></tr><tr> <th scope="row">Firefox 2.0</th> <td>6</td> <td>6</td> <td>7</td> <td>7</td> <td>6</td> <td>6</td> <td>7</td> <td>7</td> <td>3</td> <td>3</td> <td>4</td> <td>4</td> <td>3</td> <td>4</td> <td>4</td> <td>4</td> <td>4</td> <td>4</td> <td>5</td> <td>5</td></tr><tr> <th scope="row">IE6</th> <td>3</td> <td>3</td> <td>3</td> <td>4</td> <td>6</td> <td>6</td> <td>7</td> <td>7</td> <td>3</td> <td>4</td> <td>4</td> <td>4</td> <td>3</td> <td>4</td> <td>4</td> <td>4</td> <td>4</td> <td>4</td> <td>5</td> <td>5</td></tr><tr> <th scope="row">IE7</th> <td>3</td> <td>3</td> <td>3</td> <td>4</td> <td>6</td> <td>6</td> <td>7</td> <td>7</td> <td>3</td> <td>4</td> <td>4</td> <td>4</td> <td>3</td> <td>4</td> <td>4</td> <td>4</td> <td>4</td> <td>4</td> <td>5</td> <td>5</td></tr></table><table border="1" cellspacing="1" cellpadding="3"><caption>附表：11px 和 13px 的测试</caption><tr> <td></td> <th>default</th> <th>simsun</th> <th>Arial</th> <th>Tahoma</th> <th>Verdana</th></tr><tr> <th>11px</th> <td>中</td> <td>中</td> <td>中</td> <td>中</td> <td>中</td></tr><tr> <th>12px</th> <td>中</td> <td>中</td> <td>中</td> <td>中</td> <td>中</td></tr><tr> <th>13px</th> <td>中</td> <td>中</td> <td>中</td> <td>中</td> <td>中</td></tr><tr> <th>14px</th> <td>中</td> <td>中</td> <td>中</td> <td>中</td> <td>中</td></tr></table><a href="http://www.junchenwu.com">JunChen</a>, Aug 2007, ref <a href="http://www.junchenwu.com/2007/08/the_width_of_a_space.html">http://www.junchenwu.com/2007/08/the_width_of_a_space.html</a></body></html>

在阅读之前请确保已经看过上文的情况说明

默认都是 16px 的汉字：

	中-中	英-英	英-中	中-英
Firefox 2.0	8	8	8	8
IE6	8	4	4	8
IE7	8	4	4	8

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

2 下一页

标签：空格,宽度

投稿

不同浏览器空格的宽度

猜你喜欢

微信小程序学习之wxs使用教程

MySQL中的回表和索引覆盖示例详解

CSS关于Border你可能会不注意的东西

python实现UDP协议下的文件传输

C#数据库操作的示例详解

简述：我为什么选择Python而不是Matlab和R语言

使用python进行拆分大文件的方法

JavaScript经典效果集锦

Python制作简单的网页爬虫

浅谈Python中的作用域规则和闭包

弹出最简单的模式化遮罩层的js代码

浅析python协程相关概念

python pyqtgraph 保存图片到本地的实例

logrus日志自定义格式操作

Recipe: 把SQL数据库部署到远程主机环境(第一部分)

javascript编写贪吃蛇游戏

python如何编写win程序

Python实现改变与矩形橡胶的线条的颜色代码示例

Active Server Pages 错误 ASP 0201 修复方法

js 中将多个逗号替换为一个逗号的代码