web-dev-qa-db-ja.com

font-weightをfont-faceフォントで使用するにはどうすればよいですか？

私はFONT-lightとFONT-boldのような2つのフォントファイルを持っています。どちらも@ font-faceキットから提供されているため、各バージョンには5つのフォントファイル（OGV、TTF、WOFF、EOT）が含まれています。

ライトバージョンからボールドバージョンに移行するには、font-family: FONT-light;、次にfont-family: FONT-bold;を使用する必要があります。 CSS3への遷移が必要なため、代わりにfont-weight: light;とfont-weight: bold;を使用します。どうすればそれを達成できますか？

cssfontsfont-face
27
Atadj
@font-face {
    font-family: 'DroidSerif';
    src: url('DroidSerif-Regular-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'DroidSerif';
    src: url('DroidSerif-Italic-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
}
@font-face {
    font-family: 'DroidSerif';
    src: url('DroidSerif-Bold-webfont.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}
@font-face {
    font-family: 'DroidSerif';
    src: url('DroidSerif-BoldItalic-webfont.ttf') format('truetype');
    font-weight: bold;
    font-style: italic;
}

チュートリアルから： http://www.456bereastreet.com/archive/201012/font-face_tip_define_font-weight_and_font-style_to_keep_your_css_simple/

39
developdaly

埋め込みフォント（font-weight）でfont-styleプロパティと@font-faceプロパティを使用するのは簡単ではありません。あなたが気にする必要があるいくつかのアイテムがあります。

1-@font-face構文：

すべてのブラウザでフォントを使用するには、構文が非常に重要です。上記のように、多くのリソースを備えたポールアイリッシュは 'Bulletproof Syntax'を記述しましたが、これは何度か改善されました。

@font-face {
  font-family: 'FONT-NAME';
  src: url('FONT-NAME.eot?') format('eot'), url('FONT-NAME.woff') format('woff'),     url('FONT-NAME.ttf') format('truetype');
}

このバージョン（ http://www.paulirish.com/2009/bulletproof-font-face-implementation-syntax/ 、を探します 'The Fontspring @ font-face syntax '）は最新で、IE6からiOS、Androidで機能します。リンクを調べて、そのように記述する必要がある理由をよく理解することが重要です。

2-font-weightやfont-styleなどのフォントプロパティ

必要に応じて、font-weight宣言にfont-styleおよび@font-faceを適用して同じフォントのバリエーションを使用できますが、これらの特性について具体的かつ正確である必要があります。それを行うにはいくつかの方法があります。

2.1-各バリエーションに1つのフォントファミリを使用する

'Bulletproof Syntax'を使用して、 'Normal'、 'をロードするとします太字 'と'イタリック 'バリエーション、私たちは持っています：

@font-face {
  font-family: 'FONT-NAME-normal';
  src: url('FONT-NAME-normal.eot?') format('eot'), url('FONT-NAME-normal.woff') format('woff'), url('FONT-NAME-normal.ttf') format('truetype');

  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'FONT-NAME-bold';
  src: url('FONT-NAME-bold.eot?') format('eot'), url('FONT-NAME-bold.woff') format('woff'), url('FONT-NAME-bold.ttf') format('truetype');

  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'FONT-NAME-italic';
  src: url('FONT-NAME-italic.eot?') format('eot'), url('FONT-NAME-italic.woff') format('woff'), url('FONT-NAME-italic.ttf') format('truetype');

  font-weight: normal;
  font-style: normal;
}

したがって、必要なバリエーションを使用するには、それに対応するfont-familyを呼び出し、ルールでfont-weight: normalおよびfont-style: normalを宣言する必要があります。そうしない場合、ブラウザはデフォルトでこのルールを持つ要素に 'faux bold/italic'を適用する場合があります。 'faux'スタイリングは、すでにイタリックフォントまたはボールドフォントを使用している場合でも、要素を強制的に表示します。の問題は、フォントが見た目どおりにならないため、フォントが常に見苦しく見えることです。

たとえば、<p>要素に 'Normal'フォントを定義し、その中に<strong>または<em>を配置すると、同じことが起こります。 <strong>および<em>は、フォントに対して太字/斜体の処理を強制します。これを回避するには、font-familyと<strong>のルールに、それぞれのプロパティ（<em>とfont-weight）をnormalに設定して、太字/斜体の正しいfont-styleをルールに適用する必要があります。

strong {
  font-family: 'FONT-NAME-bold';
  font-weight: normal;
  font-style: normal;
}

em {
  font-family: 'FONT-NAME-italic';
  font-weight: normal;
  font-style: normal;
}

しかし、それには問題があります。フォントが読み込まれない場合、選択したフォールバックはウェイト/スタイルを失います。これは私たちを次の方法に導きます。

2.2-同じフォントファミリ名を使用するが、太さとスタイルが異なる

この方法は、フォントが読み込まれない場合に、いくつかのウェイトとスタイルおよびフォールバックを正しく処理するのがより簡単です。同じ例を使用：

@font-face {
  font-family: 'FONT-NAME';
  src: url('FONT-NAME-normal.eot?') format('eot'), url('FONT-NAME-normal.woff') format('woff'), url('FONT-NAME-normal.ttf') format('truetype');

  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'FONT-NAME';
  src: url('FONT-NAME-bold.eot?') format('eot'), url('FONT-NAME-bold.woff') format('woff'), url('FONT-NAME-bold.ttf') format('truetype');

  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: 'FONT-NAME';
  src: url('FONT-NAME-italic.eot?') format('eot'), url('FONT-NAME-italic.woff') format('woff'), url('FONT-NAME-italic.ttf') format('truetype');

  font-weight: normal;
  font-style: italic;
}

このメソッドでは、@font-face宣言の重みとスタイルが「マーカー」として機能します。ブラウザは、CSSの他の場所でこれらの重みとスタイルを検出すると、アクセスする@font-face宣言と、使用するフォントのバリエーションを認識します。

体重とスタイルが合っているか確認してください。その場合、作成した<strong>を使用している親の内部で<em>または@font-faceを使用すると、正しい宣言がロードされます。

埋め込まれたスタイル設定のこれらのメソッドのソース（ http://coding.smashingmagazine.com/2013/02/14/setting-weights-and-styles-at-font-face-declaration/ ） 、私が述べた2つを組み合わせた別のメソッドがあります（2.1と2.2）。ただし、 'faux bold/italic'などの多くの問題が発生し、<strong>に正しいfont-familyを宣言し、<em>の場合は、classesがfontが異なるweightのバリエーション。私が選んだ2つは、その仕事をするのに十分良いと思います。

出典： http://www.paulirish.com/2009/bulletproof-font-face-implementation-syntax/http://coding.smashingmagazine.com/2013/02/14/setting-weights-and-styles-at-font-face-declaration /

編集1：

多くのフォント拡張機能を使用する必要はありません。 .woffタイプは、IE8（.eot形式のみを受け入れる）のサポートを提供する必要がある場合、IEを除くほとんどすべてのブラウザーに対応しています。 （ http://caniuse.com/#feat=fontface ）

おそらく役に立つ他のヒントは、base64エンコーディングを使用してCSSにフォントを埋め込むことです。これは多くのリクエストを回避するのに役立ちますが、CSSファイルを圧倒することを覚えておく必要があります。これは、CSSコンテンツとフォントを整理して処理し、最初のCSSルールを1つの小さなファイルですばやく提供し、他のファイルを<body>タグの近くで別のCSSファイルに配信できます。

10
Mateus Leon

軽量バージョンなど、font-weightプロパティに数値を追加できます。

font-weight: normal; //  light version as it is.
font-weight: 700; // makes light version bolder.
2
undefined