css font-weight原理_html/css_WEB-ITnose
なぜ記録する必要があるのですか?今日は文字を太字に設定して font-weight:200 を使用したいのですが、効果がありません。今となっては400がノーマル相当ですが、不思議なことに200は薄くなりません。したがって、フォントの太さの動作原理、次のテキストを研究する必要があります。
1. 使い方の紹介font-weight はテキストの太さを設定します。テキストの太さの設定は比較的複雑なフォント スタイルの定義です。これは、フォント自体の太さが刻々と変化するためです。特定のフォントの太さの定義も統一されていません。
属性値: 太字 | 太字 | 300 | 600 |デフォルト値:
font-weight 属性値を設定するには 3 つの方法があります:
最初の方法: キーワード方法:
キーワードは 2 つあり、normal [デフォルト値、標準文字を定義] と、bold [太字文字を定義] です。
2 番目: 相対的な太さの値の方法:
相対的な太さにもキーワードによって定義されます。太字 [より太い文字を定義] と、より軽い [より細い文字を定義] の 2 つがありますが、その太さは の継承値に関して相対的です。親要素。 「Bolder」はフォント セット内で利用可能な次に太いフォントと一致し、逆に「Lighter」は同じことを行い、次に細いフォントと一致します。それらの参照系はすべて継承された値であるため、厚さは継承された値に相対します。
特定の状況については、下の図を参照してください:
3 番目のタイプ: 「100」から「900」までの 9 つの数字のシーケンス。
これらの数値は、最も薄い (100) から最も厚い (900) までのフォントのウェイトを表します。
値 400 は標準に相当し、
値 700 は太字に相当します。
2. 例コード: Times New Roman 効果
<html><head><meta charset="utf-8"/><title>CSS Demo</title><style>body,table,tr,td { font-family: "Times New Roman", Times;font-size: 18pt; }table { border-collapse: collapse; }</style></head><body><table border="1px" cellpadding="5px"><tr><th>关键字</th><th>效果</th></tr><tr style="font-weight: normal;"><td>normal</td><td>The quick brown fox jumps over a lazy dog.</td></tr><tr style="font-weight: bold;"><td>bold</td><td>The quick brown fox jumps over a lazy dog.</td></tr><tr style="font-weight: bolder;"><td>bolder</td><td>The quick brown fox jumps over a lazy dog.</td></tr><tr style="font-weight: lighter;"><td>lighter</td><td>The quick brown fox jumps over a lazy dog.</td></tr><tr style="font-weight: 100;"><td>100</td><td>The quick brown fox jumps over a lazy dog.</td></tr><tr style="font-weight: 200;"><td>200</td><td>The quick brown fox jumps over a lazy dog.</td></tr><tr style="font-weight: 300;"><td>300</td><td>The quick brown fox jumps over a lazy dog.</td></tr><tr style="font-weight: 400;"><td>400</td><td>The quick brown fox jumps over a lazy dog.</td></tr><tr style="font-weight: 500;"><td>500</td><td>The quick brown fox jumps over a lazy dog.</td></tr><tr style="font-weight: 600;"><td>600</td><td>The quick brown fox jumps over a lazy dog.</td></tr><tr style="font-weight: 700;"><td>700</td><td>The quick brown fox jumps over a lazy dog.</td></tr><tr style="font-weight: 800;"><td>800</td><td>The quick brown fox jumps over a lazy dog.</td></tr><tr style="font-weight: 900;"><td>900</td><td>The quick brown fox jumps over a lazy dog.</td></tr></table></body></html>
3. 原理
1. 関連名の説明
OpenType: Post を使用する、スケーラブル フォント (スケーラブル フォント) のコンピューター フォント タイプです。スクリプトFormatは、米国MicrosoftとAdobeが共同開発したTrueTypeフォントに代わる新しいフォントです。このタイプのフォントのファイル拡張子は .otf、.ttf、.ttc、タイプ コードは OTTO、現在の標準は OpenType1.6 です。
2. 動作原理: ユーザーエージェントはフォントの変形の太さをどのように決定するのでしょうか?
フォントの太さは、100 から 900 までの 9 つのレベルに分けられます。これらの数値キーワードは、フォントの関連特性とのマッピング関係を定義するために使用されます。つまり、フォントの太さは 9 つのレベルに分けられます。たとえば、OpenType は 9 値の数値レベルを使用します。数値はさまざまなレベルに直接マッピングされ、100 は最も軽いフォントの歪みにマッピングされ、900 は最も重いフォントの歪みにマッピングされます。実際、これらの数値には固有のフォントの太さの規則はありません。 CSS は 1 つの点だけを強調しています:
各数字に対応するフォントの太さは、その前の数字に対応するフォントの太さよりも小さくてはなりません。つまり、各数値に対応する太字のフォントは、少なくとも次に小さい数値と同じくらい細く、少なくとも前の最大の数値と同じ太さでなければなりません。 上記の問題が発生します: 100、200、300、400 はすべて同じ太さのフォント変形に対応する可能性がありますが、500 と 600 はより太いフォント変形に対応する可能性があり、700、800、900 は別のより太いフォント変形に対応する可能性があります。 。
3. キーワードと値の対応
400はnormal、700はboldに相当、その他の数値はfont-weight属性のキーワードに対応しませんが、通常のフォント変形名に対応できます。
フォント バリアントに「Normal」、「レギュラー」、「Roman」、または「Book」のタグが付いている場合、そのフォント バリアントには 400 が割り当てられ、「Medium」のタグが付いているフォント バリアントは 500 に対応します。ただし、フォント バリアントに「使用できるフォントが「Medium」のみの場合、500には対応できません。
MDN と W3C での対応関係は以下の通りです:
100Thin (Hairline)、200Extra Light (Ultra Light)、300Light、400Normal、500Medium、600Semi Bold (Demi Bold)、700Bold、800Extra Bold (Ultra Bold)、 900Black (Heavy)
4. フォント ファミリが 9 未満の場合にギャップを埋める方法
特定のフォント ファミリのフォント ウェイト ベースが 9 未満の場合、ユーザー エージェントはさらに多くの作業を行う必要があります。この場合、不足しているギャップを埋めるために事前定義された方法が使用されます。
欠落部分を埋める方法:
font-weight を参照してください。
500 が欠落: 400 と同じ。
600|700|800|900 のいずれかの値が欠落している場合、それは次のレベルの太い値と同じです。そうでない場合は、次に小さい値と同じになります。
例: フォントに「500」と「900」が欠落している場合、フォントの 9 レベルのウェイト値は「100、200、300、400、400、600、700、800、 800」。
300|200|100 の値が欠落しています。これは、次のレベルのより細かい値と同じです。そうでない場合は、次に太い値と同じになります。
画像、灰色は値がないことを意味するため、隣接する値が使用されます。
フォントのウェイト値は400、700、900です
フォントのウェイト値は300と600です
通常、デザイナーは記事内で 3 レベルを超える太さを定義することはなく、デザイン時に太さをジャンプする必要があります。そうしないと、太字のコンテンツが強調表示されません。
4. リソースリンクBaidu Encyclopedia font-weight
http://baike.baidu.com/item/font-weight
w3c font-weight
http://dev.w3.org/csswg/css- fonts-3/#font-weight-prop

ホットAIツール

Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。

Undress AI Tool
脱衣画像を無料で

Clothoff.io
AI衣類リムーバー

AI Hentai Generator
AIヘンタイを無料で生成します。

人気の記事

ホットツール

メモ帳++7.3.1
使いやすく無料のコードエディター

SublimeText3 中国語版
中国語版、とても使いやすい

ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境

ドリームウィーバー CS6
ビジュアル Web 開発ツール

SublimeText3 Mac版
神レベルのコード編集ソフト(SublimeText3)

ホットトピック











公式アカウントのWebページはキャッシュを更新します。これはシンプルでシンプルで、ポットを飲むのに十分な複雑です。あなたは公式のアカウントの記事を更新するために一生懸命働きましたが、ユーザーはまだ古いバージョンを開くことができますか?この記事では、この背後にあるtwist余曲折と、この問題を優雅に解決する方法を見てみましょう。それを読んだ後、さまざまなキャッシュの問題に簡単に対処でき、ユーザーが常に新鮮なコンテンツを体験できるようになります。最初に基本について話しましょう。それを率直に言うと、アクセス速度を向上させるために、ブラウザまたはサーバーはいくつかの静的リソース(写真、CSS、JSなど)やページコンテンツを保存します。次回アクセスするときは、もう一度ダウンロードすることなく、キャッシュから直接検索できます。自然に高速です。しかし、このことは両刃の剣でもあります。新しいバージョンはオンラインです、

この記事では、ブラウザのユーザー入力を直接検証するために、必要、パターン、MIN、MAX、および長さの制限などのHTML5フォーム検証属性を使用して説明します。

記事では、HTML5クロスブラウザーの互換性を確保するためのベストプラクティスについて説明し、機能検出、プログレッシブエンハンスメント、およびテスト方法に焦点を当てています。

この記事では、CSSを使用したWebページへの効率的なPNG境界追加を示しています。 CSSはJavaScriptやライブラリと比較して優れたパフォーマンスを提供し、微妙または顕著な効果のために境界幅、スタイル、色を調整する方法を詳述していると主張しています

この記事では、HTML&lt; Datalist&GT;について説明します。オートコンプリートの提案を提供し、ユーザーエクスペリエンスの改善、エラーの削減によりフォームを強化する要素。

この記事では、HTML&lt; Progress&gt;について説明します。要素、その目的、スタイリング、および&lt; meter&gt;との違い要素。主な焦点は、&lt; Progress&gt;を使用することです。タスクの完了と&lt; Meter&gt; statiの場合

この記事では、html5&lt; time&gt;について説明します。セマンティックデート/時刻表現の要素。 人間の読み取り可能なテキストとともに、マシンの読みやすさ(ISO 8601形式)のDateTime属性の重要性を強調し、Accessibilitを増やします

この記事では、html&lt; meter&gt;について説明します。要素は、範囲内でスカラーまたは分数値を表示するために使用され、Web開発におけるその一般的なアプリケーション。それは差別化&lt; Meter&gt; &lt; Progress&gt;およびex
