Как отобразить текст в .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% больше.

В Документация for new Font() говорит, что второй аргумент (размер шрифта) должен быть указан в em-точках.Что именно представляет собой one em-point?

Если я укажу размер шрифта: 16em в браузере, текст станет ОГРОМНЫМ.Если я укажу font-size: 1em в браузере, размер текста будет около 14 пикселей, но если я введу 1 в качестве аргумента на сервере, текст станет тонкой линией.

Итак, как мне конвертировать из браузера px или em в .net px / em.

Answer 1

На самом деле, в документах указано "em-size", а не "em-point" ("em-size в пунктах нового шрифта").Он просит вас указать размер в пунктах.На дюйм приходится 72 точки.Вам нужно вычислить DPI экрана пользователя и DPI холста, на котором вы рисуете, и умножить размер 16 пикселей на разницу в этом соотношении.

например ,

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

Вы могли бы сэкономить математическую операцию, используя перегрузку конструктора шрифтов, которая принимает GraphicUnit и указывает пиксели.Таким образом, соответствующий размер был бы:

(CSS_Font_Size_Pixels  / User_Screen_DPI) * Canvas_DPI

Answer 2

Я немного сбит с толку, потому что в вашем вопросе вы используете две разные единицы измерения.Я попытаюсь объяснить и то, и другое:

Пиксель

Это высота в пикселях.Это должно быть так же просто, как настройка шрифта:

new Font("Verdana", 16F);

EM

Это будет намного сложнее контролировать, потому что это кратно высоте вашей линии.Например, если 1em = 14 пикселей, то 16em = (14 * 16)пикселей.Это будет трудно воспроизвести, если вы не знаете свою высоту строки.

Также в документе говорится следующее

em-размер нового шрифта в пунктах.

Таким образом, он определен в пикселях для используемого вами конструктора.Вы могли бы попробовать этот конструктор, но на самом деле EM - это реализация браузера / CSS, которая динамически настраивается в соответствии с экраном, почти как векторы.Где объект шрифта представляет собой растровое изображение, которое определяет количество пикселей для рисования.

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