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

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

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

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

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

  1. 잘못된 목록이 사용되어 원래 Verdana 문제를 해결했습니다. 그러나 실제 렌더링 글꼴을 식별하는 방법이 있는지 여전히 궁금합니다.


답변

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

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


답변

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

먼저 텍스트를 선택하십시오. 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에서 잘 작동합니다.

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


답변

Firefox 22 이상에서는 확장명없이 현재 사용중인 글꼴을 보여줍니다 .


답변

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


답변

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


답변

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


답변

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

컨텍스트 글꼴