31

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;どうすればそれを達成できますか？

4

3 に答える 3

50 
@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/

于 2012-04-06T16:33:25.583 に答える
18

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

1-@font-face構文：

すべてのブラウザでフォントを使用するには、構文が非常に重要です。Paul Irishは、多くのリソースを使用して、上記のように「防弾構文」を作成しました。これは、数回改善されました。

@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/、「Fontspring @ font-face構文」を探してください）は最新のものであり、、、から動作しIE6ます。リンクを見て、なぜそのように書く必要があるのか​​をよく理解することが重要です。iOSAndroid

font-weight2-およびのようなフォントプロパティfont-style

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

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

「防弾構文」を使用して、 「通常」、「太字」、「斜体」のバリエーションをロードすると仮定すると、次のようになります。

@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ます。そうしないと、ブラウザはデフォルトでこのルールを持つ要素に「fauxbold/italic」を適用する場合があります。'faux'スタイリングは、すでにイタリックまたはボールドフォントを使用している場合でも、要素を強制的に表示するように機能します。の問題は、フォントが見た目どおりではないため、フォントが常に見苦しく見えることです。

同じことが、たとえば要素に「通常」フォントを定義し、その中にまたはを配置した場合にも発生します。およびは、フォント上で太字/斜体のプロセスを強制します。これを回避するには、それぞれのプロパティ（および）を次のように設定して、およびのルールに正しい、目的の太字/斜体を適用する必要があります。<p><strong><em><strong><em>font-family<strong><em>font-weightfont-stylenormal

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）。しかし、 「フェイクボールド/イタリック」を含む多くの問題が発生し<strong>、右に宣言する必要があります。font-familyまた、の場合は<em>、で異なるclassesのバリエーションをスタイルします。私が選んだ2つは仕事をするのに十分だと思います。fontweight

出典： 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つの小さなファイルですばやく提供し、他のルールを別のCSSファイルで<body>タグの終わりに配信するように処理できます。

于 2014-02-06T21:34:18.607 に答える
2

たとえばライトバージョンなど、font-weightプロパティに数値を追加できます。

font-weight: normal; //  light version as it is.
font-weight: 700; // makes light version bolder.
于 2012-04-06T16:22:52.320 に答える