gpt4 book ai didi

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

转载 作者:太空宇宙 更新时间:2023-11-04 11:13:19 25 4
gpt4 key购买 nike

您好,我正在使用 visual web developer 2010 express。

但是,当我执行我的代码时,我的浏览器上显示的字体与我的可视化 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/

最佳答案

简短回答:因为 Visual Web Developer 2010 Express 不是浏览器,并且不使用现代浏览器将使用的相同文本整形和渲染管道。

如果您想要准确、现代的文本整形,匹配浏览器的功能,那么使用五年前的软件包不是好方法:迈向更好解决方案的第一步是停止使用几乎已过时的 2010 版本visual studio express,并开始使用 community 2015,或者最早使用 express 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 正确:尽可能多地留给浏览器。 use a real HTML button with a runat property 而不是那些 ASP 属性:

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

并让 CSS 正确处理样式。

关于css - 为什么浏览器上显示的字体与我的可视化 Web 开发人员不同?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33431636/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com