TTF
TrueType Font——Apple과 Microsoft가 개발한 업계 표준 바이너리 폰트 형식입니다.
TTF란?
TrueType은 1980년대 후반 Apple이 Adobe의 PostScript Type 1 폰트의 대안으로 개발하였고, 이후 Microsoft가 Windows에 채택했습니다. 글리프 윤곽을 PostScript의 3차 곡선보다 계산이 단순하고(래스터화도 빠른) 2차 베지어 곡선으로 저장합니다.
TTF는 빠르게 macOS와 Windows 양쪽에서 범용 폰트 형식이 되었습니다. 20년 이상 시스템 폰트부터 맞춤 서체까지 폰트를 배포하는 표준 방식이었습니다. 웹 배포에서는 WOFF/WOFF2에 주로 자리를 내줬지만, TTF는 여전히 모든 현대 웹 폰트 형식이 구축되는 기반입니다.
작동 원리
TTF 파일은 테이블로 구성된 바이너리 컨테이너로, 각 테이블에 특정 유형의 데이터가 저장됩니다:
glyf——글리프 아웃라인 (실제 벡터 형태)cmap——문자-글리프 매핑 (어떤 Unicode 코드 포인트가 어떤 글리프에 해당하는지)head——폰트 메타데이터 (units-per-em, 생성일, 플래그)hmtx——수평 메트릭 (각 글리프의 advance width와 left side bearing)
아이콘 폰트에서 각 아이콘은 사용자 정의 영역(U+E000 ~ U+F8FF)의 Unicode 코드 포인트에 할당됩니다——이 범위는 표준 텍스트와 충돌하지 않도록 애플리케이션 정의 문자를 위해 특별히 예약되어 있습니다.
CSS에서 TTF 아이콘 폰트 사용하기@font-face {
font-family: 'MyIcons';
src: url('myicons.ttf') format('truetype');
}
.icon {
font-family: 'MyIcons';
font-style: normal;
font-weight: normal;
}
.icon-home::before {
content: '\E001';
}
format('truetype') 힌트는 브라우저에 어떤 종류의 폰트 파일인지 알려주어, TrueType이 지원되지 않으면 다운로드를 건너뛸 수 있게 합니다 (하지만 사실상 모든 브라우저가 지원합니다).
장단점
- 모든 플랫폼에서 범용 호환성
- 데스크톱, 모바일, 웹 어디서나 지원
- OS 폰트 설치의 표준 형식
- 힌팅 지원으로 우수한 렌더링 품질
- 잘 정리된 명세 문서
- 압축 없음——WOFF/WOFF2보다 큼
- 웹 배포에 최적화되지 않음
- 모바일 연결에서 다운로드가 느릴 수 있음
브라우저 지원
TTF는 98%+ 브라우저 지원을 자랑하며, 모든 현대 브라우저와 Internet Explorer 9 이상을 커버합니다. Windows, macOS, Linux 등 모든 주요 데스크톱 OS에서도 기본 지원되기 때문에 변환 없이 TTF 파일을 시스템 폰트로 직접 설치할 수 있습니다.
TTF는 어디서나 작동하지만, 웹 배포에는 WOFF2(본질적으로 압축된 TTF)를 우선 사용하세요. 원시 TTF는 데스크톱 사용, 개발, 그리고 빌드 파이프라인의 기본 형식으로 남겨 두세요.
TTF를 사용하는 경우
- 데스크톱 애플리케이션——네이티브 앱, 디자인 도구, IDE에서 사용할 시스템 폰트로 설치.
- Electron 및 네이티브 앱——오프라인 폰트 렌더링을 위해 TTF를 애플리케이션에 직접 번들.
- 개발 및 테스트——FontForge, fontTools, 시스템 폰트 뷰어 같은 도구로 쉽게 검사 가능.
- 시스템 폰트 검사——OS 레벨 유틸리티를 사용하여 글리프 메트릭, 힌팅, cmap 테이블을 확인해야 할 때.