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

Posted 2023-03-06

【中文标题】如何在.NET中以与浏览器相同的大小呈现文本给文本的CSS

【英文标题】：How to render text in .NET in the same size as browsers does given CSS for the text

【发布时间】：2010-10-03 19:49:28

【问题描述】：

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

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

.textDiv

    font-family: Verdana;
    font-size:16px;

如果我尝试在服务器上渲染它

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

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

new Font() 的 documentation 表示第二个参数（字体大小）应以 em 点数指定。 一个 em 点到底是什么？

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

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

【参考方案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

【讨论】：

谢谢，我把点和像素搞混了。在 css 中指定 pt 而不是 px 的大小解决了这个问题。使用 GraphicsUnit.Pixel 也有效（如果你在 css 中使用了 px），不知道那个构造函数:)

【参考方案2】：

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

PX

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

new Font("Verdana", 16F);

EM

这将更难控制，因为这是行高的倍数。比如如果 1em = 14px 那么 16em = (14 * 16)px。除非您知道行高，否则这将很难复制。

文件还说如下

新字体的 em 大小，以磅为单位。

所以它是在你正在使用的构造函数的 PX 或像素中定义的。你可以试试这个构造函数，但 EM 实际上是一个根据屏幕动态调整的浏览器/CSS 实现，就像 Vectors。其中 Font 对象是一个位图，用于处理要绘制的像素数。

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