Question

我正在代码中创建一些文本图像，这些图像需要尽可能地反映CSS字体。 CSS类看起来像这样：

.font
{
      letter-spacing: -0.7px;
      font-family: segoe wp,segoe ui,verdana,arial,helvetica,sans-serif;
      font-size: 1.15em;
      padding: 10px;
}

我的图片代码如下：

using (var helper = new Bitmap(1, 1))
using (var gHelper = Graphics.FromImage(helper))
using (var font = new Font("Segoe WP", 1.15f, GraphicsUnit.Point))
using (var brush = new SolidBrush(Color.White))
{
    var size = gHelper.MeasureString(concept, font);

    using (var image = new Bitmap((int)size.Width + _padding, (int)size.Height + _padding))
    {
        using (var g = Graphics.FromImage(image))
        {
            g.Clear(Color.Black);
            g.DrawString(concept, font, brush, (float)_padding / 2, (float)_padding / 2);
        }

        var converter = new ImageConverter();
        var b = (byte[])converter.ConvertTo(image, typeof(byte[]));

        return File(b, _contentType);
    }
}

此代码生成的图像非常小。

我猜的字母间距要求我制作一个循环并单独绘制每个字母，但是如何在C＃中使用EM？

Answer 1

在我看来，你无法与EM合作，因为它们不是固定的阅读本部分（摘自http://webdesign.about.com/od/typemeasurements/qt/how-big-is-an-em.htm）：

但是Em有多大？
  根据W3C的说法：“等于   计算它所在元素的'font-size'属性的值   用来。例外情况是'em'出现在。的值中   'font-size'属性本身，在这种情况下它指的是字体大小   父元素。“换句话说，ems没有绝对的   尺寸。它们根据它们的位置来确定它们的大小值。对于大多数   网页设计师，这意味着他们在Web浏览器中，所以是一种字体   高1em的大小与默认字体大小完全相同   那个浏览器。

但默认尺寸有多高？
  没有办法100％肯定，   因为客户可以在浏览器中更改其默认字体大小，但是   因为大多数人没有，你可以假设大多数浏览器都有   默认字体大小为16px。所以大部分时间都是1em = 16px。

所以你可以尝试：

using (var font = new Font("Segoe WP", 16 * 1.15f, GraphicsUnit.Point))

从一开始就知道这只是一个近似值!!

Answer 2

using (var font = new Font("Segoe WP", 1.15f, GraphicsUnit.Point))

点！= Em。

IIRC，em只是默认字体的比例。

Answer 3

您的图形对象假定您以低分辨率绘制到屏幕。创建一个新的图形对象并定义更合适的分辨率

Bitmap bmp = new Bitmap(2000, 500);
bmp.SetResolution(300, 300); 
Graphics g = Graphics.FromImage(bmp);
// render your text.

您还可以使用System.Drawing.TextRenderer，它可以提供良好的结果。

System.Drawing.Font反映CSS字体

3 个答案: