Question

我从Google网络字体下载了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

根据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 2

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 3

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

Answer 4

我必须尝试过无数变化来完成这项工作。我试图通过WKHtmlToPdf将Open Sans Condensed嵌入到pdf中。

我认为您直接从谷歌下载并安装Open Sans Condensed ttf并安装它非常重要。重新启动以在安装后允许其他服务访问也很重要。我最初从font-squirrel下载了ttf，并且缩写在windows / fonts中被列为“Open Sans”，这是错误的，如果你照看谷歌安装，它被列为“打开Sans Condensed Light”，所以即使谷歌的{{1脚本错了。

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

local('Open Sans Cond Light')

Answer 5

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

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

Answer 6

您可能应该使用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 7

以各种风格使用Google字体Open Sans：

点击此链接 - ＆gt; https://www.google.com/fonts/specimen/Open+Sans然后点击Google字体中的 Open Open Sans 。

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

Answer 8

for Firefox：我在CSS中添加了这一行后问题解决了：

font-stretch：简化;

你应该使用谷歌生成的代码，我的是：的 http://fonts.googleapis.com/css?family=Open+Sans+Condensed:700,300'的rel =＆＃39;样式表＆＃39;类型=＆＃39;文本/ CSS＆＃39;＆GT;

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

CSS： font-family：＆＃39;打开Sans Condensed＆＃39;，sans-serif; 字体重量：700; font-stretch：浓缩;

Answer 9

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

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>

Open Sans Condensed Light无法在Firefox中运行

10 个答案:

以各种风格使用Google字体Open Sans：