Question

使用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>

可能是什么问题？

THX

Answer 1

＆＃39; Open Sans Light＆＃39;不是font-family的有效表示。＆＃39; Light＆＃39; （300重量）版本的＆＃39; Open Sans＆＃39;是：

在你的文件的头部：

<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;

Answer 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;

并且有效

Answer 3

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

font-family：打开无浓缩光，打开无浓缩;

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

Answer 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; font-weight：300; font-style：normal; 为基于Web的字体和（本地）后备字体设置（大多数）元素。 font-style: normal是默认值，因此不是必需的。（Font-style:Light不是有效的财产。）

在Firefox上渲染Open Sans Light的问题

4 个答案: