Paul Irish
이제 Chrome DevTools가 텍스트를 렌더링하는 데 사용되는 글꼴이 무엇인지 정확히 알려줄 수 있습니다.
글꼴 스택은 재미있는 일이며, 수요보다는 제안에 가깝습니다. 추천한 패밀리가 없을 수 있기 때문에 각 사용자의 브라우저가 대체 케이스를 처리하도록 하여 제대로 작동하는 것을 가져와 사용합니다.
font-family: Baskerville, "Baskerville Old Face", "Hoefler Text", Garamond, "Times New Roman", serif;
개발자는 실제로 어떤 글꼴이 사용되고 있는지 알고 싶어 합니다. 이는 다음과 같은 방식으로 이루어집니다.
이제 계산된 스타일 아래에 해당 요소에 사용된 서체의 요약이 표시됩니다. 다음 사항에 유의하세요.
- DevTools에서 Chrome의 텍스트 렌더링 레이어에서 사용하는 실제 서체를 보고합니다.
serif또는sans-serif글꼴이 실제로 어떤 글꼴로 확인되는지 더 이상 추측할 필요가 없습니다. - 내 웹폰트가 작동합니까? 표시되는 글꼴이 웹폰트인지 대체 시스템 글꼴인지 알기 어려울 때가 있습니다. 이제 웹폰트가 적용 중인지 확인할 수 있습니다. 위의 예에서는
::first-line스타일의 웹 글꼴로 Lobster를 가져옵니다. - 스택에 있는 폴스루 글꼴을 쉽게 찾을 수 있습니다. 위의 Merriweather 철자가 오타였으므로 이 철자는 Lobster로 대체되었습니다.
- Arial이나 Helvetica인가요? 디자이너에게 문의하거나 DevTools에 문의하세요. ;)
- Google Webfonts, Typekit, 로컬 글꼴, @font-faces, unicode glyph 및 기타 흥미로운 글꼴 소스와 호환됩니다.
즐거운 시간 보내시고 의견이 있으면 댓글을 남겨 주세요.