Html Open Sans Condensed Light 在 Firefox 中不起作用

Open Sans Condensed Light not working in Firefox

提问by Balkar Kalsi

I have downloaded the Open Sans Condensed Light font from Google Web Fonts, and also attached their CSS code:

我已经从 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'>

But every browser other than Firefox, shows exact font family i.e. it looks fine in IE, Chrome, Safari, but not in Firefox.

但是除 Firefox 之外的所有浏览器都显示精确的字体系列，即它在 IE、Chrome、Safari 中看起来不错，但在 Firefox 中则不然。

Here is my CSS and the HTML code:

这是我的 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:

HTML:

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

Can you please suggest, how should I fix Firefox regarding this?

您能否提出建议，我应该如何解决 Firefox 的这个问题？

回答by Jason Gennaro

According to the API, you should be calling the font like this

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

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

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

The lightvariant needs to be called specifically, i.e. :light.

的光变体需要被具体地称为，即:light。

The other browsers are probably ignoring the Lightin your stylesheet and giving you the Open Sans Condensedyou asked for in the API call.

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

See here

看这里

回答by wcloister

Condensed is the "style" of the "Open Sans" font, not part of the name. This worked for me.

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

回答by drougen

To make the font work for IE8-IE9 you have to use a EOT font file, On this page you can download the font as a webkit: http://www.fontsquirrel.com/fonts/open-sans-condensed

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

回答by jenson-button-event

I must have tried a gazillion variations to get this work. I am trying to get Open Sans Condensed embedded into a pdf via WKHtmlToPdf.

我一定已经尝试了无数变体来完成这项工作。我正在尝试通过 WKHtmlToPdf 将 Open Sans Condensed 嵌入到 pdf 中。

I think it is important that you download and install the Open Sans Condensed ttf directly from google and install it. It is also important to reboot to allow other services access after install. I downloaded the ttf from font-squirrel originally and condensed was listed as "Open Sans" in windows/fonts, which is wrong, if you look after the google install it is listed as "Open Sans Condensed Light" so even google's local('Open Sans Cond Light')script is wrong.

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

As mentioned before you need to be explicit with the stretch and weights, so this is what has worked for me:

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

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

回答by sampablokuper

You probably ought to use font-stretch: condensed(see Mozilla docs).

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

For example, change your .heading-subCSS as follows:

例如，.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;
}

回答by Giann

You have to refer to Google CSS. See their QuickStart Guide.

你必须参考谷歌 CSS。请参阅他们的快速入门指南。

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

回答by Jason Ebersey

Make use of Google Fonts Open Sans in the various styles:

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

Click on this link -> https://www.google.com/fonts/specimen/Open+Sansand then click on Open Open Sansin Google Fonts.

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

Under option 3 and 4 you will find the html link to use in your header as well as the CSS style usage.

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

回答by Yerbol

for Firefox: My problem solved after I added to CSS this line:

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

font-stretch: condensed;

字体拉伸：浓缩；

You should use Google generated code, mine was: http://fonts.googleapis.com/css?family=Open+Sans+Condensed:700,300' rel='stylesheet' type='text/css'>

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

as I am using 700 and 300 weights.

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

CSS: font-family: 'Open Sans Condensed', sans-serif; font-weight:700; font-stretch: condensed;

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

回答by Alex

it appears that all the browsers are somehow using different definitions for at least this font. i had it installed on my site and been trying to figure how to make it look descent in all browsers, not just chrome and opera - as all others, that is firefox, ie and safari had those fonts screwed. until accidentally i made firefox see the font ok, but then chrome and opera got screwed. so that was when i realized that actually assigning the same font in two different ways solves the problem: if the browser's ok with the first definition, it won't look at the next one, otherwise it'll go for the second one. ah, the code itself:

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

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

i used it for assigning fonts to different divs. cheers, hope this helps - at least for me it was a major pain in the behind.

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

回答by Ilya Kanatov

It doesn't works for me because the @import should be the first line in style.

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

Works:

作品：

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

    .myStyle {
    }
</style>

?Doesn't works:

？不起作用：

<style>
    .myStyle {
    }

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