パーツ番号 02-03-11 ・ CSSのみ

フォントウェイト比較見本

300から800まで太さ違いの同じテキストを並べた静止見本です。WordPressテーマのウェイト設計や見出し・本文の太さ選定基準として使えます。

staticcss

プレビュー

ソースコード

HTML

<div class="d02-03-11-wrap">
          <span class="d02-03-11-row" style="font-weight:300">Light 300</span>
          <span class="d02-03-11-row" style="font-weight:400">Regular 400</span>
          <span class="d02-03-11-row" style="font-weight:500">Medium 500</span>
          <span class="d02-03-11-row" style="font-weight:700">Bold 700</span>
          <span class="d02-03-11-row" style="font-weight:800">Black 800</span>
        </div>

CSS

.d02-03-11{background:#fff;text-align:left}
        .d02-03-11-wrap{display:flex;flex-direction:column;gap:10px;font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans",sans-serif;color:#0f172a}
        .d02-03-11-row{font-size:16px;line-height:1.3}

クラス名 .d02-03-11 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。