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

Posted 2023-03-15

【中文标题】打开 Sans Condensed Light 在 Firefox 中不起作用

【英文标题】：Open Sans Condensed Light not working in Firefox

【发布时间】：2011-09-25 19:45:44

【问题描述】：

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

【问题讨论】：

所以你在你的代码中使用了自定义字体。你有没有在你的css中导入字体？？？

你为什么把除了你自己的名字都大写？

是的..我已经导入字体并将代码放在head部分如下...

fonts.googleapis.com/css?family=Open+Sans+Condensed">

【参考方案1】：

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

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

【参考方案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

【讨论】：

谢谢兄弟.. 非常感谢

您好...感谢以上回答.. 它在所有浏览器中都可以正常工作，即使在 IE 8 中也是如此，但在 IE9 中则不行。你能解决吗？

我对 FF 也有同样的问题，当使用这种方法时它对我没有帮助

Google Fonts website 推荐：Open+Sans+Condensed:300 和 font-family: 'Open Sans Condensed', sans-serif; 在 css 中。

【参考方案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;

【讨论】：

它是font-stretch: condensed;。 font-style: condensed; 不起作用。

Google Fonts website特别推荐：<link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300" rel="stylesheet">在css的header中font-family: 'Open Sans Condensed', sans-serif;。

【参考方案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;

【参考方案5】：

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

【参考方案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');

【参考方案7】：

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

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

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

【参考方案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； 字体拉伸：浓缩；

【参考方案9】：

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

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

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

【参考方案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>