Noto Sans JPを使用したサンプル(One value)

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap" rel="stylesheet">
<ul>
  <li class="fw100">サンプルのNoto Sans JP</li>
  <li class="fw200">サンプルのNoto Sans JP</li>
  <li class="fw300">サンプルのNoto Sans JP</li>
  <li class="fw400">サンプルのNoto Sans JP</li>
  <li class="fw500">サンプルのNoto Sans JP</li>
  <li class="fw600">サンプルのNoto Sans JP</li>
  <li class="fw700">サンプルのNoto Sans JP</li>
  <li class="fw800">サンプルのNoto Sans JP</li>
  <li class="fw900">サンプルのNoto Sans JP</li>
</ul>

ul {
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-size: 26px;
}

.fw100 {
  font-weight: 100;
}

.fw200 {
  font-weight: 200;
}

.fw300 {
  font-weight: 300;
}

.fw400 {
  font-weight: 400;
}

.fw500 {
  font-weight: 500;
}

.fw600 {
  font-weight: 600;
}

.fw700 {
  font-weight: 700;
}

.fw800 {
  font-weight: 800;
}

.fw900 {
  font-weight: 900;
}

元記事を表示する