10

我从 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？

4

10 回答 10

14

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

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

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

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

看这里

于 2011-06-30T11:01:26.050 回答
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;
}
于 2012-04-04T01:43:00.960 回答
3

我一定尝试了无数种变化来完成这项工作。我正在尝试通过 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');}
于 2013-05-31T08:36:57.273 回答
2

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

于 2013-03-27T13:16:24.470 回答
1

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

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Open+Sans+Condensed">
于 2011-06-30T09:09:27.990 回答
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;
}
于 2013-03-27T03:33:03.073 回答
0

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

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

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

于 2014-09-09T13:13:05.723 回答
0

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

字体拉伸：浓缩；

你应该使用谷歌生成的代码，我的是：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；字体拉伸：浓缩；

于 2015-02-11T22:08:22.727 回答
0

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

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

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

于 2015-02-26T19:32:43.127 回答
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>
于 2017-08-05T08:54:42.767 回答