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-face 서체, 유니코드 글리프 및 기타 흥미로운 글꼴 소스와 잘 호환됩니다.
즐겁게 사용하시고 의견이 있으시면 댓글을 남겨주세요.