모든 페이지에서 글꼴 검사
텍스트에 마우스를 올리고 클릭하면 라이브 서체, 크기, 굵기, 스타일, 색상을—요소 근처 또는 사이드바에서—DevTools를 열지 않고 확인할 수 있습니다.
what the font - font finder
웹페이지 요소의 서체와 CSS 타이포그래피—글꼴 패밀리, 크기, 굵기, 줄 높이, 자간, 색상, 대비—를 확인한 뒤 탭을 떠나지 않고 필요한 정보를 복사하거나 내보낼 수 있습니다.
라이브 타이포그래피를 위해
기능
중요한 타이포그래피 세부 정보
줄 높이, 자간, 변형, 장식, 대비(AAA/AA 표시 포함)를 하나의 패널에서 확인하세요.
한 번의 클릭으로 CSS 복사
검사한 요소의 글꼴 패밀리, 색상 또는 바로 쓸 수 있는 CSS snippet을 복사하세요.
페이지에서 스타일 편집
라이브 요소의 굵기, 크기, 간격, 색상 등을 조정한 뒤 탐색이 끝나면 초기화하세요.
페이지의 모든 글꼴
페이지 전체의 고유 텍스트 스타일을 스캔하고 디자인 시스템을 점검할 때 빠르게 이동하세요.
내보내기 및 Google Fonts
타이포그래피를 SCSS 또는 JSON으로 내보내거나, 찾은 패밀리의 Google Fonts 검색을 여세요.
단순한 설계
소개
라이브 타이포그래피—서체, 크기, 굵기, 색상, 대비—를 보여 주는 Chrome 확장 프로그램으로, 모든 웹페이지에서 글꼴을 검사, 복사, 내보낼 수 있습니다.
- —
- 게시된 사용량 합계
- —
- 확인된 리뷰 수
Chrome Web Store
사용자 후기
설명용 샘플 피드백 — 연결되면 Chrome Web Store 리뷰로 대체됩니다.
★★★★★
“DevTools를 열지 않고 라이브 사이트에서 패밀리, 굵기, hex 색상을 가져올 수 있습니다.”
★★★★★
“하나의 패널에서 CSS와 대비를 복사하는 것은 점검 중에 정확히 필요한 기능입니다.”
★★★★★
“페이지의 모든 글꼴로 랜딩 페이지의 불일치한 서체를 빠르게 찾을 수 있습니다.”
세 가지 빠른 단계
사용 방법
-
확장 프로그램 설치
Chrome Web Store에서 what the font - font finder를 추가하고 도구 모음에 고정하세요.
-
검사 시작
팝업을 열고 검사를 시작한 뒤 페이지의 텍스트에 마우스를 올리고 클릭하세요.
-
복사 또는 내보내기
CSS 복사, 스타일 내보내기, Google Fonts 열기 또는 페이지의 모든 글꼴 탐색.
설치 전 궁금한 점
FAQ
웹사이트에서 글꼴을 어떻게 식별하나요?
what the font - font finder를 설치하고 검사를 시작한 뒤 텍스트에 마우스를 올리고 클릭하여 패밀리, 크기, 굵기, 색상이 있는 패널을 여세요.
보이는 텍스트의 CSS를 복사할 수 있나요?
네. 패널에서 글꼴 패밀리, 색상 또는 검사한 요소의 CSS snippet을 복사할 수 있습니다.
모든 페이지에서 작동하나요?
일반 웹사이트 탭에서 작동합니다. Chrome 시스템 페이지와 일부 제한된 URL은 검사할 수 없습니다.
페이지에서 사용된 모든 글꼴을 볼 수 있나요?
페이지의 모든 글꼴을 사용해 고유한 표시 텍스트 스타일을 나열하고 상세 패널에서 열 수 있습니다.
검사 중에 모양을 바꿀 수 있나요?
네. 요소의 굵기, 크기, 간격, 색상 및 관련 스타일을 편집한 뒤 초기화하여 원래 상태로 되돌릴 수 있습니다.
Google Fonts는 어디에서 여나요?
패밀리 이름을 검색할 수 있을 때 패널의 Google Fonts 작업으로 해당 이름의 쿼리를 여세요.