4

line-heightリストのフォールバックフォントから異なるフォントに異なる設定をしたいと思います。例えば：

body {
    font-family: "Small x-height font", "Larger x-height font", sans-serif;
}

推奨されるSmall x-height フォントline-heightを使用する場合は、 1.3に設定したいと思います。優先フォントが利用できないため、より大きな x-height フォントを使用する場合は、 line-height1.5に設定したいと思います。line-height両方のフォントが利用できず、サンセリフ フォールバックが使用されている場合は、 に設定したいと思いnormalます。

JavaScriptに頼らずにCSS 2.1またはCSS 3を使用してこれは可能ですか?

理論的根拠問題は、フォントによって x-height (フォント サイズに対する x などの小文字の高さ) が異なることです。x-height が大きいテキストの見栄えを良くするには、行の高さを大きく設定する必要があります。デフォルトのフォント (上記の例では sans-serif) の x-height は不明であり、選択したフォントの x-height とは大幅に異なる場合があります。そのため、フォントの読み込みに失敗すると、フォントに適した行の高さが見苦しく見える場合があります。

4

3 に答える 3

5

あなたが要求している正確な方法でこれを行う方法があるとは思いません。ただし、フォント サービス (Typekit など) を使用している場合は、フォントが読み込まれているかどうかに応じて、フォールバック フォントのスタイルを設定できる場合があります。

Typekit の場合、フォントの読み込み中、読み込み中、または非アクティブなときに要素にクラスを追加します。また、特定のフォント/太さのクラスも提供します。

その後、状況に応じて特定のスタイルを提供できます。
大まかな例を次に示します。

body {
  font: 400 16px/1.5 "typekit-font", "fallback-font";
}
.wf-inactive body {
  font-weight: normal;
  line-height: 1.8;
}

詳細については、対応するヘルプ記事を参照してください。

于 2012-11-03T21:33:18.800 に答える
1

font-size-adjustCSS3 には、この問題に対処するプロパティがあります。を指定font-size-adjust: 0.6するbodyと、すべてのフォントが x-height 0.6em に透過的にスケーリングされます。これには、元の x-height が異なるフォントを同じ行に組み合わせることができ、フォント サイズを手動で調整しなくてもほぼ同じ小文字サイズになるという追加の利点があります。

Firefoxのみが実装していますfont-size-adjust(2012 年 11 月現在)。WebKitはそうではありません。

詳細についてはCSS3 フォント仕様を参照してください。いくつかの例についてはDavid Baron の投稿を参照してください。

于 2012-11-04T02:41:34.523 に答える
0

CSS では、プロパティの値をフォントの選択に依存させることはできません。基本的に、プロパティは互いに独立していますが、ここでは当てはまらないいくつかの例外があります。

通常、font-familyリスト内のフォントは、一般的な特性が多かれ少なかれ似ている必要があります。それはただのline-height問題ではありません。フォントの選択は、ページ全体に影響します。

別の戦略は、 経由でダウンロード可能なフォントを使用することです@font-face。次に、フォントが使用されることを合理的に確信でき、それに応じて行の高さとその他のプロパティを設定できます。

于 2012-11-03T22:46:05.227 に答える