피드로 돌아가기
Dev.toFrontend
원문 읽기
Canvas API 기반 CJK 폰트 렌더링 실측 및 분석 시스템 구축
I Built a Font Inspector Chrome Extension That Actually Identifies Japanese Fonts
AI 요약
Context
CSS font-family의 우선순위 스택 구조로 인해 브라우저가 실제 렌더링한 폰트를 식별하기 어려운 한계 존재. 특히 CJK 폰트는 OS별 시스템 폰트 차이가 크고 폰트 스택이 길어 단순 computedStyle만으로는 정확한 분석 불가.
Technical Solution
- Canvas API를 활용한 텍스트 너비 비교 방식으로 실제 렌더링 폰트 판별 로직 설계
- 테스트 문자열에 일본어 문자를 포함하여 Latin fallback과 CJK 폰트 간의 미세한 렌더링 너비 차이를 포착하는 정밀 분석 기법 적용
- document.styleSheets의 href 속성을 전수 조사하여 Google Fonts, Adobe Fonts 등 Web Font 서비스 제공처를 식별하는 탐색 구조 구현
- TreeWalker API 기반의 DOM 전수 조사와 Map 자료구조를 통한 중복 폰트 제거로 전체 페이지의 폰트 사용 현황을 효율적으로 스캔
- Cross-origin stylesheet 접근 시 발생하는 SecurityError를 예외 처리하여 런타임 안정성 확보
실천 포인트
- CJK 등 다국어 환경의 폰트 렌더링 검증 시 Latin 전용 테스트 문자열 대신 실제 해당 언어의 글리프를 포함한 테스트셋 구성 - 브라우저의 선언적 스타일(Declared Style)과 실제 계산된 스타일(Computed Style)의 괴리를 해결하기 위한 캔버스 측정 기법 검토 - DOM 트리 전체 스캔 시 TreeWalker를 활용하여 성능 최적화 및 불필요한 비가시적 요소 필터링 적용