브라우저가 텍스트를 렌더링하기 위해 실제로 사용하는 글꼴을 어떻게 확인할 수 있습니까?

175

내 CSS font-family: Helvetica, Arial, sans-serif;는 전체 페이지에 " "를 지정 합니다. Verdana가 일부 부분에서 대신 사용되는 것 같습니다. 이것을 확인할 수 있기를 바랍니다.

브라우저에서 Word로 복사하여 붙여 넣을 시도했지만 글꼴이 유지되지 않습니다.

텍스트 섹션에 실제로 사용되는 글꼴을 결정하는 방법이 있습니까?

Firebug는 위와 같이 글꼴 목록을 제공하지만 [1] 어떤 글꼴이 사용되고 있는지 확인할 방법이 없습니다.

  1. 잘못된 목록이 사용되어 원래 Verdana 문제를 해결했습니다. 그러나 실제 렌더링 글꼴을 식별하는 방법이 있는지 여전히 궁금합니다.
css  browser  fonts 
— 용암
소스
— ajm
아래 답변에 설명 된 FontFinder 및 WhatFont는 여전히 사용 된 글꼴을 감지하는 매우 조잡한 방법입니다. ؋이 글꼴에서 사용할 수없는 Aghani 기호를 선택할 때 둘 다 "Quanttrocentro Sans"(기본 글꼴)를 잘못 표시했습니다 .
— 질문 오버플로
@QuestionOverflow, 오늘날 Firefox 및 Chrome에는 글꼴을 결정하는 기본 제공 도구가 있습니다. 그들은 것이다 따라서 글꼴뿐만 아니라 그 ؋에 사용 된 무엇을 보여줄 것이다, 각 글리프의 글꼴을 보여줍니다.
— Arjan
@Arjan : 2020 년에도 여전히 그렇습니까?
— 삼키려는 elysium
@ devouredelysium, 당신은 내 대답 을 보았 습니까? 사용 된 글꼴을 보려면 단일 글리프를 선택하십시오.
— Arjan

답변:

50

당 윌프레드 휴즈 대답 , 파이어 폭스는 지금 기본적으로이 작업을 지원합니다. 이 기사에는 자세한 내용이 있습니다.

이 답변은 원래 "Font Finder"플러그인을 참조했지만 4 년 전의 플러그인이었습니다. 오래된 답변이 이와 같이 남아 있고 커뮤니티가 업데이트 할 수 없다는 사실은 스택 오버플로에서 몇 가지 남아있는 실패 중 하나입니다.

— 제레미 카우프만
소스
7
이유가 파이어 폭스의 도구> 웹 개발자가> 인스펙터> 글꼴 당신 (윌프레드 휴즈 대답을) 말할 것을 지금 사용하지합니다
— skierpage
1
불행하게도, 파이어 폭스 (47)는 더 이상 연결이 블로그에 언급 된 글꼴 탭했다 : 이 기사는 자세한 내용이 없습니다
— Zabba
3
"Firefox 47부터는 글꼴보기가 기본적으로 비활성화되어 있습니다.보다 완전한 기능을 갖춘 대체 작업을하고 있습니다. 글꼴보기를 보려면 about : config를 방문하여 환경 설정 devtools를 찾으십시오. fontinspector.enabled로 설정하고 true로 설정하십시오. " developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/…를 참조하십시오 .
— Daniel Le
1
분명히 devtools.fontinspector.enabledFirefox 47에서만 설정 이 필요했습니다. "Firefox 47 에서만 글꼴보기가 기본적으로 비활성화되어 있습니다. Firefox 47에서 글꼴보기를 보려면을 방문 about:config하여 환경 설정을 찾아로 devtools.fontinspector.enabled설정하십시오 true. Firefox 47에서 글꼴보기는 기본적으로 활성화되어 있습니다. " , @다니엘.
— Arjan
1
@DanielLe는 물론 텍스트를 복사 할 때 올바르다는 것을 이해했습니다 :-)
— Arjan
151

오늘날 크롬과 파이어 폭스에는이를위한 툴이 내장되어 있지만, 사파리는 텍스트를 복사하여 조사해야합니다.

먼저 텍스트를 선택하십시오. Firefox에서 페이지 검사기는 글꼴보기를 갖습니다 .

Firefox 글꼴보기

또한 글꼴이 다운로드되었는지와 Regular, ExtraLight, Italic, BoldItalic 등의 스타일이 사용되는지 알려줍니다.

Chrome의 경우 DevTools의 "Elements"로 이동하여 "Computed"탭으로 이동하여 "Rendered Fonts"섹션으로 스크롤하십시오. Firefox와 달리 기본 글꼴 이름 만 표시하며 사용중인 특정 스타일은 표시하지 않습니다.

크롬 웹 관리자

위 스크린 샷은 유니 코드 텍스트에 여러 글꼴이 표시 될 수 있음을 보여줍니다. Chrome에서 6 개의 글리프 ( "Pekka"및 공백)가 "Arial"을 사용하고 있고 1 개 ( "웃음")가 "Apple SD Gothic Neo"를 사용하고 있음을 알려줍니다.

Arial — 로컬 파일 (6 글리프)
Apple SD Gothic Neo — 로컬 파일 (1 글리프)

실제 CSS는 다음을 정의합니다.

font-family: Arial,"Helvetica Neue",Helvetica,sans-serif

그러나 이러한 글꼴에는 종종 많은 특수 문자가 포함되지 않습니다. 글꼴 정보는 요소의 유니 코드 텍스트가 실제로 여러 글꼴을 사용할 수있는 HTML 요소마다 작동하므로 여러 글꼴도 표시합니다. 확실하지 않은 경우 HTML 창에서 텍스트를 두 번 클릭하고 관심없는 텍스트를 제거하십시오. 그런 다음 주변 요소를 다시 선택하면 하나의 옵션 만 표시됩니다. 이 경우 두 브라우저 모두 "웃음"문자에 "Apple SD Gothic Neo Regular"를 사용했음을 알 수 있습니다.

불행히도, 동일한 컴퓨터에서 다른 브라우저 (및 단일 브라우저의 다른 버전까지)는 브라우저에서 지원 / 선호하는 글꼴 유형으로 인해 다른 글꼴을 사용할 수 있습니다. 예를 들어, Mac에서 Safari는 Apple Advanced Technology를 선호하는 반면 Firefox는 Microsoft OpenType을 지원합니다 ( Mac에 Microsoft Office를 설치 한 후 아랍어 문제가 발생할 수 있음 ). 또는 위의 스크린 샷에서 "웃음"문자의 경우 현재 내 Mac의 Chrome 및 Firefox는 "Apple SD Gothic Neo"(OpenType PostScript)를 선호하지만 이전 버전의 Firefox에서는 "AppleGothic Regular"(TrueType 글꼴)를 대신 사용했습니다. .

비슷한 글꼴보기가없는 브라우저의 경우, 텍스트 조각을 일부 워드 프로세서 또는 리치 텍스트 편집기에 복사하여 붙여넣고 특정 텍스트를 선택한 다음 글꼴 드롭 다운 목록에 표시되는 이름을 확인하십시오. 내 Mac에서는 Firefox에서 붙여 넣기 ( "웃음"Firefox의 "Apple SD Gothic Neo"가 붙여 넣기에서 "AppleMyungjo"로 변환되는 경우)에서 작동하지 않지만 Safari 및 Chrome에서 잘 작동합니다.

브라우저에서 서식있는 텍스트 편집기로 붙여 넣은 텍스트

— 아르 잔
소스
1
Safari에 플러그인이나 플러그인이 있는지 알고 있습니까?
— 앤드리
4
Chrome 47에서는 계산 섹션 하단으로 스크롤해야합니다. font-family알파벳순으로 표시된대로 속성을 확장하면 로드중인 글꼴이 표시되지 않습니다. 이 정보는 하단에 나타납니다.
— Merchako
1
@Merchako, 계산 된 글꼴이 "serif"및 "sans-serif"와 같은 일반 글꼴 인 경우 어떻게됩니까? 그렇다면 실제 글꼴은 어떻게 얻 습니까?
— Pacerier
2
@Pacerier, Chrome 에서 계산 탭에서 아래로 스크롤하면됩니다 . Firefox에서는 별도의 탭을 참조하십시오.
— Arjan
1
@ TMG, 웹 글꼴에는 별칭이 필요하지 않지만 URL을 직접 참조 할 수 있다고 상상할 수 있습니다. 우리가 볼 수있는 공개 웹 사이트입니까? 그렇지 않은 경우 Firefox는 무엇을 표시합니까?
— Arjan
30

WhatFont 는 글꼴 스택에서 어떤 글꼴이로드되는지 구체적으로 알려주는 Chrome 확장 프로그램입니다.

— 사용자 1100745
소스
6
나를 위해 어떤 글꼴이 선언되었지만 실제로 어떤 글꼴이 사용되는지는 나와 있지 않습니다.
— panzi
3
이 기사 ( updates.html5rocks.com/2013/09/… ) 에 따르면 이제 Dev Tools는 실제 렌더링되는 글꼴을 알려줍니다.
— yorch
WhatFont는 렌더링 된 글꼴을 감지하려고하지만 성공적으로 수행하지 않는 것 같습니다. github.com/chengyin/WhatFont-Bookmarklet/issues/13
— Chris Marisic
7

현재 버전의 Firefox (v7 이후)에는 브라우저의 폴백 사례를 고려하여 사용중인 실제 글꼴 (CSS font-family 속성이 말하는 것 대신)을보고하는 "fontinfo"라는 추가 기능이 있습니다. 요청한 font-family를 사용할 수 없거나 텍스트에 사용 된 문자를 지원하지 않았기 때문에 다른 글꼴

— 홍옥
소스
지금까지 이것이 가장 좋은 답변입니다
— Ingo Kegel
1

Firefox 용 Firebug를 사용하여 특정 섹션을 확인할 수 있습니다. 모든 정확한 속성을 제공해야합니다.

— 제로
소스
그래도 여전히 사용중인 특정 목록이 아닌 목록을 제공합니다 ...하지만 두 번째 검사에서 Verdana는 어떻게 든 글꼴 모음 목록에 들어갔습니다. 이것은 내 원래 문제의 원인이 될 것입니다. 감사합니다.
— lavaturtle
1
Firebug는 또한 어떤 규칙이 어떤 글꼴을 사용하여 해당 글꼴을 제공하는지 알려줍니다. CSS가 잘못되는 위치를 해결하는 데 매우 유용합니다.
— RichieHindle
Safari 4 Beta에는 WebInspector도 있습니다 (스킨 파이어
— 버그
1
나는 당신이 사용하는 도구에 관계없이 항상 완전한 목록을 얻을 것이라고 생각합니다. 사용 된 글꼴은 컴퓨터에 설치된 목록에서 첫 번째 글꼴입니다.
— jeroen
2
현재 Firebug (1.11.4, 이전 버전 일 수도 있음)는 현재 글꼴을 파란색으로 강조 표시합니다.
— Mark Vrabel
1

jeremy가 언급 한 "FontFinder"플러그인은 여기에서 작동하지 않는 것으로 보이며 실제로 렌더링 된 글꼴 (Linux의 Firefox 4.0rc1)에 관계없이 CSS 목록의 첫 번째 글꼴을 제공합니다. 그러나 다음 플러그인은 "올바른"글꼴을 제공합니다.

컨텍스트 글꼴

— 데이브 보그 트
소스
불행히도 Context Font조차도 계산 된 CSS 패밀리를 보여 주며 예를 들어 serif 또는 sans-serif 일 수 있습니다. 또한 일부 문자가 계산 된 글꼴에없고 브라우저가 다른 글꼴에서 해당 문자를 선택하면 컨텍스트 글꼴은 실제 글꼴이 아닌 계산 된 글꼴 패밀리를 계속 표시합니다.
— Jukka K. Korpela
0

Lalit Patel의 텍스트 측정 방식과 스크립트를 기반으로 현재 선택된 텍스트에 사용되는 글꼴 (또는 아무것도 선택하지 않은 경우)을 추측 할 수있는 책갈피 를 만들었습니다 body. 스택의 어떤 글꼴이 사용되는지 알아내는 데 매우 효과적입니다! ( sans-serif실제로 무엇 을 매핑 하는지 는 알 수 없습니다 .)

여기를 잡아 : https://alanhogan.com/bookmarklets#font-stack-full

소스는 GitHub에 있습니다 .

이 CodePen 도 참조하십시오 . 대부분 동일한 코드를 사용합니다. 선택한 다른 단락으로 시도하고 테이블 / 추측 업데이트를보십시오!

— 앨런 H.
소스
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.