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スタイルシートの を無視し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 を google から直接ダウンロードしてインストールすることが重要だと思います。インストール後に他のサービスへのアクセスを許可するために再起動することも重要です。私は元々 font-squirrel から ttf をダウンロードしましたが、condensed は windows/fonts で "Open Sans" と表示されていましたが、これは間違っています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

おそらく使用する必要がありますfont-stretch: condensed( Mozilla docs を参照)。

たとえば、.heading-subCSS を次のように変更します。

.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 に答える
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 に答える
0

さまざまなスタイルで Google Fonts Open Sans を利用します。

このリンク -> https://www.google.com/fonts/specimen/Open+Sansをクリックしてから、Google Fonts でOpen Sansをクリックします。

オプション 3 と 4 の下に、ヘッダーで使用する html リンクと CSS スタイルの使用法が表示されます。

于 2014-09-09T13:13:05.723 に答える
0

Firefox の場合: CSS に次の行を追加した後、問題は解決しました:

font-stretch: 凝縮;

Google で生成されたコードを使用する必要があります 。

私は700と300のウェイトを使用しています。

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

于 2015-02-11T22:08:22.727 に答える