웹사이트의 성공은 웹사이트의 외관에 크게 좌우됩니다. 올바른 색상 조합과 테마를 사용하면 방문자가 사이트에 더 오래 머무를 수 있습니다. 사이트의 색상 팔레트와 구조 외에도 선택한 글꼴은 잠재고객의 참여를 유지하는 데 중요한 역할을 합니다.
웹을 탐색하는 동안 매력적인 사이트를 발견하고 어떤 글꼴을 사용하고 있는지 알고 싶을 수 있습니다. 온라인 확장 프로그램과 브라우저에 내장된 요소 검사 도구를 사용하면 글꼴을 빠르고 쉽게 식별할 수 있습니다.
요소 검사 도구를 사용하여 글꼴을 찾는 방법
모르는 경우를 대비하여 브라우저에 내장된 요소 검사 도구를 사용하여 웹사이트의 소스 코드를 검사할 수 있습니다. CSS, HTML 및 기타 정보를 보면 사이트의 디자인 요소를 이해할 수 있습니다. 자신의 사이트를 디자인할 때 영감을 얻을 수 있는 좋은 방법입니다.
Inspect Element 도구를 사용하여 글꼴을 식별하는 프로세스는 매우 간단하며 코딩 기술이 필요하지 않습니다. 이 도구는 시중에 나와 있는 모든 브라우저에서 사용할 수 있으며 각 브라우저는 레이아웃이 비슷합니다.
다음은 브라우저의 검사 도구를 사용하여 글꼴을 식별하는 방법입니다.
- 사용하려는 웹사이트를 엽니다.
- 식별하려는 글꼴이 있는 텍스트를 강조 표시하고 마우스 오른쪽 버튼으로 클릭합니다.
- 검사를 클릭합니다. 컨텍스트 메뉴에서.
- 검사 메뉴가 열리면 계산됨 .
- 아래로 스크롤하여 Font-Family를 찾습니다. 부분. 여기에서 글꼴 이름과 스타일, 크기를 찾을 수 있습니다.
검사 도구를 사용하는 다른 방법
검사 도구를 사용하여 사이트의 글꼴을 더 빨리 찾으려면 다음을 시도해 보세요.
- 사용하려는 웹사이트를 엽니다.
- Ctrl + Shift + C 누르기 (Cmd + Shift + C 맥에서).
- 텍스트 위로 마우스를 가져가면 글꼴 스타일, 크기, 색상 코드 및 여백이 표시됩니다.
Inspect 도구를 사용하여 웹 페이지에 사용된 글꼴 목록을 확인할 수도 있습니다. 방법은 다음과 같습니다.
- 웹페이지로 이동합니다.
- Ctrl + Shift + I을 눌러 소스 코드를 엽니다. (Cmd + Shift + I 맥에서).
- 네트워크를 클릭합니다. 탭을 선택한 다음 글꼴을 선택합니다. 탭.
- 여기에 웹페이지에 사용된 모든 글꼴 목록이 표시됩니다.
모든 글꼴 목록을 실시간으로 얻으려면 웹페이지를 새로 고쳐야 할 수 있습니다.
브라우저 확장을 사용하여 글꼴을 식별하는 방법
글꼴을 식별하는 더 편리한 방법을 원하는 경우 글꼴 찾기 브라우저 확장 프로그램을 설치할 수 있습니다. 웹에서 글꼴을 감지하는 데 도움이 되는 여러 브라우저 확장 프로그램이 있지만 가장 많이 사용되는 확장 프로그램은 WhatFont입니다. 및 글꼴 찾기 .
두 확장자를 모두 사용하여 글꼴을 식별하는 과정을 살펴보겠습니다.
1. WhatFont
WhatFont는 한 번에 여러 글꼴을 빠르게 감지하는 데 널리 사용됩니다. 이 도구를 사용하는 방법은 다음과 같습니다.
- 브라우저에서 WhatFont가 활성화된 경우 텍스트 위로 마우스를 가져가면 글꼴이 표시됩니다.
- 텍스트를 클릭하면 글꼴 크기, 색상 및 스타일과 같은 나머지 글꼴 세부 정보가 포함된 팝업 창이 나타납니다.
- 또한 텍스트의 여러 섹션을 동시에 선택하여 동일한 페이지에서 서로 다른 글꼴을 비교할 수 있습니다.
2. 글꼴 찾기
글꼴 찾기는 웹 사이트의 텍스트 위로 마우스를 가져가면 글꼴 세부 정보도 표시합니다. 그러나 기술적인 세부 사항을 많이 제공하므로 웹 디자인에 익숙하지 않은 경우 약간 혼란스러울 수 있습니다.
즉, Font Finder는 실시간으로 기존 글꼴을 새 글꼴로 교체하려는 웹 개발자에게 더 적합합니다. 이렇게 하면 영구적으로 변경하기 전에 글꼴을 쉽게 테스트할 수 있습니다.
글꼴 찾기를 사용하여 글꼴을 테스트하는 방법은 다음과 같습니다.
- 웹 페이지에서 텍스트의 일부를 강조 표시합니다.
- 마우스 오른쪽 버튼으로 클릭하고 글꼴 찾기를 선택합니다. 컨텍스트 메뉴에서.
- 글꼴 바꾸기 선택 그리고 글꼴 이름을 입력합니다. Calibri를 추가해 보겠습니다. 미리보기에서 글꼴이 어떻게 변경되는지 확인하세요.
- 글꼴을 재설정하려면 페이지를 새로고침하세요.
이미지에서 글꼴을 확인하는 것은 어떻습니까?
이미지에서 글꼴을 식별하려는 경우 브라우저 확장 프로그램과 브라우저의 검사 도구가 도움이 되지 않을 수 있습니다. 그러나 WhatFontIs, FontSquirrel, Fontspring, WhatTheFont 등과 같은 온라인 이미지 검사 도구를 사용해 볼 수 있습니다.
이미지에서 글꼴을 식별하는 프로세스는 모든 도구에서 대체로 동일합니다. WhatTheFont를 사용하여 이미지의 글꼴을 식별해 보겠습니다.
- 아직 다운로드하지 않았다면 사용하려는 이미지를 다운로드합니다.
- WhatTheFont로 이미지를 가져옵니다.
- WhatTheFont는 이미지의 텍스트를 자동으로 감지합니다. 식별할 글꼴을 둘러싸도록 자르기 상자를 축소하거나 확대합니다. 화살표 버튼 누르기 완료되면.
- WhatTheFont는 이미지의 글꼴을 갤러리의 글꼴과 일치시키고 밀접하게 관련된 글꼴을 표시합니다.
- 바로 일치하는 항목을 찾지 못하면 더 많은 결과 표시를 계속 클릭할 수 있습니다. 더 많은 관련 글꼴을 보려면
웹에서 글꼴 감지 및 디자인에 사용
글꼴은 웹사이트나 그래픽 디자인의 성공에 중요한 역할을 합니다. 웹을 탐색하는 동안 매력적인 글꼴을 발견하면 위의 방법을 사용하여 쉽게 감지할 수 있습니다.