css - どのように機能しますかcssfont-weight値？

Question

フォントの太さの値がわかりません。太字、通常、または600以上に変更すると、フォントも変更されます。ただし、100から500に変更しても、何も変更されません。なぜこれらの値があるのですか？

Answer 1

100 から 900 までのfont-weight値は、フォントの異なる太さの書体をデザインする印刷上の実践を反映しています。これらすべての太さを持つフォントはほとんどありませんが、使用されるさまざまな太さを多かれ少なかれカバーするようにスケールが選択されています。CSS3 フォント ドラフトでは、数字と、Thin、Extra Light などの従来のタイポグラフィ用語との対応について説明していますが、用語は実際にはさまざまです。

タイポグラフィでは、各ウェイトはタイポグラファーによってデザインされた個別の書体です。これが、ほとんどのフォントのウエイトが 2 つ、または 1 つしかない理由の 1 つです。書体のデザインには時間がかかり、時は金なりです。Web で使用されるフォントに特に当てはまるもう 1 つの理由は、表示デバイスがかなり粗く、細かいタイポグラフィがしばしば無意味な試みになっていることです。特に、フォントの高さが小さいと、低解像度のデバイスではうまく機能しません。

CSS 仕様では、宣言されたフォントの重みを使用可能な重みにマッピングするためのアルゴリズムが定義されています。たとえば、ウェイト 400 と 700 しか使用できない場合 (通常の状況)、ウェイト 100、200、および 300 は 400 にマッピングされます。

ただし、場合によっては、ブラウザがアルゴリズムによってグリフを太字にします。これは解決策というよりも問題であり、ブラウザの違いにより、存在しない重みを要求すると奇妙なことが起こる可能性があります。ほとんどのブラウザーは、600 以上のウェイトが要求され、フォントが通常 (400) の書体しかない場合、アルゴリズムによる太字を使用しているようです。たとえば、font-weight: boldテキストが Arial Unicode MS (太字の書体がない) の場合に設定すると、人為的に太字の Arial Unicode MS が作成されます。

一般的に入手可能なフォントには、追加の問題があります。font-family: Arial Black論理設定の代わりに、書体名をフォント名のように使用する必要がある場合がありますfont-family: Arial; font-weight: 900。一部のブラウザでは論理的な方法しか機能しないため、これが機能しない場合があります。

原則として、フォントの太さの問題を制御できる経由でダウンロード可能なフォント (Web フォント) を使用しない限り、標準および太字以外の太さを使用しようとしないでください。@font-faceダウンロード可能なフォントとして使用できるほとんどのフォントには、基本的な 2 つまたは 1 つだけのウェイトが含まれていますが、複数のウェイトを持つ興味深いフリー フォントもあります。

Answer 2

font-weightブラウザに表示させたいフォントの太さを設定します。通常、同じフォントの太さの違いは実際には別のフォントであり (Arial対を考えてArial Blackください)、ブラウザはより太字のフォント ファミリーを別のフォント ファミリーに置き換えることさえあります。また、ブラウザーはすべてのフォントをすべての太さで使用できるようにする必要はないため、一部のfont-family/font-weightの組み合わせは効果がない場合があります。

ブラウザーと CSS は組版システムではありません。要求したスタイルが指定したとおりにレンダリングされる保証はありません。フォントをより細かく制御したい場合は、@font-face宣言の使用を検討してください。

Answer 3

基本的に、指定された font-weight のフォントが存在しない場合は、使用可能な最も近い font-weight に置き換えられます。そのため、変更が表示されません。

400 が通常で 700 が太字であることに注意してください。また、ほとんどの Web フォントにはそれ以上のフォントの重みがないことに注意してください。そのため、95% の確率で、CSS で font-weight を指定するために「bold」と「normal」を使用できます。