打开 Sans Condensed Light 在 Firefox 中不起作用

Question

我从 Google Web Fonts 下载了 Open Sans Condensed Light 字体，并附上了他们的 CSS 代码：

<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 代码：

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：

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

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

Answer 1

您必须参考 Google CSS。见他们的QuickStart Guide。

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

Answer 2

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

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

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

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

See here

Answer 3

Condensed 是“Open Sans”字体的“风格”，而不是名称的一部分。这对我有用。

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


.selector
{
    font-family:'Open Sans';
    font-style:condensed;
}

Answer 4

您可能应该使用font-stretch: condensed (see Mozilla docs)。

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

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

Answer 5

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

Answer 6

我必须尝试无数种变体才能完成这项工作。我正在尝试通过 WKHtmlToPdf 将 Open Sans Condensed 嵌入到 pdf 中。

我认为直接从谷歌下载并安装 Open Sans Condensed ttf 并安装它很重要。安装后重新启动以允许其他服务访问也很重要。我最初从 font-squirrel 下载了 ttf，condensed 在 windows/fonts 中被列为“Open Sans”，这是错误的，如果你看一下谷歌安装它被列为“Open Sans Condensed Light”，所以即使是谷歌的local('Open Sans Cond Light')脚本是错误的。

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

    @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');}

Answer 7

利用各种风格的 Google Fonts Open Sans：

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

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

Answer 8

对于火狐： 将这一行添加到 CSS 后，我的问题解决了：

字体拉伸：压缩；

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

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

CSS： font-family: 'Open Sans Condensed', sans-serif; 字体粗细：700； 字体拉伸：浓缩；

Answer 9

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

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

我用它来为不同的 div 分配字体。干杯，希望这会有所帮助 - 至少对我来说，这是背后的主要痛苦。

Answer 10

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

作品：

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

    .myStyle {
    }
</style>

 不起作用：

<style>
    .myStyle {
    }

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