일반적인 웹 페이지는 일반적으로 다양한 색상으로 코딩되고 다른 글꼴과 스타일로 작성된 여러 가지 요소로 구성됩니다. 때때로 우리는 너무 아름답게 디자인되어 웹 페이지의 속성에 대해 깊이 파고들고 싶은 웹 페이지를 접합니다. 매우 우아한 테마 또는 멋지고 전문적인 글꼴일 수 있습니다.

글꼴에 대한 자신의 방법을 알고 있고 글꼴에 매료된 사람들은 종종 무료 온라인 글꼴 식별자 도구^{(free online font identifier tools)} 를 사용하여 웹에서 글꼴을 검색하는 데 도움을 줍니다. 이러한 온라인 도구를 사용하려면 URL 을 입력 하거나 글꼴이 표시된 이미지를 업로드해야 합니다. 새로운 도구를 사용하는 방법을 배우는 번거로움을 겪고 싶지 않다면 이 게시물이 적합합니다. 오늘 우리는 사용자가 브라우저 확장, 응용 프로그램 또는 온라인 도구를 사용하지 않고 특정 웹 페이지에서 사용 중인 글꼴을 식별하는 방법에 대해 논의할 것입니다.

이 기사에서 논의할 절차는 대부분의 웹 브라우저가 제공하는 설정, 즉 ' 개발자 도구 ' 또는 구체적으로 ^{(Developer Tools)}Inspect Element 라는 옵션을 중심으로 진행 됩니다. 여기에서는 Chrome^(Chrome) , Edge 및 Firefox 의 두 가지 브라우저에서 글꼴을 식별하는 방법에 대해 설명합니다 .

^(Identify)Firefox 에서 요소 검사^{(Inspect Element)} 를 사용하여 웹 페이지에서 글꼴 식별

식별하려는 글꼴의 웹 페이지를 방문하여 관심 있는 글꼴로 작성된 텍스트를 마우스 오른쪽 버튼으로 클릭합니다.

표시되는 옵션 목록(컨텍스트 메뉴)에서 요소 검사^{(Inspect Element)} 를 클릭합니다 . 그렇게 하면^(Doing) 페이지 하단에 개발자 도구^{(Developer Tools)} 가 열립니다 .

개발 도구^{(Development Tools)} 섹션 의 오른쪽 하단 모서리에 Fonts 라는 부제목이 있습니다. 이를 클릭하십시오.

그런 다음 크기, 줄 높이, 두께 등과 같이 확인하려는 글꼴의 속성과 글꼴이 기울임꼴인지 여부를 표시하지만 항상 명확합니다.

사용 중인 글꼴에 대해 더 알고 싶다면 Firefox 에서 해당 글꼴 도 다루었습니다. 글꼴 섹션을 아래로 스크롤하고 '페이지의 모든 글꼴'을 클릭하면 글꼴 탭이 확장되고 현재 탐색 중인 웹 페이지에서 사용 중인 모든 글꼴과 해당 글꼴이 있는 위치가 표시됩니다. 사용 중입니다. 뿐만 아니라 특정 글꼴이 어떻게 보이는지 미리 볼 수도 있습니다. 개발자 도구^{(Developer Tools)} 에서 글꼴 위로 마우스를 가져가면 해당 글꼴을 사용하는 웹 페이지 섹션이 강조 표시됩니다.

Chrome 에서 개발자 도구^{(Developer Tools)} 를 사용하여 글꼴 식별

프로세스는 위에서 설명한 것과 유사합니다. Firefox 에서 했던 것처럼 처음 두 단계를 따라 페이지 오른쪽 에서 개발자 도구^{(Developer Tools)} 를 엽니다 .

'계산됨' 부제목을 클릭하십시오.

조금 아래로 스크롤^(Scroll) 하면 관심 있는 글꼴에 대한 정보(글꼴 패밀리, 크기 등)를 찾을 수 있습니다.

불행히도 Chrome 은 ^(Chrome)Firefox 와 같은 추가 정보를 제공하지 않습니다.

^(Identify)Edge 개발자 도구^{(Edge Developer Tools)} 를 사용하여 사용 되는 글꼴 ^(Font)식별

1. 오픈 에지
2. 마우스 오른쪽 버튼을 클릭하고 텍스트 선택
3. 검사 선택
4. 열리는 개발자 도구^{(Developer Tools)} 에서 계산됨 아래를 확인하십시오.^(Computed)
5. 글꼴 세부 정보가 표시됩니다.

브라우저 개발자 도구^{(Developer Tools)} 로 작업할 수 없다고 생각 하고 온라인 도구가 더 적합하다고 생각한다면 매우 잘 작동하는 몇 가지 도구가 있습니다.

다음 읽기^{(Read next)} : 유료 글꼴에 대한 유사한 무료 대안을 찾는^{(find similar free alternatives to paid Fonts)} 방법 .

Identify fonts in Chrome, Edge and Firefox using Developer Tools

A typical web page generally consists of sevеral different elements with most of them coded in different colors and written in different fonts and styles. Sometimes, we come across web pageѕ so beautifυlly designed that they make us want to dеlve deep intо their attributes; a very elegant theme or a nice, professional font, perhaps.

People who know their way around fonts and are fascinated by them often use free online font identifier tools to help discover fonts on the web. These online tools require you to enter a URL or upload an image with the font showcased, which is then inspected. In case you don’t want to go through the hassle of learning to use a new tool, this post is for you. Today, we will discuss how users can identify what font a particular web page is using without using a browser extension, an application, or any online tools.

The procedure that we will be discussing in this article will revolve around a setting that most web browsers offer, namely ‘Developer Tools,’ or to be specific, an option called Inspect Element. Here, we will discuss how fonts can be identified in two browsers – Chrome, Edge and Firefox.

Identify fonts on a webpage using Inspect Element in Firefox

Visit the web page of the font of which you want to identify and right-click on the text that is written in the font you are interested in.

From the list of options that show up (the context menu), click on Inspect Element. Doing so would open the Developer Tools on the bottom of the page.

On the bottom right corner of the Development Tools section, you will find a subhead named Fonts, click on it.

It will then display for you the properties of the font you wanted to look into like its size, line height, weight, etc., and also whether or not the font is in italics or not, though that is always apparent.

If you are interested to know more about the font in use, Firefox has you covered with that too. If you scroll down the fonts section and click on ‘All fonts on the page,’ the fonts tab will expand and you will be shown all the fonts that are being used on the web page you are browsing at the moment, and also where they are being used. Not just that, but you also get a preview of how a particular font looks. Hovering your mouse over the fonts in the Developer Tools will highlight the sections of the web page that use that font.

Identify a font using Developer Tools in Chrome

The process is similar to the one described above. Follow the first two steps as you did with Firefox to open the Developer Tools on the right side of the page.

Click on the ‘Computed’ sub-head.

Scroll down a bit and you will find information about the font you’re interested in (font’s family, size, etc.)

Unfortunately, Chrome doesn’t provide you with any additional information like Firefox does.

Identify which Font is used using Edge Developer Tools

1. Open Edge
2. Right-click and select the text
3. Select Inspect
4. In the Developer Tools that open, look under Computed
5. You will see the Font details.

If you don’t think you can’t work around with browser Developer Tools and that online tools would suit you better, there are several of them that work very well.

Read next: How to find similar free alternatives to paid Fonts.

Related posts

• Website를 사용하여 Font를 다운로드하는 방법 Developer Tools

• Developer Tools을 사용하여 Chrome or Edge의 특정 사이트에 대한 Site Data 명확한 Site Data

• Chrome에서 Default Font을 변경하는 방법, Edge, Firefox browser

• Registry or Group Policy을 사용하여 Edge에서 Developer Tools 사용 중지

• Fix Blurry File Open dialog Google Chrome and Microsoft Edge의 상자

• default browser을 변경하는 방법 : Chrome, Firefox, Edge Windows 10

• Chrome, Edge, Firefox, Opera Opera, Firefox, Firefox

• Chrome, Edge에서 모든 Saved Passwords을 한 번 제거하십시오

• Firefox, Chrome 및 Edge에서 Geolocation를 비활성화하는 방법

• Chrome, Firefox, Edge, Internet Explorer에서 이미지를 탐색하는 동안 이미지 사용 안 함

• Chrome에서 Web page를 번역하는 방법, Firefox and Edge

• Chrome, Firefox 및 Edge 브라우저에서 Avast extension를 사용하는 방법

• Chrome, Firefox, Opera, Edge 브라우저에서 홈페이지를 변경하는 방법

• Edge, Chrome, Firefox에서 User name and Profile image을 변경하는 방법

• Chrome, Firefox or Edge browser에서 암호를 저장하는 것이 안전합니까?

• Force Links Chrome, Edge, Firefox, Opera의 배경 Tab에서 열리는 Force Links

• Chrome, Firefox, Edge에서 Adobe Flash, Shockwave, Adobe Flash, Edge를 사용 중지, 제거

• Chrome, Edge 또는 Firefox에서 텍스트 전용 Mode에서 탐색하는 방법

• Chrome or Firefox에서 News and Interests links을 열는 방법; Edge이 아닙니다

• Chrome에서 내장 Password Manager을 비활성화하는 방법, Edge, Firefox