웹페이지 이 글꼴(font)은 무슨 글꼴인가 획인하기-WhatFont tool

반응형

※웹페이지 글꼴(font) 알아보는 툴: whatfont tool

 

블로그 등 웹페이지를 볼 때 때때로 마음에 드는 글꼴(font)을 발견하는 경우 적용된(render됐다고 하지요) 글꼴이 무슨 글꼴인가 알 수있는 방법 또는 자신의 웹페이지에 설정한 글꼴이 제대로 적용되는가 알아 볼 수있는 방법에 대해 기술해보겠습니다.

 

whatfont tool 설치

whatfont tool 설치 페이지는 북마클릿 및 확장프로그램(크롬, safari) 설치를 제공하고 있습니다.

 

북마클릿이란

작은 크기의 자바스크립트 코드를 북마크에 저장해 두는 것을 말한다.

 

 

 

WhatFont 설치 페이지

 

북마클릿 설치

위 이미지는 Bookmarklet 탭이 선택된 화면입니다.

 

크롬에서 설치>
▼ whatfont 박스를 북마크바탭에 드래그해서 북마크에 추가합니다.
▼북마크바가 안보이는 경우 더보기 > 북마크 > 북마크바 표시로 북마크바를 표시합니다.

 

인터넷 익스플로러에서 설치>
▼즐겨찾기 모음 보기를 설정한 후 즐겨칮기 모음 탭에 드래그해서 즐겨찾기에 추가합니다.
whatfont  박스를 우클릭하여 즐겨찾기에 추가합니다.

 

북마크바(즐겨찾기)에 WhatFont 항목이 추가됐습니다.

 

확장프로그램 설치

 

▶설치 영역에서 Chrome Ex, 또는 Safari Ex 탭을 선택하여 해당 부라우저에 확장프로그램을 설치합니다.
▶크롬의 경우 화장프로그램 탭에 WhatFont 확장프로그램 아이콘이 추가됩니다.

확장페이지 아이콘

 

WhatFont tool 실행

 

WhatFont mouseover

 

알고싶은 글꼴(font)이 있는 화면에서 북마크 또는 확장프로그램을 실행하고 글자에 마우스를 올려 놓은(over) 화면입니다.
화면 해당 글꼴이 표시되고 클릭하면 보다 상세힌 글꼴 내용이 표시됩니다.
 

WhatFont mouse click


종료시 우측 상단의 Exit WhatFont를 클릭 실행을 종료합니다.

상당히 편리한 프로그램입니다. 하지만 확장프로램의 경우 확장프로그램 아이콘이 활성화되지 않고 실행이 안되는 경우가 많습니다(리뷰에도 나와있습니다). 많은 확장프로그램 사용도 부담되니 북마크(즐겨찾기)로 사용하는 것이 좋다고 생각합니다.

 

★2018/03/04 - [웹페이지] - FastBoot 스킨 머리말(h1-h4) 인용문(blockquote) 모양 바꾸기

★2018/02/27 - [웹페이지] - 티스토리 블로그 본문 글자 크기 설정-CSS, 스킨위자드

★2018/02/19 - [웹페이지] - FastBoot 스킨 좌측 삼각형 메뉴 아이콘 조절-크기,

 

WhatFont tool

 

반응형