CSS font-weight: 글씨 굵기

pre {
  font-weight: normal;
  /* font-weight: bold; */
  /* font-weight: lighter; */
  /* font-weight: bolder; */
}

pre {
  text-align: center;
}

<pre>
내 그대를 생각함은
항상 그대가 앉아 있는 배경에서
해가 지고 바람이 부는 일처럼 사소한 일 일것이나
언젠가 그대가
한없이 괴로움 속을 헤매일 때에
오랫동안 전해 오던 그 사소함으로
그대를 불러보리라
</pre>

/* 키워드 */
font-weight: normal;
font-weight: bold;

/* 부모 굵기에 상대적인 키워드 */
font-weight: lighter;
font-weight: bolder;

/* 숫자 */
font-weight: 100;
font-weight: 200;
font-weight: 300;
font-weight: 400; /* normal과 같음 */
font-weight: 500;
font-weight: 600;
font-weight: 700; /* bold와 같음 */
font-weight: 800;
font-weight: 900;

/* 전역 값 */
font-weight: inherit;
font-weight: initial;
font-weight: revert;
font-weight: revert-layer;
font-weight: unset;

<header>
  <input type="range" id="weight" name="weight" min="1" max="1000" />
  <label for="weight">굵기</label>
</header>
<div class="container">
  <p class="sample">
    다람쥐 헌 쳇바퀴에 타고파 01234567890 abcdefg
  </p>
</div>

/* https://github.com/orioncactus/pretendard */
@import url(https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/variable/pretendardvariable.css);

label {
  font: 1rem monospace;
  white-space: nowrap;
}

.container {
  max-height: 150px;
  overflow-y: auto;
}

.sample {
  text-transform: uppercase;
  font: 1.5rem 'Pretendard Variable', sans-serif;
}

const weightLabel = document.querySelector('label[for="weight"]')
const weightInput = document.querySelector('#weight')
const sampleText = document.querySelector('.sample')

function update() {
  weightLabel.textContent = `font-weight: ${weightInput.value}`
  sampleText.style.fontWeight = weightInput.value
}

weightInput.addEventListener('input', update)

update()

<p>일반 굵기로</p>
<p class="heavy">
  두껍게<br />
  <span>보다 얇게</span>
</p>

p {
  font-weight: 400;
}
.heavy {
  font-weight: bold;
}
span {
  font-weight: lighter;
}