9

使用するとき、フォールバック フォントをweb fonts使用する際@font-faceの推奨される方法は何だろうと思っていました。

たとえば、次のような太字の Web フォントを使用していたとします。

@font-face {
    font-family: 'OpenSansBold';
    src: url('../fonts/OpenSans-Bold-webfont.eot');
    src: url('../fonts/OpenSans-Bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/OpenSans-Bold-webfont.woff') format('woff'),
         url('../fonts/OpenSans-Bold-webfont.ttf') format('truetype'),
         url('../fonts/OpenSans-Bold-webfont.svg#OpenSansBold') format('svg');
    font-weight: normal;
    font-style: normal;
}

これを呼び出すと、明らかにこれを行うだけです：

font-family: OpenSansBold;

ただし、フォントのダウンロードが何らかの理由で失敗した場合など、代替フォントを提供することについて疑問に思っていました。

明らかに、以下のように通常のスタイルのフォント (非ボールド/非イタリック) を使用するのは簡単です..

font-family: OpenSansRegular, Arial;

ただ、気になるのは、フォントがボールドやイタリックの場合はどうなのかということです。

このようなことをお勧めしますが、Web フォントには影響しませんか?

font-family: OpenSansBold, Arial;
font-weight: bold;

太字を指定しなかった場合、Web フォントが失敗した場合、Arial が取得されますが、太字にはなりません。

4

3 に答える 3

12

おそらく、FontSquirrelによって生成されたフォントファイルとCSSファイルを使用しています。彼らのアプローチの問題は、それぞれの特定のフォント（OpenSansRegularやOpenSansBoldなど）が、フォントの太さが通常に設定された個別のフォントファミリとして表されることです。つまり、マークアップのよう<p>foo <strong>bar</strong>な単純なCSSのようなp { font-family: Open Sans, Arial }（ブラウザのデフォルトstrongを太字のフォントの太さにし、Open Sansファミリから適切なフォントを選択する）代わりに、フォントを明示的に設定する必要があります。これは、プロパティ値を使用して、フォントファミリとフォントの太さの両方を暗黙的に設定することを意味しfont-familyます。

より良いアプローチを得るには、CSSを調整する必要があります。@font-familyルールでは同じフォントファミリを使用しますが、重みは異なります。ルールfont-familyでは、ファミリを設定するだけです。

@font-face {
    font-family: 'open_sans';
    src: url('opensans-bold-webfont.eot');
    src: url('opensans-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('opensans-bold-webfont.woff') format('woff'),
         url('opensans-bold-webfont.ttf') format('truetype'),
         url('opensans-bold-webfont.svg#OpenSans') format('svg');
    font-weight: bold;
    font-style: normal;
}   
@font-face {
    font-family: 'open_sans';
    src: url('opensans-regular-webfont.eot');
    src: url('opensans-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('opensans-regular-webfont.woff') format('woff'),
         url('opensans-regular-webfont.ttf') format('truetype'),
         url('opensans-regular-webfont.svg#OpenSans') format('svg');
    font-weight: normal;
    font-style: normal;
}
* { font-family: open_sans, Arial; }

次に、Open Sans Boldに表示される要素に（または、、、、、〜などのデフォルトでそのような効果を持つHTMLマークアップ）を使用しfont-weight: boldます。strongbthh1h6

あなたが説明する方法でそれを行うことは、ほとんどのブラウザでも機能するように見えますが、私はそれを当てにしません。でフォントを通常の太さとして宣言すると、そのフォントのテキストに@font-face設定font-weight: boldすると、a）太さが一致しないために失敗するか、b）アルゴリズムによる太字の開始点としてフォントが使用され、結果が2倍になる可能性があります。太字。そして、私が間違っていなければ、b）はSafari（Win 7）で何が起こるかです。

于 2012-09-24T11:16:34.580 に答える
8

Web フォントの「新時代」の問題を正しく強調しました。このブログ投稿では、それについて説明し、回避策を示しますhttp://elliotjaystocks.com/blog/font-weight-in-the-age-of-web-フォント/

関連スニペット

2 番目の問題は、最初の問題よりもかなり大きいです。重量が 400 (または 500) の FF Enzo を考えてみましょう。状況によっては、ライト (300) のウェイトは小さな体型には少し薄すぎるかもしれないので、代わりに 600 のウェイトを使用しましょう。あ、大丈夫そうです。

でも大丈夫じゃない！そのフォントを表示できず、別のものにフォールバックする場合、そのフォールバック フォントは 600 のウェイトでレンダリングされます。言い換えれば、太字。

回避策はありますか？

これを回避する方法があり、FontsLive がユーザー用に生成する CSS で使用する方法です。ファミリー全体ではなく、各重みを個別に宣言します。彼らのコードは次のようになります。

CSS コード:

{ font-family: 'FamilyName Light', 'FallbackFamily', serif; font-weight: normal; }
{ font-family: 'FamilyName Medium', 'FallbackFamily', serif; font-weight: normal; }
{ font-family: 'FamilyName Bold', 'FallbackFamily', serif; font-weight: bold; }
{ font-family: 'FamilyName Black', 'FallbackFamily', serif; font-weight: bold; }

アップデート：

@font-face {
    font-family: 'OpenSansBold';
    src: url('../fonts/OpenSans-Bold-webfont.eot');
    src: url('../fonts/OpenSans-Bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/OpenSans-Bold-webfont.woff') format('woff'),
         url('../fonts/OpenSans-Bold-webfont.ttf') format('truetype'),
         url('../fonts/OpenSans-Bold-webfont.svg#OpenSansBold') format('svg');
    font-weight: bold;
    font-style: normal;
}

そして、（あなたが提案したように）のようなもの：

{ font-family: OpenSansBold, 'Arial'; font-weight: bold; }
于 2012-09-24T10:03:09.267 に答える