Webフォントとフォールバックフォントの提供

Question

web fontsを使用して@font-faceを使用しているとき、フォールバックフォントを使用する際に推奨される方法は何ですか？

例えばのように、私のような、大胆たウェブフォントを使用していた場合：私はしたが

font-family: OpenSansBold; 

：あなたがこれを呼び出すときに今、あなたは明らかにちょうどこれを行う

@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: OpenSansRegular, Arial; 

通常のスタイルのフォントを行うのに十分に簡単ですイタリック。

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

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

だけでウェブフォントが失敗した場合は、その後、太字を指定しなかった場合、彼らはゴシックになるだろうので不思議に思ったが、それは大胆ではないでしょう。あなたは正しくウェブフォントの「新時代」の問題を強調してきた

Answer 1

彼らのコードは少し、このようになります。 FontSquirrが生成したフォントファイルとCSSファイルをおそらく使用していますエル。彼らのアプローチの問題は、それぞれの特定のフォント（Open Sans RegularとOpen Sans Boldなど）がフォントウェイトがnormalに設定された別のフォントファミリとして表現されていることです。これは<p>foo <strong>bar</strong>のようなマークアップとp { font-family: Open Sans, Arial }のような単純なCSSの代わりに（ブラウザでデフォルトの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; } 

そしてあなただけのfont-weight: bold（または、そのような持っているHTMLマークアップを使用します効果は、Open Sans Boldに表示する必要がある要素に対して、strong,b、th、h1〜h6などのようにデフォルトで適用されます。

これを行うことは、ほとんどのブラウザでも機能するように見えますが、私はそれを信じません。 @font-faceで普通の太さのフォントを宣言したら、そのフォントのテキストにfont-weight: boldを設定すると、a）重みが一致しないか、またはb）アルゴリズムの太字の開始点として使用されたフォントダブルボルディングで。私が誤解されていないならば、b）はSafari（Win 7）で何が起こるかです。

Answer 2

、このブログの記事はhttp://elliotjaystocks.com/blog/font-weight-in-the-age-of-web-fonts/

関連スニペットを、それを説明し、回避策を提示

問題番号2は、より有意に大きいです最初。 400（または500）の重量を持たないFF Enzoを考えてみましょう。状況によっては、Light（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; }