웹 사이트에서 어떤 글꼴을 사용하고 있는지 어떻게 알 수 있습니까?

웹 사이트에서 어떤 글꼴을 사용하고 있는지 어떻게 알 수 있습니까? 작업을 쉽게 할 수있는 도구 또는 브라우저 확장이 있습니까?

옵션 1 : 브라우저 확장 사용 (쉽게)

WhatFont (Chrome, Firefox 및 Safari에서 사용 가능) 와 같은 확장 기능을 사용하면 웹 페이지에서 모든 텍스트의 글꼴 모음을 쉽게 검색 할 수 있습니다. 확장 프로그램을 설치하고 사이트에서 활성화 한 다음 검사하려는 요소를 클릭하면됩니다. 결과는 항상 선택한 상황에 따라 부동 상자에 표시됩니다.

옵션 2 : 브라우저 검사기로 CSS 수동 확인 (고급)

대부분의 웹 브라우저에서는 right-click→ '검사'또는 '요소 검사' 를 사용하여 글꼴을 쉽게 찾을 수 있습니다 . 을 눌러 수행 할 수도 있습니다 F12. 웹 사이트에 첨부 된 스타일 목록이 표시되어 HTML 요소에 사용 된 글꼴을 찾을 수 있습니다.

인스펙터를 사용하는 것은 확장을 사용하는 것만 큼 간단하지는 않지만 몇 가지 장점이 있습니다. 일반적으로 적용되는 스타일을 찾으려면 여러 스타일을 거쳐야하므로 일부 CSS 이해가 필요합니다. 일반적으로, 겹친 스타일은 덮어 쓰므로 항상 마지막에 적용되는 스타일을 찾으십시오.

페이지의 모든 스타일이 스타일 탭에 나열 되지만 계산 탭을 대신 사용하면 물론 글꼴 모음을 포함하여 선택한 요소에 능동적으로 적용되는 속성을 찾을 수 있습니다.

마지막으로, 전 세계적으로 어떤 글꼴을 사용하고 있는지 (어떻게 또는 어디에서가 아님) 빠르게 확인하는 또 다른 방법은 '응용 프로그램 → 프레임 → 글꼴'로 이동하는 것 입니다. 여기에는 참조 된 (시스템이 아닌) 모든 글꼴 목록이 있습니다.

이 두 번째 방법은 느리지 만 인스펙터를 사용하면 전체 페이지가 작성되는 방식에 대한 통찰력을 얻을 수 있습니다. 또한 많은 디자이너와 개발자가 변경 사항을 실제로 스타일 시트에 작성하기 전에 변경 사항을 테스트하기위한 도구로 사용합니다 (검사기에서 CSS 행을 변경하면 브라우저에서 실시간 미리보기가 트리거되므로).

브라우저의 '검사 요소'가 완벽하지 않습니다

브라우저의 개발자 도구를 사용하면 웹 사이트의 CSS에서 어떤 글꼴이 선언되어 있는지 확인할 수 있습니다. 이것은 실제로 어떤 폰트가 렌더링되고 있는지를 보여주지 않습니다 – 적용된 폰트 스택 만 보여줍니다 – 렌더링되는 실제 폰트는 설치된 폰트에 따라 다를 수 있습니다.

또 다른 유용한 도구는 Fount 입니다.

Fount는 글꼴 스택에서 어떤 웹 글꼴을 볼 수 있는지뿐만 아니라 실제로보고 있는지 알려줍니다. 또한 글꼴 크기, 무게 및 스타일을 알려줍니다.

Fount를 사용하는 것은 책갈피를 추가하는 것만 큼 쉽습니다. 앱이나 확장 프로그램을 설치할 필요가 없습니다.

북마크를 추가 한 후 :

1. 아무 사이트로나 가서 Fount 북마크를 클릭하십시오.
2. 식별하려는 유형을 클릭하십시오. 반복.
3. Fount를 끄려면 북마크릿을 다시 클릭하십시오.

Fount는 Safari, Chrome, Firefox 및 IE8 +에서 작동합니다.

Chrome 브라우저 확장 프로그램 CSSViewer를 좋아합니다 . 당신은 그것을 클릭하고 식별 할 글꼴 위에 마우스를 올려 놓으면 글꼴 모음을 보여줍니다.

FontFinder는 디자이너, 개발자 및 타이포 그래퍼를 위해 만들어졌습니다. 이를 통해 사용자는 페이지에있는 요소의 글꼴 정보를 분석하고 해당 정보를 클립 보드에 복사하고 인라인 대체를 수행하여 새 레이아웃을 테스트 할 수 있습니다.

이 추가 기능은 글꼴 및 글꼴 무게, 크기 및 더 많은 양식 웹 페이지와 같은 다른 CSS를 찾는 데 가장 적합합니다.