web-dev-qa-db-ja.com

Open Sans Condensed LightがFirefoxで機能しない

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をどのように修正すればよいですか？

htmlcssgoogle-font-api
10
Balkar Kalsi

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 AP​​I呼び出しで要求しました。

こちらをご覧ください

14
Jason Gennaro

名前の一部ではなく、「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;
}
6
wcloister

IE8-IE9でフォントを機能させるには、EOTフォントファイルを使用する必要があります。このページでは、フォントをWebkitとしてダウンロードできます。 http://www.fontsquirrel.com/fonts/open-sans-凝縮

2
drougen

私はこの作品を手に入れるために無数のバリエーションを試したに違いありません。私はWKHtmlToPdfを介してPDFに埋め込まれたOpen Sans Condensedを取得しようとしています。

Open Sans Condensed ttfをgoogleから直接ダウンロードしてインストールし、インストールすることが重要だと思います。インストール後に他のサービスにアクセスできるようにするには、再起動することも重要です。私は元々font-squirrelからttfをダウンロードし、windows/fontsに「Open Sans」と表示されていましたが、これは間違っています。Googleのインストール後に見ると「Open Sans Condensed Light」と表示されているため、googleの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
jenson-button-event

おそらく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;
}
1
sampablokuper

Google CSSを参照する必要があります。 クイックスタートガイド を参照してください。

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

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

font-stretch：圧縮;

あなたは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; font-weight：700; font-stretch：condensed;

0
Yerbol

すべてのブラウザが少なくともこのフォントに対して異なる定義を使用しているようです。私はそれを自分のサイトにインストールし、chromeおよびopera-他のすべてのブラウザと同様に）つまり、Firefoxです。つまり、サファリではこれらのフォントがねじ込まれていました。誤ってFirefoxにフォントを表示させるまでは、chromeおよびoperaがねじ込まれました。同じフォントを2つの異なる方法で実際に割り当てると問題が解決することに気づいたのはそのときでした。ブラウザが最初の定義で問題がなければ、次のフォントは表示されず、そうでない場合は2番目のフォントが使用されます。ああ、コード自体：

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

フォントを別のdivに割り当てるために使用しました。乾杯、これが役に立てば幸いです-少なくとも私にとっては、それは背後の大きな痛みでした。

0
Alex

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

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

オプション3と4の下に、ヘッダーで使用するHTMLリンクとCSSスタイルの使用方法があります。

0
Jason Ebersey

@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>
0
Ilya Kanatov