ウェブフォント
でWebフォントを定義するには、2つの方法があります@font-face。最初の、そしておそらく最も一般的な（ほとんどのジェネレーター、たとえばFont Squirrelがこれを出力すると思います）は、各フォントファイル（つまり、各ウェイトとスタイル）を独自の一意のファミリ名で定義することです。
@font-face {
font-family: 'YourFont';
src: url('your_font.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'YourFontBold';
src: url('your_font_bold.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'YourFontItalic';
src: url('your_font_italic.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
注意してくださいfont-weightとfont-styleそれぞれに通常に設定され、それぞれが独自の持っているfont-family名前を。この手段は任意の時間が設定しfont-weightたりfont-style、ブラウザの「フェイク」のスタイル、実装なっている通常の以外にない、正しいフォントファイルからスタイルを。また、デフォルトのブラウザーCSSスタイルを「通常」にリセットしないと、「二重」の太字または斜体になる可能性があります。例えば：
strong {
font-family: 'YourFontBold';
}
resetingがなければfont-weight、正常に、それはそれはブラウザが太字フォントファイルをロードしている必要がありますので、より大胆にレンダリングされますとのデフォルトスタイル以来、独自の偽の大胆なスタイルを追加することstrongですfont-weight: bold;。
より良い方法：
@font-face {
font-family: 'YourFont';
src: url('your_font.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'YourFont';
src: url('your_font_bold.ttf') format('truetype');
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: 'YourFont';
src: url('your_font_italic.ttf') format('truetype');
font-weight: normal;
font-style: italic;
}
フォントファイルの定義font-weightとfont-style対応が正しく、すべて同じfont-family名前を使用していることに注意してください。この方法でフォントを宣言するfont-weightとfont-style、CSS内のどこでも、期待どおりに使用でき、「偽の」スタイルのない正しいフォントが得られます。
キーワード「太字」と「斜体」のみがすべてのブラウザで認識される可能性が高いため、代わりに特定のフォントの太さの数値を使用する必要があります。また、ブラウザは通常、フォントの太さを適切に丸めないので、必要な太さを正確に指定し、@font-face宣言とCSSスタイルで一致することを確認してください。
この方法の問題は、Internet Explorer 8以前では、同じfont-family名前を使用する複数のスタイルとウェイトが認識されないことです。これは古いバージョンのiOSでも問題を引き起こしたと思います
Google Fontsは、通常のフォントのみでIE 8以下を条件付きで提供し、IEに他のスタイルを「偽装」させることで、これを回避します。理想的ではありません。
smashingmagazine.comに関するこの記事では、条件付きでInternet Explorerのスタイルを個別に追加することを提案しています。これにより、複数の重みとスタイルの問題を回避できます。
<link href="http://fonts.googleapis.com/css?family=Droid+Serif:400,400italic,700,700italic" rel="stylesheet" type="text/css">
<!--[if IE]>
<link href="http://fonts.googleapis.com/css?family=Droid+Serif" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Droid+Serif:400italic" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Droid+Serif:700" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Droid+Serif:700italic" rel="stylesheet" type="text/css">
<![endif]-->
したがって、CSSで実際のフォント名を気にせずに使用font-weightしたい場合はfont-style、web-fontジェネレーターに依存せず、@font-face宣言を自分で正しく設定してください。古いブラウザーでは問題が発生することに注意してください。
デスクトップフォント
を使用して埋め込まれていないフォントを宣言する@font-faceと、ユーザーのコンピューターにインストールされているフォントのみが使用されます。これらはfont-weight、font-styleスタイルとスタイルを尊重し、正しいフォントをロードする必要があります（ChromeとOS XのFirefoxでのすべてのテストは期待どおりに機能します）。 —実際には何も制御できないもの。