브라우저에서 렌더링된 글꼴을 식별하는 방법은 무엇입니까?

웹 사이트에서 렌더링된 글꼴을 추적하는 것은 때때로 어려울 수 있습니다. 순전히 글꼴 패밀리에 응답하는 것은 안전한 방법이 아닙니다. 네트워크 추적은 글꼴이 다운로드되었음을 표시할 뿐 제대로 사용되고 적용된다는 것을 보여주지 않습니다.



운 좋게도 모든 주요 브라우저의 최신 버전은 이제 실제로 적용된 글꼴을 더 쉽게 식별할 수 있는 지원을 제공합니다. 게다가 브라우저에 표시되는 내용을 절대 신뢰하지 마십시오. 클라이언트에만 있는 것일 수 있습니다.

글꼴 가족은 훌륭합니다

글꼴 패밀리의 개념은 훌륭합니다. 전체 범위의 대체 글꼴을 정의하여 디자인에 적합한 글꼴을 찾을 수 있습니다. 첫 번째 글꼴을 로드하지 못하는 경우 브라우저는 두 번째 글꼴을 적용하려고 시도합니다. 이 드리블은 글꼴 계열 CSS 속성에 지정된 순서대로 내려갑니다.



이 접근 방식은 완벽한 글꼴을 사용할 수 없는 경우 적어도 브라우저가 유사한 글꼴을 렌더링하도록 하는 웹의 훌륭한 폴백 메커니즘입니다.

이 접근 방식은 때때로 디버그하기 어렵게 만듭니다. 일반적으로 대체 글꼴은 비슷해 보이기 때문에 대부분의 사용자나 개발자는 올바른 글꼴과 잘못된 글꼴의 차이를 볼 수 없습니다.

글꼴 패밀리를 디버깅하는 이전 방법

과거에 글꼴이 올바르게 렌더링되도록 하기 위해 사용한 한 가지 트릭은 다른 글꼴과 비슷해 보이지 않는 글꼴을 추가하는 것이었습니다. 따라서 "debug font family"는 다음과 같이 보입니다.

font-family: "Font 1", "Comic Sans MS", "Font 2";

Comic sans 덕분에 글꼴 로딩 디버깅이 쉬워졌습니다. 고유한 디자인 특성과 보편적인 가용성으로 인해 항상 "Comic Sans MS"를 글꼴 모음에 삽입하고 적용 위치를 시각적으로 식별할 수 있습니다.

font-family: "Segoe UI", "Comic Sans MS", "Segoe UI Web (West European)", "Segoe UI", -apple-system, BlinkMacSystemFont, "Roboto", "Helvetica Neue", sans-serif;

다음 사이트는 내 Microsoft 365 테넌트 중 하나에 있는 SharePoint 사이트이며 macOS에 있음을 알고 있습니다.



Fluent Design 사양에 따르면 먼저 "Segoe UI"를 로드한 다음 대체 글꼴을 로드해야 합니다. 이제 글꼴 로드를 테스트하기 위해 페이지의 특정 요소를 그림으로 표시하고 개발자 도구에서 해당 글꼴 모음을 변경할 수 있습니다.



이제 사이트가 변경되어 "Segoe UI"글꼴을 로드할 수 없는 모든 요소가 로컬에 설치된 "Comic Sans MS"를 로드할 수 있습니다. 이제 스택에서 "Comic Sans MS"값을 위아래로 이동하고 어떤 글꼴이 로드되었는지 확인할 수 있습니다.

Spoiler Alert!!! Since the latest design iteration SharePoint doesn't load any web font anymore instead '-apple-system' is used.

또 다른 옵션은 글꼴 패밀리를 처음부터 끝까지 제거하는 것이지만 "Comic Sans"를 사용하는 것보다 덜 재미 있습니다.

렌더링에 사용되는 글꼴을 보는 현대적인 방법

최신 브라우저 덕분에 렌더링된 사용 글꼴을 더 잘 볼 수 있습니다.

파이어폭스 개발자 도구

Firefox 개발자 도구에는 다음 스크린샷과 같이 전용 글꼴 섹션이 있습니다.



개발자 도구의 이 부분은 현재 사용되는 글꼴만 표시하는 것이 아닙니다. 이 경우 시스템 글꼴이지만 글꼴 설정을 가지고 놀 수도 있습니다. 다시 말하지만 여기에 표시된 것처럼 MacOS의 SharePoint는 웹 글꼴을 로드하지 않습니다.

크롬 / 마이크로소프트 엣지

개발자 도구의 브라우저 I 사례는 모두 동일하지만 Edge에는 더 성숙하고 고급 기능이 있지만 Chrome에는 약간 뒤쳐져 있습니다.



렌더링된 글꼴을 보려면 "요소"로 이동하여 DOM에서 요소를 선택하고 "계산된"스타일 정보를 선택하기만 하면 됩니다. 아래로 스크롤하면 이 요소에서 렌더링되는 글꼴을 볼 수 있습니다.



따라서 어떤 글꼴인지 의심스러울 때마다 이제 쉽게 식별할 수 있습니다.

드디어

마지막으로 이러한 도구를 통해 브라우저의 글꼴 디버깅이 훨씬 쉬워졌습니다. 특히 대체에 정의된 모든 글꼴이 모든 장치에서 동일하게 보여야 하는 글꼴 모음의 경우.

과거에는 이전 Comic Sans MS 방법이 꽤 잘 작동했으며 여전히 레거시 브라우저 및 이전 버전에서 디버깅하는 훌륭한 방법일 수 있습니다.