タイポグラフィ（デザイン）
font-weight
文字の太さを設定します
| value | description | |
|---|---|---|
400 (default) | 通常の太さで表示します | ABC abc いろは 漢字 |
700 | 太字で表示します | ABC abc いろは 漢字 |
Demo
100 | あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら。
200 | あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら。
300 | あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら。
400 | あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら。
500 | あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら。
600 | あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら。
700 | あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら。
800 | あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら。
900 | あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら。
<p class="font-100">100 | あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら。</p>
<p class="font-200">200 | あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら。</p>
<p class="font-300">300 | あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら。</p>
<p class="font-400">400 | あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら。</p>
<p class="font-500">500 | あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら。</p>
<p class="font-600">600 | あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら。</p>
<p class="font-700">700 | あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら。</p>
<p class="font-800">800 | あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら。</p>
<p class="font-900">900 | あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら。</p>
.font-100 {
font-weight: 100;
}
.font-200 {
font-weight: 200;
}
.font-300 {
font-weight: 300;
}
.font-400 {
font-weight: 400;
}
.font-500 {
font-weight: 500;
}
.font-600 {
font-weight: 600;
}
.font-700 {
font-weight: 700;
}
.font-800 {
font-weight: 800;
}
.font-900 {
font-weight: 900;
}
概要
文字の太さを変更します。太さは100~900のx00形式で指定する場合が多いです。また各数字にはそれぞれboldやthinなどのキーワードが対応しており、キーワードでの指定も可能です。
よく利用される値
太さは柔軟に設定可能なものの、基本的には標準（400）と太字（700）の 2 種類のみを利用する場合がほとんどです。