How to Render Text in .Net in the Same Size as Browsers Does Given CSS for the Text

How to render text in .NET in the same size as browsers does given CSS for the text

Actually, the docs say "em-size", not "em-point" ("The em-size, in points, of the new font"). It's asking you to specify the size in points. There are 72 points per inch. You need to figure out the DPI of the user's screen and the DPI of the canvas you're drawing on and multiply the 16px size by the difference in that ratio.

e.g.

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

You could save yourself a mathematical operation by using the Font constructor overload that takes a GraphicUnit and specify Pixels. This way, the appropriate size would be:

(CSS_Font_Size_Pixels  / User_Screen_DPI) * Canvas_DPI

same font-size, different rendered size

Here in a JSFiddle is the code you've given us, behaving as it should, I suspect the error is going to be in a CSS file or tag that you have not let on about, though.

Check your <head>...</head> tag for any linked CSS files that might be forcing a style on any divs with a 'legal' class.

Another option would be to suffix all the elements of the .legal class in the CSS you've shared with !important (and with your P{ ... }, as below;

.legal {
    margin: 0 auto !important;
    box-sizing: border-box !important;
    padding: 0 9rem 0 9rem !important;
    width: 100% !important;
    text-align: center !important;
}

Also there's a few rogue close-braces at the bottom of your CSS.

Consistent font-size across browsers (web development)

Use px (pixels) instead of pt (points) for your font size units. Then you'll be dealing with pixel sizes.

Beware however, depending on how your site is used. There have been lawsuits (in the US) over accessibility issues on websites that result from "hard-coding" the font size.

Same font except its weight seems different on different browsers

Be sure the font is the same for all browsers. If it is the same font, then the problem has no solution using cross-browser CSS.

Because every browser has its own font rendering engine, they are all different. They can also differ in later versions, or across different OS's.

UPDATE: For those who do not understand the browser and OS font rendering differences, read this and this.

However, the difference is not even noticeable by most people, and users accept that. Forget pixel-perfect cross-browser design, unless you are:

Trying to turn-off the subpixel rendering by CSS (not all browsers allow that and the text may be ugly...)
Using images (resources are demanding and hard to maintain)
Replacing Flash (need some programming and doesn't work on iOS)

UPDATE: I checked the example page. Tuning the kerning by text-rendering should help:

text-rendering: optimizeLegibility;

More references here:

Part of the font-rendering is controlled by font-smoothing (as mentioned) and another part is text-rendering. Tuning these properties may help as their default values are not the same across browsers.
For Chrome, if this is still not displaying OK for you, try this text-shadow hack. It should improve your Chrome font rendering, especially in Windows. However, text-shadow will go mad under Windows XP. Be careful.

Responsive font size in CSS

The font-size won't respond like this when resizing the browser window. Instead they respond to the browser zoom/type size settings, such as if you press Ctrl and + together on the keyboard while in the browser.

Media Queries

You would have to look at using media queries to reduce the font-size at certain intervals where it starts breaking your design and creating scrollbars.

For example, try adding this inside your CSS at the bottom, changing the 320 pixels width for wherever your design starts breaking:

@media only screen and (max-width: 320px) {

   body { 
      font-size: 2em; 
   }

}

Viewport percentage lengths

You can also use viewport percentage lengths such as vw, vh, vmin and vmax. The official W3C document for this states:

The viewport-percentage lengths are relative to the size of the initial containing block. When the height or width of the initial containing block is changed, they are scaled accordingly.

Again, from the same W3C document each individual unit can be defined as below:

vw unit - Equal to 1% of the width of the initial containing block.
vh unit - Equal to 1% of the height of the initial containing block.
vmin unit - Equal to the smaller of vw or vh.
vmax unit - Equal to the larger of vw or vh.

And they are used in exactly the same way as any other CSS value:

.text {
  font-size: 3vw;
}

.other-text {
  font-size: 5vh;
}

Compatibility is relatively good as can be seen here. However, some versions of Internet Explorer and Edge don’t support vmax. Also, iOS 6 and 7 have an issue with the vh unit, which was fixed in iOS 8.

Why the font that display on the browser is different with my visual web developer?

Short answer: because visual web developer 2010 express is not a browser, and doesn't use the same text shaping and rendering pipeline that modern browsers will be using.

If you want accurate, modern text shaping, matching what the browser does, then using a five year old software package is not the way to go: the first step towards a better solution is to stop using the mostly obsolete 2010 version of visual studio express, and start using community 2015, or at the oldest, express 2013.

And related to that: once you've updated, stop using 1999's XHTML, and move onto the modern HTML5 format instead. Trying to force modern concepts onto very old markup is another way to get unpredictable and often subtle --but somethings glaringly-- wrong results.

So, let's get the CSS right: font families with special characters must be quoted, so your family name with spaces needs quotes:

@font-face {
  font-family: "AvenirNext LT Pro Regular";
  src: url(...);
}

And then when you use that font anywhere else in your CSS, the same rules apply:

p.fancy {
  font-family: "AvenirNext LT Pro Regular";
}

And let's get the HTML right, too: leave as much as you can to the browser. Instead of those ASP properties, use a real HTML button with a runat property:

<button runat="server" id="Button1" class="fancy">
  I love you
</button>

And let the CSS deal with the styling properly.

Font size relative to the user's screen resolution?

@media screen and (max-width : 320px)
{
  body or yourdiv element
  {
    font:<size>px/em/rm;
  }
}
@media screen and (max-width : 1204px)
{
  body or yourdiv element
  {
    font:<size>px/em/rm;
  }
}

You can give it manually according to screen size of screen.Just have a look of different screen size and add manually the font size.

How to Render Text in .Net in the Same Size as Browsers Does Given CSS for the Text