Javascriptはタグで子要素を取得します

| | | | | | | | | | | | | | | | | | | | | | | |

CSSの太字のテキスト効果を作成するには、font-weightプロパティを使用する必要があります。 font-weightプロパティは、フォントの「太さ」、つまりそのフォントがどの程度太字で表示されるかを決定します。キーワードまたは数値を使用して、テキストの太さをCSSに指示できます。

開発者として、Webサイトを設計するときに、何かに注意を向けたい場合があります。 。これを行うにはいくつかの方法があります。最も簡単な方法は、強調表示するテキストの文字の太さを増やすことです。これは、テキストを太字で表示することを意味します。

この記事では、ウェイトフォントとその定義方法について説明し、プロパティのさまざまな可能な値の図を示します。

CSS Fat:ガイド

font-weightプロパティセットは、画面に太字のテキストを表示する方法です。単語-キーまたは数値を使用して、テキストを一緒に表示する太字をCSSに指示できます

CSSfont-weightプロパティの構文は次のとおりです。

weightOfFont値は、スタイルが適用される要素に使用するフォントの太さです。

font-weightプロパティは、いくつかの異なるフォントを受け入れます。特定の要素に設定するフォントの太さに応じて、値を指定します。

CSSスケール太字

フォントファミリは、100〜1000スケール太字であると考えてください。数値が大きいほど、文字は太字になります

お気に入りのフォントファミリについて調査してください。これにより、サイトで必要なだけ結果が明るくまたは大胆になることを確認できます。一部のフォントファミリはフルスケールを使用しません。

次のコードは、フォント「Arial」と呼ばれる人気のあるフォント「Arial」が数字と単語を使用してどれだけ明るく、どれだけ暗くなるかを示しています-キー:

より大胆に、より明確に:実際にはどういう意味ですか?

ここで指摘する必要がある主なことは、軽くて大胆なのは直訳ではないということです。太字は「太字より太字」を意味しません

より太く、より明確につまり、このコンテキストでは、親要素との関係でそれらがどれほど大胆であるか、またはどれほど明確であるかを意味します。したがって、より大胆な子要素を実行すると、親よりも相対的なフォントが暗くなります。同じことが明るいものにも当てはまります。

相対的な文字の重みは次のとおりです。

相対的な文字の重み< td>実際のフォントの太さ薄い 100 通常td> < td> 400 太字 700 重い 900

したがって、weight font:boldプロパティを使用してthを設定できますeテキストの段落のフォントを800にウェイト付けします。子供が親の相対的なウェイトを太くする場合は、上の表を使用して、彼の太さを理解してください。

たとえば、私に子供がいるとします。には、フォントの太さ400の親があります。太字の子にfont-weight値を設定すると、子の太さのフォントは700になります。

これは、子が比較して暗いフォントであるためです。親よりも重みを付けます。親がすでにできるだけ暗いまたは明るい場合、これらのプロパティ値は何もしません。

CSSフォントの太さの例

ウェブサイトをデザインしているとしましょう。地元の切手会社であるシアトル切手クラブのために。私たちが依頼した切手会社Whoare --we は、彼らのウェブサイトに太字で表示されています。 A About これにより、訪問者の注意をタイトルに引き付けることができます。

スタンプクラブから、クラブの歴史を記載したテキストのブロックをWebサイトに追加するように依頼されました。このテキストブロックは、通常のフォントの太さで表示されます。クラブが視聴者の注意を引きたいいくつかのフレーズは太字で表示する必要があります

次のコードを使用して、いくつかの推奨フレーズを使用して、このテキストのブロックを作成できます。

クリックスタイルコードを実行 button 上記のコードエディタで、HTML/CSSコードの出力を確認します。

HTMLファイルで、

のテキストで囲まれた段落を定義しました。 。タグにもいくつかの文が含まれています。 CSSで推奨するタグ

次に、CSSファイルで、各<のフォントスタイルの重みを定義するスタイルルールを定義しました。 / a> タグ太字。これは、タグで囲まれたテキストが親要素よりも太字で表示されることを意味します。

コードを実行すると、段落は通常のフォント幅で表示され、タグで囲まれた文は太字で表示されます。 。この例では、式は全員を歓迎しますおよび250人のメンバータグで囲まれています。

可変文字を含む太字のcssテキスト

最新レベルのCSSフォントによって利用できるようになった新しいフォントがいくつかあります。これらは可変文字と呼ばれ、文字幅として1〜1000の数字を取ることができます。ブラウザのサポートは2020年5月まで完全に実装されていなかったため、まったく新しいものです。可変フォントの詳細については、この rel = "noopener">l`の紹介をご覧ください。< / p>

結論

このチュートリアルでは、 CSS font -weightプロパティと、それがフォントの太字にどのように影響するか。

太字と軽量は、親要素のフォントの太さから離れた相対的なフォントの太さを意味することを学びました。基本的に、テキストがどのように見えるかを確認するための文字の重みの範囲。すぐにプロフォントの均等化が可能になります

CSSでのコーディングの詳細については、CSSの学習方法に関するガイドをご覧ください。 CSSに依存せずにテキストを太字にしたい場合は、HTMLで太字のテキストを作成する方法。