在 Firefox 上渲染 Open Sans Light 的问题答案

【问题标题】：Issue with rendering Open Sans Light on Firefox在 Firefox 上渲染 Open Sans Light 的问题
【发布时间】：2014-10-21 06:55:43
【问题描述】：

我使用 Open Sans Light 在 IE 和 Chrome 上显示 html 页面没有问题，但是当使用 Firefox 时，它不理解这种类型的字体。

这是定义我的字体的 .css 部分：

 .txtName
 {
     margin-left: 18px;
     font-size: 20px;
     color: #0140be;
     font-family: 'Open Sans Light' !important;
     font-weight:normal;
     line-height: 1.4em;   
 }

这是html文件中需要在IE、Chrome和FF上显示相同的部分：

<div class="txtName-Main">
     <h1 class="txtName">Your pathway to success starts here</h1>
</div>

可能是什么问题？

谢谢

【问题讨论】：

stackoverflow.com/questions/6532458/… 的副本？
你是如何加载字体的？此外，您的开头 h1 标记没有第一个 < 符号。
我的系统文件夹中只有字体。我应该如何加载字体？
我使用了<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>，但没有帮助

标签： html css firefox styles

【解决方案1】：

'Open Sans Light' 不是字体系列的有效表示。 'Open Sans' 的'Light'（300 重量）版本是：

在文档的头部：

<link href='http://fonts.googleapis.com/css?family=Open+Sans:300' rel='stylesheet' type='text/css'>

在您的 CSS 中：

font-family: 'Open Sans', sans-serif;
font-weight: 300;

【讨论】：

这也有效。谢谢。但是我的代码中还有另一部分需要将'Open Sans', Arial, sans-serif 与font-weight:400 一起使用，这不起作用
使用 Google 字体，您可以将多种字体加载到一个 URL：“//fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,400,300”。然后，您需要做的就是更改字体粗细、字体样式属性等。google.com/fonts#QuickUsePlace:quickUse
用这种方法解决了问题。但是，当我将代码复制到某个网络位置时，Chrome 和 FF 会显示样式，但 IE 不会。你有什么建议吗？
不参考googleapis是否可以实现所有这些？
来自developers.google.com/fonts/faq ：“我可以将 Google 字体中的字体下载到我自己的计算机上吗？可以。要下载字体，只需将字体添加到您的收藏中，然后单击“下载您的收藏”链接。您可以下载字体以将它们用于您的模型、文档中或将它们托管在您自己的服务器上。”

【解决方案2】：

我看到了一些建议，但对我有用的是加载我的字体：

<link href='http://fonts.googleapis.com/css?family=Open+Sans:Light' rel='stylesheet' type='text/css'>

在 .css 中我必须使用以下定义：

color: #0140be;
font-family: 'Open Sans';
font-style: Light;
font-size: 20px;
font-weight: normal;

所以，而不是：

font-family: 'Open Sans Light'

我用过

font-family: 'Open Sans';
font-style: Light;

成功了

【讨论】：

【解决方案3】：

似乎所有浏览器都以某种方式至少对这种字体使用了不同的定义。我把它安装在我的网站上，并试图弄清楚如何让它在所有浏览器中看起来下降，而不仅仅是 chrome 和 opera——就像所有其他浏览器一样，即 firefox，ie 和 safari 把这些字体搞砸了。直到我不小心让firefox看到字体没问题，但后来chrome和opera搞砸了。所以那时我意识到实际上以两种不同的方式分配相同的字体可以解决问题：如果浏览器对第一个定义没问题，它不会查看下一个定义，否则它会选择第二个。啊，代码本身：

font-family: open sans condensed light, open sans condensed;

我用它来为不同的 div 分配字体。干杯，希望这会有所帮助。

【讨论】：

【解决方案4】：

    <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400" rel="stylesheet">

进入<head> 元素并下载浅色和常规字体

在 css 样式中： ul, p, h1, h2, h3, h4, h5, li, dd, dt, a{ font-family:'Open Sans', sans-serif; 字体粗细：300；字体样式：正常；为基于 Web 的字体和（本地）后备字体设置（大多数）元素。 font-style: normal 是默认值，因此不是必需的。（Font-style:Light 不是有效属性。）

【讨论】：