关于html：Open Sans Condensed Light在Firefox中不起作用


Open Sans Condensed Light not working in Firefox

我已经从Google Web Fonts下载了Open Sans Condensed Light字体，并附加了它们的CSS代码：

1
2
<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300&subset=greek-ext&v2'
      rel='stylesheet' type='text/css'>

但是除Firefox之外的所有浏览器都可以显示确切的字体系列，即在IE，Chrome，Safari和Firefox中看起来都不错。

这是我的CSS和HTML代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
h2.title-border {
    border-bottom: 1px solid #000;
    margin-top: 10px;
    line-height: 45px;
    margin-bottom: 15px;
}

.heading-sub {
    background: #000;
    font-family:"Open Sans Condensed Light";
    font-weight: normal;
    text-transform: none;
    font-size: 32px;
    padding: 0 15px;
    margin-bottom: 0px;
    color: #fff;
    border-bottom: 1px solid #000;
}

HTML：

1
<h2 class="title-border"><span class="heading-sub">About Us</span>

您能否提出建议，我该如何修复Firefox？

相关讨论

根据API，您应该像这样调用字体

需要专门调用light变体，即:light。

其他浏览器可能会忽略样式表中的Light，而为您提供在API调用中要求的Open Sans Condensed。

看这里

相关讨论

缩写是" Open Sans"字体的"样式"，而不是名称的一部分。这对我有用。

1
2
3
4
5
6
7
8
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Open+Sans:Condensed" />


.selector
{
    font-family:'Open Sans';
    font-style:condensed;
}
相关讨论

我一定尝试了数以百计的变化才能完成这项工作。我正在尝试通过WKHtmlToPdf将Open Sans Condensed嵌入到pdf中。

我认为重要的是您直接从Google下载并安装Open Sans Condensed ttf并进行安装。在安装后重新引导以允许其他服务访问也很重要。我最初是从font-squirrel下载ttf的，而condensed在Windows / fonts中被列为" Open Sans"，这是错误的，如果您在Google安装后将其列为" Open Sans Condensed Light"，那么即使是Google的local('Open Sans Cond Light')脚本错误。

如前所述，您需要明确说明拉伸和权重，所以这对我有用：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
    @font-face {
     font-family: 'Open Sans';
     font-style: normal;
     font-weight: 400;
     src: local('Open Sans');
    }

    @font-face {
     font-family: 'Open Sans Condensed';
     font-stretch:condensed;
     font-style: normal;
     font-weight: 300;
     src: local('Open Sans Condensed Light');
    }

@@font-face { font-family: 'Open Sans Condensed Bold'; font-stretch:condensed; font-style: normal; font-weight: 700; src: local('Open Sans Condensed'), local('Open Sans Condensed Bold');}

要使字体适用于IE8-IE9，您必须使用EOT字体文件，
在此页面上，您可以将字体下载为Webkit：
http://www.fontsquirrel.com/fonts/open-sans-condensed

您可能应该使用font-stretch: condensed(请参阅Mozilla文档)。

例如，如下更改您的.heading-sub CSS：

1
2
3
4
5
6
7
8
9
10
11
12
.heading-sub {
    background:#000;
    font-family:"Open Sans";
    font-stretch: condensed;
    font-weight:300;
    text-transform:none;
    font-size:32px;
    padding:0 15px;
    margin-bottom:0px;
    color:#fff;
    border-bottom:1px solid #000;
}

您必须参考Google CSS。请参阅他们的快速入门指南。

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

它对我不起作用，因为@import应该是样式的第一行。

作品：

1
2
3
4
5
6
<style>
    @import url('https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300');

    .myStyle {
    }
</style>

不起作用：

1
2
3
4
5
6
<style>
    .myStyle {
    }

    @import url('https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300');
</style>

似乎所有浏览器都至少以某种方式使用了不同的定义。我已经将它安装在我的网站上，并试图弄清楚如何使其在所有浏览器(而不是chrome和Opera)中都具有下降性-就像所有其他浏览器一样，这就是firefox，即safari使这些字体搞砸了。直到不小心我让Firefox看到了ok字体，但是随后chrome和Opera被搞砸了。因此，当我意识到实际上以两种不同的方式分配相同的字体可以解决该问题时：如果浏览器对第一个定义没问题，则不会查看下一个，否则将用于第二个。嗯，代码本身：

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

我用它为不同的div分配字体。欢呼，希望这对您有所帮助-至少对我而言，这是一个巨大的痛苦。

对于Firefox：
将CSS添加到此行后，我的问题解决了：

font-stretch：压缩;

您应该使用Google生成的代码，我的代码是：
http://fonts.googleapis.com/css?family=Open+Sans+Condensed：700,300'rel ='stylesheet'type ='text / css'>

因为我正在使用700和300的重量。

CSS：
字体家族：" Open Sans Condensed"，无衬线；
font-weight：700;
font-stretch：压缩;

利用各种样式的Google Fonts Open Sans：

单击此链接-> https://www.google.com/fonts/specimen/Open+Sans，然后单击Google Fonts中的Open Open Sans。

在选项3和4下，您会找到要在标题中使用的html链接以及CSS样式用法。