css font
font css 관련을 적거나 모아 둔다
font-display
A font-display setting for slow connections
caniuse font-display
ie 에서는 지원되지 않는다
관련 글들
글꼴 로딩 전략에 대한 종합 가이드 – Zach Leatherman
- Google Fonts를 20% 더 빠르게 로드
웹 폰트 사용과 최적화의 최근 동향
웹폰트의 문제점을 이야기하고 해결하는 방향으로 웹 폰트 최적화를 이야기 한다.
- 폰트 파일의 용량 줄이기
- WOFF 2.0 형식 폰트
- 압축된 폰트
- 서브셋 폰트
- 폰트 파일에서 불필요한 글자를 제거하고 사용할 글자만 남겨둔 폰트
- unicode-range 속성
- unicode-range 속성은 유니코드로 지정한 글자에만 웹 폰트를 적용하는 속성
- WOFF 2.0 형식 폰트
- 텍스트가 항상 보이게 하기
- 브라우저의 렌더링 차단 처리 방식
- FOIT (Flash Of Invisible Text)
- FOUT (Flash Of Unstyled Text)
- FOUT 방식 추천
- FOIT 방식은 텍스트가 보이지 않는 문제가 있기 때문에 UX 관점에서 좋지 않다
- Font Face Observer 라이브러리
- 웹 폰트의 로딩 상태를 추적할 수 있는 폰트 로더(font loader)
- CSS의 font-display 속성
- block: FOIT와 동일하게 작동
- swap: FOUT와 동일하게 작동
- fallback: 100ms 동안 텍스트가 보이지 않고, 그 후 폴백 폰트로 렌더링한다. 2초 동안 로딩이 완료 된 경우만 웹 폰트로 전환한다.
- optional: fallback 옵션과 비슷하지만 다르게 작동한다. 네트워크의 연결 상태가 안 좋으면 웹 폰트의 다운로드가 완료되어도 캐시에 저장만 하고 전환은 하지 않는다
- font-display 속성을 사용한 최적화
- 브라우저의 렌더링 차단 처리 방식
- Font Style Matcher로 폰트 간 차이 줄이기
- font-size, line-height, letter-spacing 으로 로드 후 폰트와 비슷하게 만든다
- preload 옵션으로 먼저 로딩하기