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

Question

Hi I am using visual web developer 2010 express.

However when I implement my code, the font that display on my browser is display differently with my visual web developer.

here is what I tried.

1)I tried to refresh page (probably it is cache issue ) not working.

2) the font has been pointed correctly , so please do not judge this as the fail to point to correct font.

The attachment and the code has been attach as below.

This is sample project.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
<link href="Styles/StyleSheet.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
    <form id="form1" runat="server">
    <div>

        <asp:Button ID="Button1" runat="server" Font-Bold="True" 
            Font-Names="AvenirNext LT Pro Regular" Text="I love you" />

    </div>
    </form>
</body>
</html>

css file

body 
{
}
@font-face 
{ 
    font-family: AvenirNext LT Pro Regular; 
    src: url(../font/AvenirNextLTPro-Regular.otf); 
}

picture attached,

http://s4.postimg.org/nq4d1oa30/font1.jpg

http://postimg.org/image/j2i9afsc3/

code environment won't show you exactly as the browser. so not to worry about this. — Bhojendra Rauniyar, Oct 30 '15 at 08:34
it is impossible that show exactly as development environment? the way of browser show is the way too ugly — Ryan Shine, Oct 30 '15 at 08:37
To me that looks like the same font just the visual web developer one is a little heavier. The button is different. Also, I tend to check design in the browser rather than a design tool for this reason. If you use visual studio you can use web essentials browser link to update css from the browser and the changes will be transferred to visual studio. http://vswebessentials.com/features/browserlink — Dhunt, Oct 30 '15 at 08:38
Try it by setting the font name in `"` in the CSS. This is necessary if the name contains spaces. — KittMedia, Oct 30 '15 at 08:49
different with the web developer and different with the chrome. — Ryan Shine, Oct 30 '15 at 09:03
the button which show in the ie is more like the font is not able to link, it show as default font — Ryan Shine, Oct 30 '15 at 09:06
I find that different browsers treat fonts differently - in particular Chrome requires the full file path of the font files, not relative ones (or vice versa, can't remember exactly). — Lyall, Oct 30 '15 at 16:44

score 1 · Accepted Answer · edited May 23 '17 at 10:27

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.

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

1 Answers1