Chrome이 어떤 글꼴을 사용하고 있는지 어떻게 알 수 있습니까?

Chrome이 어떤 글꼴을 사용하고 있는지 어떻게 알 수 있습니까?

---

이 질문에 이미 답변이 있습니다.

• 일부 텍스트를 렌더링하는 데 브라우저가 실제로 사용하는 글꼴을 어떻게 확인할 수 있습니까? 8 답변

다음 CSS가 있다고 상상해보십시오.

font-family: 'Non-existant Sans', Arial, sans-serif;

시스템에 '존재하지 않는 Sans'가 설치되어 있지 않다고 가정하면 브라우저에서 Arial을 사용합니다. Chrome을 사용하여 어떤 글꼴이 렌더링되고 있는지 알아내는 방법이 있습니까?

편집 : Dave (질문에 대한 의견)는 비슷한 질문을 지적했습니다. 여기서 Chrome에 대해 구체적으로 묻습니다. 그러나 다른 질문의 많은 답변은 괜찮은 확장을 제안합니다. Dev Tools만을 사용하여이 정보를 결정하는 기본 방법이 있습니까?

2013 년 9 월 수정 : Chrome 팀은 이제 Chrome Canary 의 최신 빌드 에서 글꼴 모음 검사를 사용할 수 있다고 발표했습니다 (Twitter 링크에는 자세한 정보가 포함 된 이미지가 포함되어 있음). 이것은 다음 몇 주 동안 dev> beta> stable을 통해 흘러 내릴 것입니다 – 좋은 소식입니다!

---

Google Chrome devtools의 'Elements'탭, 'Computed'아래 :

---

나는 파티에 조금 늦었지만 브라우저가 사용하는 글꼴을 디버그하는 매우 간단한 방법을 방금 발견했습니다.

In the Chrome Web Inspector, go to the font stack in the CSS pane of the Elements Panel. Then, starting with the top of the stack, change the name of the font (I add random letters) while keeping an eye on the text in question. When you change the one in use you will see the text change font as it falls back to the next one in the stack.

I assume something similar is possible in most dev tools

Voilá

---

If you don't want to use a plugin there is a bookmarklet that will tell you this (once activated and you hover over said text):

http://chengyinliu.com/whatfont.html

---

Your 'Non-existant Sans' can be rendered with @font-face in your css. http://www.w3schools.com/cssref/css3_pr_font-face_rule.asp

글꼴 렌더링을 감지하는 방법을 모르기 때문에 기술적으로 귀하의 질문에 답변하지 않습니다. 나는 이것을 찾았습니다 : http://webdesignerwall.com/tutorials/css3-font-face-design-guide 그것은 브라우저가 @ font-face를 지원하지 않으면 다음과 같은 대체 글꼴을로드하도록 보장하는 Modernizr라는 자바 스크립트입니다. Arial 및 Helvetica.

참고 URL : https://stackoverflow.com/questions/9129966/how-do-i-tell-which-font-chrome-is-using