如何在.NET中以与浏览器相同的大小呈现文本为文本提供CSS

我试图在网站上创建一个“将网页保存为位图”function,我在服务器端渲染文本的大小有问题。

客户端上文本的fontsize设置为:

.textDiv { font-family: Verdana; font-size:16px; } 

如果我尝试在服务器上呈现此

 float emSize = 16; g.DrawString("mytext", new Font("Verdana", emSize), Brushes.Black, x, y); 

该文本将在服务器上大约20%。

新Font()的文档说明应该在em-points中指定第二个参数(字体大小)。 究竟什么是一个em-point?

如果我在浏览器中指定font-size:16em,则文本变为巨大。 如果我在浏览器中指定font-size:1em,则文本将大约为14px,但如果我将1作为参数放在服务器上,则文本将变为细线。

那么,我如何从浏览器px或em转换为.net px / em。

实际上,文档说“em-size”,而不是“em-point”(“新字体的em-size,分数”)。 它要求您以磅为单位指定大小。 每英寸有72个点。 您需要弄清楚用户屏幕的DPI和您正在绘制的canvas的DPI,并将16px大小乘以该比率的差异。

例如

 (CSS_Font_Size_Pixels * Canvas_DPI) / (User_Screen_DPI * 72) = Equivalent_Point_Size 

您可以使用Font构造函数重载来保存自己的数学运算,该重载采用GraphicUnit并指定像素。 这样,适当的大小将是:

 (CSS_Font_Size_Pixels / User_Screen_DPI) * Canvas_DPI 

我有点困惑,因为你在问题中使用了两种不同的度量单位。 我将尝试解释两者:

PX

这是以像素为单位的高度。 这应该像设置字体一样简单:

 new Font("Verdana", 16F); 

EM

这将更难控制,因为这是你的线高的倍数。 如果1em = 14px则16em =(14 * 16)px。 除非你知道你的线高,否则这很难复制。

该文件还说明如下

新字体的em-size(以磅为单位)。

因此,它在PX或像素中定义您正在使用的构造函数。 您可以尝试这个构造函数,但EM实际上是一个根据屏幕动态调整的浏览器/ CSS实现,几乎像Vectors。 Font对象是一个Bitmap,可以处理要绘制的像素数。

http://msdn.microsoft.com/en-us/library/ms141986.aspx