11

これは、さまざまなフォント バリアントをサポートするための @font-face 宣言です。この場合は、私のフォントの太字バージョンと太字バージョンです。

@font-face {
  font-family: "santana";
  src: url("data:font/ttf;base64,AAEAAAALAI....") format('truetype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "santana";
  src: url("data:font/ttf;base64,AAEAAAALAI....") format('truetype');
  font-weight: bold;
}
@font-face {
  font-family: "santana";
  src: url("data:font/ttf;base64,AAEAAAALAI....") format('truetype');
  font-weight: bolder;
}

現在、私は Chrome と Firefox を使用しています。Chrome では、通常のバリアントと太字のバリアントは機能しますが、より太字のバリアントは機能しません (「太字」のものを保持します)。Firefox では太字のバリアントのみが期待どおりに機能し、それ以外の場合は太字のバリアントが使用されます (通常の太さの場合でも)。
これは既知の問題ですか、それともこの宣言を行うためのより良い方法はありますか?

4

2 に答える 2

12

ここには2つの別々の問題があります。

  1. 数値ではなくfont-weightキーワードの使用。
  2. 必要に応じて、IE8（およびそれ以前のバージョン）をサポートします。

キーワード

font-weightキーワードを使用する場合の問題は、とがlighterandbolderのような絶対値ではなく（それぞれ常に400と700）、親要素の確立された太さ（100明るいまたは暗い）に関連していることです。絶対値であるかのように扱うことができない場合があります。normalboldlighterbolder

@HTMLDeveloperと@Christophが提案したように、キーワードではなく数値を使用することはこれに対する簡単な解決策であり、それ自体で適切な解決策になる可能性があります（IE8のサポートが必要ない場合）。

@font-face {
  font-family: "santana";
  src: url("data:font/ttf;base64,AAEAAAALAI....") format('truetype');
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "santana";
  src: url("data:font/ttf;base64,AAEAAAALAI....") format('truetype');
  font-weight: 700;
}
@font-face {
  font-family: "santana";
  src: url("data:font/ttf;base64,AAEAAAALAI....") format('truetype');
  font-weight: 900;    /* or whatever weight you need to use for "bolder" */
}

IE8以前

font-family一部のブラウザでは、複数のウェイトまたはスタイルが同じ名前に関連付けられている場合に表示の問題が発生します。

私が知っている特定の問題:(他にもあるかもしれません）

  • 複数のウェイトがフォントファミリ名にリンクされている場合、IE8には表示の問題があります。
  • 4つを超えるウェイトまたはスタイルがフォントファミリ名にリンクされている場合、IE6/7/8には表示の問題があります。

font-family解決策は、フォントのバリエーションごとに一意の名前を使用することです。

@font-face {
  font-family: "santana";
  src: url("data:font/ttf;base64,AAEAAAALAI....") format('truetype');
}
@font-face {
  font-family: "santana-bold";
  src: url("data:font/ttf;base64,AAEAAAALAI....") format('truetype');
}
@font-face {
  font-family: "santana-bolder";
  src: url("data:font/ttf;base64,AAEAAAALAI....") format('truetype');
}

このアプローチは、Typekitなどのフォントサービスで一般的に使用されています。多種多様なブラウザ（または少なくともIE8）のサポートが必要な場合、これはフォントを埋め込むときに支払う必要のある価格の1つと見なすことができます。

于 2013-03-11T15:47:31.773 に答える
3

font-face シングル フォントでは、フォント ファミリ名の引用符は必要ありません。削除して実行する必要があります。正常に動作します。font-family: santana; font-weight: 900;単一のフォントは必要ありません。必要なのは複数のフォントだけです。より大胆に数値を使用する代わりに、正常に機能するはずです。

于 2013-03-11T15:58:12.127 に答える