브라우저가 텍스트를 렌더링하기 위해 실제로 사용하는 글꼴을 확인하려면 어떻게 해야 합니까?
의 CSS는 "는 CSS을 "합니다 의 의 는 font-family: Helvetica, Arial, sans-serif;" ◦ 대신 되고 있는 것 .베르다나가 대신 사용되는 부분이 있는 것 같습니다.이것을 확인할 수 있으면 좋겠습니다.
브라우저에서 워드로 복사하여 붙여넣기를 시도했지만 글꼴을 보존하지 못합니다.
텍스트 섹션에 실제로 사용되는 글꼴을 확인할 수 있는 방법이 있습니까?
Firebug는 위 [1]과 같은 글꼴 목록을 제공하지만 사용 중인 글꼴을 확인할 수 있는 방법이 없습니다.
- 잘못된 목록이 사용되고 있었던 것으로 드러났고, 이것이 나의 원래 베르다나 문제를 해결했습니다.하지만 실제 렌더링 폰트를 식별할 수 있는 방법이 있는지는 여전히 궁금합니다.
여러 해 동안 Firefox와 Chrome에는 모든 세부 사항을 표시할 수 있는 도구가 내장되어 있지만 2021년 10월 사파리 15.x에서는 여전히 텍스트를 복사하여 조사해야 합니다.
파이어폭스
Firefox에서는 일부 텍스트를 마우스 오른쪽 단추로 클릭하고 요소 검사를 선택한 후 표시되는 페이지 검사기에 글꼴 보기가 있습니다.
일반, ExtraLight, Italic, BoldItalic 등 사용되는 스타일도 알려줍니다.
위 스크린샷과 마찬가지로:
.SFNS
글꼴
Neo SD
네오 레귤러 SD러오플러오e
따라서 하나의 글리프만 선택해도 현재 보고 있는 요소에 사용되는 모든 글꼴을 볼 수 있습니다.특정 글꼴을 사용하는 글리피를 강조 표시하려면 검사기에서 글꼴 이름 하나를 마우스로 이동합니다."Apple SD Gothic Neo Regular"를 맴도는 것은 단지 다음과 같은 점을 멋지게 강조합니다.
"시스템 글꼴"을 호버링하면 다음을 얻을 수 있습니다.
웹 폰트의 경우 파이어폭스는 CSS의 이름과 함께 다운로드 받은 폰트 내의 세부 정보를 보여주는 것 같습니다."페이지의 모든 글꼴" 섹션에는 글꼴이 다운로드된 위치도 나와 있습니다.
저는 2021년 10월에 파이어폭스가 폰트를 결정할 수 있는 최적의 옵션을 가지고 있습니다.그러나: 모든 브라우저에서 동일한 글꼴을 사용할 수 있는 것은 아니므로 읽어 보십시오!
크롬
Chrome의 경우 DevTools의 "Elements"로 이동하고 "Computed" 탭으로 이동한 후 "Rendered Fonts" 섹션까지 스크롤합니다.Firefox와 달리 기본 글꼴 이름만 표시되며 사용할 수 있는 특정 스타일은 표시되지 않습니다.
웹 글꼴의 경우 Chrome은 "네트워크 리소스"(Firefox는 더 많은 세부 정보를 보여줍니다)만 표시합니다.
Firefox와 마찬가지로 단일 글리프만 선택해도 보고 있는 요소에 사용되는 모든 글꼴을 볼 수 있습니다.Chrome은 선택한 요소 내의 특정 글꼴을 사용하는 글리프 수를 제공하지만, 특정 글꼴을 사용하는 글리프를 강조 표시하기 위해 호버링을 지원하지는 않습니다.
.SFNS — 로컬 파일(192개의 글리프)
.Apple SD Gothic NeoI — 로컬 파일 (1 글리프)
사파리
2021년 10월 사파리 15는 마침내 "폰트" 탭을 도입했지만 출력은 상당히 제한적입니다."Identity"의 경우 "TN web use only"와 같은 보조 정보를 표시하는 경우가 많습니다(여기서 Firefox는 "Interstate Compensed, TN web use only"와 같이 주석으로 표시함).아무것도 안 보여요.하지만, 마지막으로, 그것은 시작입니다.
요소에만 적용됩니다.단일 문자와 같은 텍스트 노드의 경우 글꼴 탭이 표시되지 않습니다.
위에서 사용한 것과 동일한 예에서 Safari는 여러 글꼴이 사용되었음을 표시하지도 않습니다.
이름 .애플시스템
자, 읽어보세요.
기타 브라우저(및 Safari)
전체 글꼴 보기가 없는 Safari 및 기타 브라우저의 경우 텍스트 조각을 워드 프로세서 또는 리치 텍스트 편집기에 복사하여 붙여넣기만 하면 되고 특정 텍스트를 선택한 다음 글꼴 드롭다운 목록에 표시되는 이름을 확인할 수 있습니다.내 Mac에서는 Firefox에서 붙여넣기를 할 때 작동하지 않지만(Firefox의 "Apple SD Gothic Neo"는 붙여넣기 시 "Apple Myeongjo"로 변환됨), Safari 및 Chrome에서는 잘 작동합니다.
단일 HTML 요소에 여러 글꼴 포함
위의 스크린샷에 대해 실제 CSS는 다음과 같이 정의합니다.
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Liberation Sans", sans-serif;
하지만 이 글꼴들은 종종 특별한 문자를 많이 포함하지 않습니다.요소의 유니코드 텍스트가 하위 텍스트 노드에서 여러 글꼴을 실제로 사용할 수 있는 HTML 요소별로 글꼴 정보가 작동하기 때문에 개발자 도구는 여러 글꼴도 표시합니다.의심스러운 경우 글꼴을 Firefox에 두 번 클릭하거나 다른 브라우저에서 HTML 창에서 텍스트를 두 번 클릭하여 관심 없는 텍스트를 제거합니다.그런 다음 주변 요소를 다시 선택할 때 한 가지 옵션만 표시됩니다.
브라우저에 따라 글꼴이 다름
불행하게도 브라우저에서 지원/선호하는 글꼴 유형으로 인해 동일한 컴퓨터의 다른 브라우저(그리고 심지어 단일 브라우저의 다른 버전)에서 다른 글꼴을 사용할 수 있습니다.예를 들어 Mac에서는 사파리가 Apple Advanced Technology를 선호하는 반면 Firefox는 Microsoft OpenType(Mac에 Microsoft Office를 설치한 후 아랍어에 문제가 발생할 수 있음)을 지원합니다.또는 위의 스크린샷에 있는 "firx" 캐릭터의 경우, 요즘 제 맥의 파이어폭스와 크롬은 "Apple SD Gothic Neo"와 "Chrome"을 선호합니다.애플 SD 고딕 NeoI(오픈타입 포스트스크립트)를 사용했지만, 파이어폭스의 이전 버전은 대신 애플 고딕 레귤러(TrueType 글꼴)를 사용했습니다.
file /System/Library/Fonts/AppleSDGothicNeo.ttc
/System/Library/Fonts/AppleSDGothicNeo.ttc: OpenType font collection data, 2.0, 18 fonts, at 0x60 OpenType Font data, 18 tables, 1st "BASE"
file /System/Library/Fonts/Supplemental/AppleGothic.ttf
/System/Library/Fonts/Supplemental/AppleGothic.ttf: TrueType Font data, 18 tables, 1st "cmap", 33 names, Macintosh, Copyright ? 1994-2006 Apple Computer, Inc. All rights reserved.AppleGothicRegularAppleGothic Reg
(Mac의) Chrome은 "NeoI"에서 선행하는 점과 후행하는 대문자 "i"를 나타내는데, 이는 같은 예에서 Firefox에는 없는 것입니다.해당 Mac에서 글꼴 북은 다음을 표시합니다.
저는 그것이 무엇을 의미하는지 조사하지 않았습니다.
Firefox용 FontFinder 플러그인은 당신이 원하는 것을 정확히 수행합니다.설치 후 텍스트 블록을 강조 표시하고 마우스 오른쪽 버튼을 누른 후 FontFinder -> Analyze Selection으로 이동합니다.실제 사용 중인 글꼴과 글꼴 패밀리, 간격, 색상 등의 다른 정보를 알려줍니다.
Wilfred Hughes의 답변에 따르면 Firefox는 이제 이를 기본적으로 지원합니다.이 기사는 좀 더 자세한 내용을 담고 있습니다.
Firefox 22+는 현재 사용 중인 글꼴을 확장자 없이 보여줍니다.
이를 위해 외부 브라우저 플러그인을 사용할 필요가 없습니다.Google Chrome에서 웹 사이트에서 실제로 사용되는 글꼴을 확인하려면 다음 작업을 수행해야 합니다.
- 개발자 도구 열기(웹사이트에서 마우스 오른쪽 버튼을 누른 후 검사 선택)
- 원하는 개체를 "선택" 탭에서 선택합니다.
- "글꼴" 탭을 선택하면 아래 창에 "글꼴 모양"이 나타납니다.
Firebug for Firefox에서 해당 섹션을 확인해 볼 수 있습니다.그것은 당신에게 정확한 모든 속성을 줄 것입니다.
언급URL : https://stackoverflow.com/questions/884177/how-can-i-determine-what-font-a-browser-is-actually-using-to-render-some-text
'programing' 카테고리의 다른 글
| fetch, ajax 및 xhr의 차이 (0) | 2023.09.11 |
|---|---|
| tilde(~) 기호가 있는 URL에서 전체 URL 가져오기 (0) | 2023.09.11 |
| 안드로이드 뷰부풀리기예외:이진 XML 파일라인 #12: 클래스 부풀리기 오류 (0) | 2023.09.11 |
| Python의 salt and hash 암호 (0) | 2023.09.11 |
| Maria DB 루트가 없으면 Engine=CONNECT로 테이블을 드롭할 수 없습니다. (0) | 2023.09.11 |