logo标签列表

Open Sans Condensed Light在Firefox中无法正常工作

htmlcssgoogle-font-api
10

我从谷歌Web字体下载了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方面的问题？
所以您在代码中使用了自定义字体。您是否已经将字体导入到您的CSS中了？ - Balanivash
1
你为什么把所有名字都大写，除了自己的名字？ - BoltClock
是的，我已经导入了字体并将代码放在头部部分，如下所示... - Balkar Kalsi
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Open+Sans+Condensed"> - Balkar Kalsi
10个回答
14
根据 API，你应该像这样调用字体：
``````
需要特别调用“轻体”版本，即使用 :light。
其他浏览器可能忽略你样式表中的 Light，并给你在 API 调用中请求的 Open Sans Condensed 字体。
请点击此处查看。
你好...感谢您上面的回答..它在所有浏览器中都可以正常工作，甚至在IE 8中也可以，但在IE9中不行。您能否解决这个问题？ - Balkar Kalsi
我在使用 FF 时遇到了同样的问题，但是采用这种方法并没有帮助到我。 - eugene.it
Google Fonts网站建议使用以下内容：在CSS中使用Open+Sans+Condensed:300和font-family: 'Open Sans Condensed', sans-serif;。 - Iktys
6

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;
}
这是 font-stretch: condensed;。font-style: condensed; 不起作用。 - AxeEffect
Google Fonts网站特别推荐：在头部使用<link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300" rel="stylesheet">在CSS中使用font-family: 'Open Sans Condensed', sans-serif; - Iktys
3

我试了无数种方法才让这个工作起来。我正在尝试使用WKHtmlToPdf将Open Sans Condensed嵌入到PDF中。

我认为重要的是直接从Google下载并安装Open Sans Condensed ttf字体，并重新启动计算机以允许其他服务访问。我最初从font-squirrel下载了ttf，而在windows/fonts中，压缩后的字体被列为“Open Sans”，这是错误的。如果您在Google安装后查看，它将列为“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');}
2
1

您需要参考谷歌CSS，查看他们的快速入门指南。

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

您可能需要使用font-stretch: condensed（参见Mozilla文档）。

例如，将您的.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;
}
0

使用Google字体Open Sans的不同样式：

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

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

0

对于Firefox： 在CSS中添加以下行后，我的问题得到了解决：

font-stretch: condensed;

你应该使用谷歌生成的代码，我的是： 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; font-weight:700; font-stretch: condensed;

0

看起来所有的浏览器都以某种方式使用不同的定义，至少对于这个字体而言。我将它安装在我的网站上，并一直试图弄清楚如何使它在所有浏览器中看起来好看，而不仅仅是在Chrome和Opera中 - 因为所有其他浏览器（Firefox、IE和Safari）都有字体问题。直到我意外地让Firefox正确显示了该字体，但随后Chrome和Opera出现了问题。所以那时我意识到，实际上通过两种不同的方式分配相同的字体可以解决问题：如果浏览器满意第一个定义，它就不会查看下一个定义，否则它会选择第二个定义。啊，代码本身：

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

我用它来为不同的div分配字体。祝好，希望这有所帮助 - 至少对我来说，这是一个很大的麻烦。

0

对我来说它不起作用，因为@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>
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接