CSS font-weight値

このツールでできること

• CSS font-weight値では、font-weight の 100〜900、normal、bold、lighter、bolder の対応を太さ名と一緒に確認できます。
• 関連する観点として CSS font-weight値、css font weight、css font weight values を確認し、結果をコピーして別の作業に使えます。

使い方

1. Item 列で 100〜900 の数値または normal、bold、lighter、bolder を探します。
2. Content 列で Thin、Regular/Normal、Bold、Black などの太さ名を確認します。
3. 通常本文なら 400、強調なら 700 という対応を基準にします。
4. 可変フォントを使う場合は、読み込んだ font-weight 範囲が指定値を含むか別途確認します。

入力例・出力例

よくある利用シーン

• デザイントークンの font-weight 名と CSS 数値を対応づけるとき。
• normal と bold がどの数値へ解決されるか素早く確認したいとき。
• Web フォントで読み込む 300、500、700 などのウェイトを選定するとき。
• lighter / bolder の相対指定を使う前に絶対値指定へ置き換える候補を探すとき。

結果確認のポイント

• 生成したCSSや設定値を実際のコンポーネントに入れ、レスポンシブ表示も確認してください。
• CSS font-weight値、css font weight、css font weight valuesの観点で、入力内容と出力内容がずれていないか見直してください。
• コピーした結果を利用先に貼り付けたあと、改行や記号が変わっていないかも確認してください。

注意点

• ブラウザ差や既存CSSとの競合があるため、公開前に対象環境で確認してください。
• 結果を公開・送信する前に、用途に合う形式かを必ず確認してください。

データの扱い / プライバシー

• CSS font-weight値の主要な処理はブラウザ内で実行されます。
• 入力内容を保存するアカウント機能はなく、ページを閉じると作業内容は手元のブラウザから離れます。
• 本番の秘密情報や個人情報を扱う場合は、入力前に必要性を確認してください。

よくある質問

関連ツール