3

通常のテキスト用に 1 つのフォントを使用し、コード用に別のフォントを使用する Web ページを作成しているので、次の CSS があります。

body {
    font-family:Verdana, sans-serif;
    font-size:100%;
}

code, pre {
    font-family:Consolas, monospace;
}

これは、Consolas のテキストが Verdana のテキストよりかなり小さいことを除けば機能します。font-size:1.2em;設定に追加することである程度修正できますがcode, pre、特に数値は試行錯誤以外から導き出されたものではないため、ハックのように感じます.

これは、関連する特定のフォントの癖であるということですか、それとも何か間違ったことをしていますか?

4

4 に答える 4

4

残念ながら、これは Consolas の x-height が Verdana よりも小さいためです。より大きなフォント サイズを使用することで実際に「修正」することはできますが、ユーザーが Consolas を持っていない場合、ページはデフォルトのモノスペース フォントにフォールバックし、大きすぎるように表示されます。

適切な解決策は、CSS3 の にありますfont-size-adjust。残念ながら、まったくサポートされていません。私の知る限り、それをサポートする唯一の主流ブラウザは Firefox です。

于 2012-05-04T13:56:59.607 に答える
2

CSS で font-size を定義すると、em 単位を使用していなくても、「em 正方形」または「em ボックス」として知られる概念を定義することになります。

金属プレス印刷の時代には、各文字が独自の金属「ボックス」に入れられ、従来の書体では、大文字のラテン M が通常、ボックス全体の幅を埋め、家族全体のサイズを定義していたため、em 正方形の名前が付けられました。 . したがって、emボックス。元の em ボックスは M の幅によって定義されていましたが、em 単位自体は文字の最大許容高さを指します。これは、大文字の M 用に作成されたボックスの結果です。

つまり、フォント ファミリのすべての文字が em ボックス内に収まる必要がありますが、全体を占める必要はありません。したがって、特定の幅で em ボックスを設定する場合、文字を配置するための最大許容スペースを定義するだけです。そこから、書体デザイナーのカーニング、ジオメトリ、比率などの選択によって、どのように決定されるかが決まります。そのボックスの多くは、レタリングが占めることになります。これが、文字を同じように見せるために 2 つの異なるフォント サイズを使用する必要がある理由です。

于 2012-05-04T14:12:40.253 に答える
1

フォントサイズは同じです。しかし、Verdana では、文字は一般に、ほとんどのフォントよりも高くなっています (同じサイズで)。たとえば、Verdana の「H」は、Consolas の「H」よりも背が高くなります。これはフォントのデザインの問題です。

解決策は、一致するフォントを使用することです。どうしても Verdana をテキストのコピーに使用したい場合は、等幅フォントとして Lucida Console がおそらく最適です。Consolas をモノスペース フォントとして使用する場合 (問題ありません!)、Cambria (セリフ フォント) や Calibri または Candara (サンセリフ フォント) など、別の「C フォント」をコピー テキストに使用してください。

ここでは (私がテストしたブラウザーでは) フォント サイズは同じですが、ブラウザーはfont-size: 90%oncodeやpreその他の要素などを適用することが多いため、確認することをお勧めします。これが発生する条件はいくぶんあいまいであり、フォント ファミリをジェネリック以外のものに明示的に設定monospaceすると、最新のブラウザでそれが防止されるようです。しかし、それでも設定するのは有用な予防策です

pre, code, samp, kbd, tt { font-size: 100%; }
于 2012-05-04T16:59:12.837 に答える
0

フォント

最初の行は Verdana で、2 番目の行は Consolas です。どちらも12pt。Consolas はわずかに短いですが、20% の差ほどではありません。em フォント サイズは累積的であるため、pre の親要素を確認してください。たとえば、body が 0.9em で pre が 0.9em の場合、結果は 12pt * 0.9 * 0.9 = 9.72pt になります。

高さだけを一致させようとして幅を無視する場合、1.16em はほぼ正しいように見えます。これは実際にはフォントの癖であり、何も悪いことをしていません。

編集

あなたは何も悪いことをしていないように見えます=)左はフィドラーから、右はワードパッドからです

ここに画像の説明を入力

于 2012-05-04T13:51:57.623 に答える