测量字符串就好像它会在html上一样？

Question

我有确切的字符串： 123 ..

我想知道它的长度是什么如果它在Html页面上（作为SPAN）

font-name:arial
font-size:16px;

我做了一个实验：

http://jsbin.com/axezib/edit#preview

所以

<span style="font-family:arial;border:solid 1px red;display:inline-block;font-size:16px;">123..</span>

呈现为：

及其属性：

ofcourse *   {     填充：0像素;边缘：0像素;   }

你可以看到它的宽度是35，高度= 19。 （让我们忽略边框 ...）

但是我有这个代码应该（或不）告诉我相同的结果：

void Main( )
      {
     string input = "123..";
     FontFamily fontFamily = new FontFamily("Arial");
     Font testFont = new  Font(   fontFamily,   16, FontStyle.Regular,   GraphicsUnit.Pixel);
     Size s = TextRenderer.MeasureText(input, testFont);
     Console.WriteLine("Size: height " + s.Height + ", width " + s.Width);
     Console.ReadLine();
      }

然而结果是：

我在这里错过了什么？

谢谢： - ）

修改

通过添加CSS RESET在re-editing html代码之后

- 代码在所有4个浏览器中完全呈现。 所以问题仍然存在 - 为什么c＃没有给我显示相同的结果

Answer 1

您可以为此特定网络浏览器解决此难题，但您无法测量所有可用浏览器的字符串。更糟糕的是，有许多操作系统，视频卡，语言，字体版本和显示设置。这会产生显示文字略有不同的数十亿种组合。

如果您正在测试您的网络应用程序，请从您的C＃代码（例如IE）运行Web浏览器，加载您的网页并从那里获取DOM节点测量值。这是获得真实世界价值的唯一方法。

此外，还有很多测试工具包可以为您简化此任务。

Answer 2

似乎您正在尝试比较使用默认Windows字体呈现（以及系统上默认的任何消除锯齿，ClearType设置等）呈现的字符串的大小，并将其与浏览器执行的呈现进行比较Windows可能有也可能没有自己的字体呈现引擎。据我所知，Gecko（Firefox）和Webkit（Chrome，Safari）实现了自己的字体渲染，因此可以在不同平台上一致地呈现HTML / CSS。

所以基本上，即使你可以让你的C＃代码同意，结果也是毫无意义的，因为你在比较苹果和橘子！请参阅this article中的“当前实施”。