为什么浏览器上显示的字体与我的可视化Web开发人员不同?

时间:2015-10-30 08:31:42

标签: html css asp.net html5 fonts

您好我正在使用Visual Web开发人员2010快递。

但是,当我实现我的代码时,浏览器上显示的字体与我的可视化Web开发人员的显示方式不同。

这是我试过的。

1)我试图刷新页面(可能是缓存问题)无效。

2)字体已经正确指出,所以请不要将其判断为无法指向正确的字体。

附件和代码附件如下。

这是示例项目。

<%@ 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文件

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

附图片,

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

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

1 个答案:

答案 0 :(得分:1)

简短回答:因为可视化Web开发人员2010 express不是浏览器,并且不使用现代浏览器将使用的相同文本整形和渲染管道。

如果您想要准确,现代的文本整形,匹配浏览器的功能,那么使用五年历史的软件包是不可取的:迈向更好解决方案的第一步是停止使用大多数过时的2010版本视觉工作室表达,并开始使用2015年社区,或在最古老的,表达2013年。

与此相关:一旦你更新了,就停止使用1999的XHTML,转而使用现代HTML5格式。试图将现代概念强加于非常古老的标记是另一种不可预测且常常微妙的方式 - 但是事情明显 - 错误的结果。

所以,让我们正确使用CSS:带有特殊字符的字体系列必须,所以带空格的姓氏需要引号:

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

然后当您在CSS中的任何其他地方使用该字体时,适用相同的规则:

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

让我们也正确地使用HTML:尽可能多地留给浏览器。而不是那些ASP属性,use a real HTML button with a runat property

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

让CSS正确处理样式。