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

Question

我正在尝试在网站上创建“将网页另存为位图”功能，但在服务器端以正确的大小呈现文本时遇到了一些问题。

客户端文本的字体大小设置为：

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

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

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

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

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

如果我在浏览器中指定 font-size:16em，文本会变得很大。如果我在浏览器中指定 font-size:1em 文本将大约 14px 大，但如果我把 1 作为服务器上的参数，文本变成一条细线。

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

Answer 1

实际上，文档说的是“em-size”，而不是“em-point”（“新字体的em-size，以磅为单位”）。它要求您指定以磅为单位的大小。每英寸有 72 个点。您需要计算出用户屏幕的 DPI 和您正在绘制的画布的 DPI，并将 16px 大小乘以该比率的差值。

例如

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

您可以通过使用采用 GraphicUnit 并指定像素的 Font 构造函数重载来节省数学运算。这样，适当的大小将是：

(CSS_Font_Size_Pixels  / User_Screen_DPI) * Canvas_DPI