css

CSS TIP! – 크롬 개발자도구에서 웹폰트 font-weight 종류 확인하는 방법

핑계/ editor

  • 0 comments
  • 1,180 views
  • 2017년 9월 2일

크롬 개발자도구에서 지금 사용하는 웹폰트 font-weight 의 종류가 몇개인지를 확인하는 방법에 대해서 알아보아요~

CSS 작업을 하다보면 내가 지금 사용하는 웹폰트의 font-weight 의 종류가 몇개인지 궁금할때가 있습니다.
정확한 수치를 모를 땐 normal, bold 이런식으로 써주면 되긴 하지만 정확한 수치로 써주면 더 좋겠죠??
크롬 개발자도구에 지금 사용하는 웹폰트의 font-weight가 몇개인지를 확인하는 방법이 있더라구요 ~

지금부터 공유해볼께요 ~

 

저는 ‘스포카 한 산스’ 폰트를 사용했습니다.
아래처럼 HTML문서안에 웹폰트 링크 주소를 써줍니다.

 

크롬브라우저에서 HTML문서를 연 다음에 개발자도구를 열어주세요. f12 를 누르면 되죠?
처음에는 ‘Elements’탭이 활성화 되어 있는데요~ ‘Network’탭을 클릭해주세요~

 

‘Network’탭을 눌러 화면이 바뀌면 아래와 같습니다.
여기에서 ‘Disable cache’가 체크되어 있는지 꼭! 확인해주시고 체크가 안되어 있으면 체크해주세요.
‘Disable cache’를 체크한 다음에 새로고침을 해주세요

 

새로고침을 하면 화면이 아래처럼 변경됩니다.
처음에는 html이 선택되어 있습니다.
아래쪽에 SpoqaHanSans-kr.css 가 있는데요. 스포카한산스 웹폰트가 현제 웹페이지에 적용되어 있다는 표시입니다.
선택해주세요.

 

아래처럼 화면이 바뀌는데 스크롤바를 내려주세요.

 

스포카한산스 웹폰트는 아래처럼 4가지 종류의 font-weight 가 있네요.

 

font-weight 종류 확인하는 방법 간편하죠??
이처럼 다른 웹폰트를 사용할때에도 크롬 개발자도구에서 font-weight를 확인해서 사용하면 되겠죠??
많이 사용해보세요~~

핑계

댓글 먹고 살아요~

Leave a Reply

avatar