css font-weight原理_html/css_WEB-ITnose-htmlチュートリアル-php.cn

ホームページ

ウェブフロントエンド

htmlチュートリアル

css font-weight原理_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:43 AM

なぜ記録する必要があるのですか?今日は文字を太字に設定して 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

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

HTMLを超えて：Web開発のための重要なテクノロジーApr 26, 2025 am 12:04 AM

強力な機能と優れたユーザーエクスペリエンスを備えたWebサイトを構築するには、HTMLだけでは十分ではありません。次のテクノロジーも必要です。JavaScriptは、Webページに動的とインタラクティブ性を与え、リアルタイムの変更がDOMを操作することで達成されます。 CSSは、美学とユーザーエクスペリエンスを向上させるために、Webページのスタイルとレイアウトを担当しています。 React、Vue.JS、Angularなどの最新のフレームワークとライブラリは、開発効率とコード組織構造を改善します。

HTMLのブール属性とは何ですか？いくつかの例を挙げてください。Apr 25, 2025 am 12:01 AM

ブール属性は、値なしでアクティブ化されるHTMLの特別な属性です。 1.ブール属性は、無効化された入力ボックスを無効にするなど、存在するかどうかによって、要素の動作を制御します。 2.彼らの実用的な原則は、ブラウザが異なっているときに属性の存在に応じて要素の動作を変更することです。 3.基本的な使用法は、属性を直接追加することであり、高度な使用法はJavaScriptを介して動的に制御できます。 4.一般的な間違いは、値を設定する必要があると誤って考えており、正しい執筆方法は簡潔にする必要があります。 5.ベストプラクティスは、コードを簡潔に保ち、ブールのプロパティを合理的に使用して、Webページのパフォーマンスとユーザーエクスペリエンスを最適化することです。

HTMLコードをどのように検証できますか？Apr 24, 2025 am 12:04 AM

HTMLコードは、オンラインバリデーター、統合ツール、自動化されたプロセスを使用するとクリーンになります。 1）w3cmarkupvalidationserviceを使用して、HTMLコードをオンラインで確認します。 2）リアルタイム検証のためにVisualStudiocodeにhtmlhint拡張機能をインストールして構成します。 3）HTMLTIDYを使用して、建設プロセスでHTMLファイルを自動的に検証およびクリーニングします。

HTML対CSSおよびJavaScript：Webテクノロジーの比較Apr 23, 2025 am 12:05 AM

HTML、CSS、およびJavaScriptは、最新のWebページを構築するためのコアテクノロジーです。1。HTMLはWebページ構造を定義します。2。CSSはWebページの外観に責任があります。

マークアップ言語としてのHTML：その機能と目的Apr 22, 2025 am 12:02 AM

HTMLの機能は、Webページの構造とコンテンツを定義することであり、その目的は、情報を表示するための標準化された方法を提供することです。 1）HTMLは、タイトルやパラグラフなどのタグや属性を使用して、Webページのさまざまな部分を整理しています。 2）コンテンツとパフォーマンスの分離をサポートし、メンテナンス効率を向上させます。 3）HTMLは拡張可能であり、カスタムタグがSEOを強化できるようにします。

HTML、CSS、およびJavaScriptの未来：Web開発動向Apr 19, 2025 am 12:02 AM

HTMLの将来の傾向はセマンティクスとWebコンポーネントであり、CSSの将来の傾向はCSS-in-JSとCSShoudiniであり、JavaScriptの将来の傾向はWebAssemblyとServerLessです。 1。HTMLセマンティクスはアクセシビリティとSEO効果を改善し、Webコンポーネントは開発効率を向上させますが、ブラウザの互換性に注意を払う必要があります。 2。CSS-in-JSは、スタイル管理の柔軟性を高めますが、ファイルサイズを増やす可能性があります。 CSShoudiniは、CSSレンダリングの直接操作を可能にします。 3. Webassemblyブラウザーアプリケーションのパフォーマンスを最適化しますが、急な学習曲線があり、サーバーレスは開発を簡素化しますが、コールドスタートの問題の最適化が必要です。

HTML：構造、CSS：スタイル、JavaScript：動作Apr 18, 2025 am 12:09 AM

Web開発におけるHTML、CSS、およびJavaScriptの役割は次のとおりです。1。HTMLは、Webページ構造を定義し、2。CSSはWebページスタイルを制御し、3。JavaScriptは動的な動作を追加します。一緒に、彼らは最新のウェブサイトのフレームワーク、美学、および相互作用を構築します。

HTMLの未来：ウェブデザインの進化とトレンドApr 17, 2025 am 12:12 AM

HTMLの将来は、無限の可能性に満ちています。 1）新機能と標準には、より多くのセマンティックタグとWebComponentsの人気が含まれます。 2）Webデザインのトレンドは、レスポンシブでアクセス可能なデザインに向けて発展し続けます。 3）パフォーマンスの最適化により、応答性の高い画像読み込みと怠zyなロードテクノロジーを通じてユーザーエクスペリエンスが向上します。

See all articles