在同一浏览器中采用的网站不同页面中的相同字体呈现不同答案

【问题标题】：Same font in different pages of a site taken in same browser renders differently在同一浏览器中采用的网站不同页面中的相同字体呈现不同
【发布时间】：2014-07-11 09:05:37
【问题描述】：

我有一个 "font-family: PT Sans;" 应用于 span 元素，但其中的文本在同一浏览器本身的不同页面中呈现不同。在主页中，它呈现"Arial" 字体样式，但在登录页面中，它是另外一回事。我试图通过将"font-family: Arial;" 提供给跨度来修复它，然后它在所有页面上呈现相同。

为什么第一个 font-family 会有所不同，这是正确的解决方法吗？

谁能帮忙？？

这是应用于类名为“manageListing”的跨度的样式：

.manageListing {
width: 133px;
height: 21px;
padding: 4px 0px 0px 0px;
display: block;
text-align: center;
font-family: PT Sans;
font-size: 14px;
color: #ffffff;
float: left;
margin-top: 10px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
-ms-border-radius: 15px;
-webkit-box-shadow: 4px 4px 9px rgba(50, 50, 46, 0.28);
-moz-box-shadow: 4px 4px 9px rgba(50, 50, 46, 0.28);
box-shadow: 4px 4px 9px rgba(50, 50, 46, 0.28);
-ms-box-shadow: 4px 4px 9px rgba(50, 50, 46, 0.28);    
}

【问题讨论】：

您可以查看开发工具并检查您的样式被覆盖。顺便说一句，您是否使用 font-family: PT Sans 设置了 span 元素的样式。作为第一步，只需给特定跨度一个类名，然后将 PT Sans 部分应用于您的 css 中的特定类名
是的 Somesh，我已经给 span 一个类名并添加了样式并尝试了。
旁注-既然有空格，您不应该设置为font-family: 'PT Sans'吗？

标签： css fonts rendering

【解决方案1】：

它必须从其他地方继承字体。在“PT Sans”之后添加一个“!important”，它将采用该值而不是继承的值。

【讨论】：

它没有解决问题，仍然呈现不同。
随便乱扔!important 确实会解决一个短期问题，但将来会让您头疼。除非您别无选择，否则不要使用它们。最好提高特异性，以便您的规则获胜。
感谢 Ruskin 的反馈。

【解决方案2】：

css 文件中使用的font-family: PT Sans 是谷歌字体，从 fonts.googleapis.com 导入，问题是由于协议 (http) 添加到 css 文件中的完整 url 以导入谷歌字体。因此，url 具有安全协议的页面没有得到font-family: PT Sans;，而 url 不安全的页面得到了正确的谷歌字体。所以我将css文件中的@import url(http://fonts.googleapis.com/css?family=PT+Sans);修改为@import url(//fonts.googleapis.com/css?family=PT+Sans);，它解决了这个问题。感谢所有试图解决我问题的人。

【讨论】：