react css 글씨체 두께 다르게 적용하기. 글씨체 두껍게 하기.

<span>태그로 글씨 감싸서 각각 class명 지정해주기.

font-weight을 각각 다르게 설정해주기.(900까지 지원)

         <form>

            <div class="login_box">

              <button class="login_btn" type="button">

                <span class="bold">네이버</span>

                <span class="light">로그인</span>

              </button>

            </div>

          </form>

 

.login_box >button {

        width: 300px;

        height: 50px;

        background-color: #03cf5d;

        border-color: #03cf5d;

      }

      .login_btn{

        font-size: 17px;

      }

      .bold{

        font-weight: 900;

      }

      .light{

        font-weight: 100;

      }

 

 

 

 

더 두꺼운 글씨체를 원하면 폰트 자체를 변경해준다.

애초에 두꺼운 글씨체로 나오는 폰트를 적용해준다.

참고로 font-weight을 지원하지 않는 폰트도 있다.

pretendard는 한글 지원해주며, font-weight도 지원해주는 웹폰트.

windows, ios 에도 적용가능.

 

두꺼운 글씨체 Pretendard 적용방법>>https://belle-sooir.tistory.com/201

[react css] Pretendard 폰트 적용하기