CODEWITHSUNDEEP
cssasp.nethtmlfonts
Ryan Shine
Ryan Shine

Reputation: 522

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

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/

Upvotes: 0

Views: 490

Answers (1)

Mike &#39;Pomax&#39; Kamermans
Mike &#39;Pomax&#39; Kamermans

Reputation: 53666

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.

Upvotes: 1

Related Questions