[CSS] 웹 글꼴(web font)의 형식

1.웹 글꼴이란?

• 사용자 디바이스에 글꼴이 설치되 있지 않아도 웹 브라우저에서 사용할수 웹 전용 글꼴입니다.

2.웹 글꼴의 장,단점?

• 장점 : 사용자 디바이스에 폰트가 없어도 의도한 폰트로 보여줄수 있습니다.
• 단점 : 폰트 파일을 다운받아 적용시켜야 함으로 웹사이트 로드시 속도 저하가 발생합니다. 
  
  

3.웹 글꼴 종류

• TTF : True Type Font, 트루타입 글꼴이다. 1980년대 마이크로소프트와 애플이 어도비에 대항하기 위해 만든 글꼴 저장 형식. 한때 비트맵을 대체하여 Windows 글꼴이 대부분 이 형식이었으나 지금은 레거시 기술로 넘어가고 최신 Windows의 기본 글꼴은 대부분 OTF로 대체되었다. 제어점이 3개인 2차 베지어 곡선(Quadratic Bezier)을 사용한다. 출처 : https://namu.wiki/w/TTF
• OTF : OpenType Font 오픈타입 글꼴이다. Microsoft Windows의 글꼴 트루타입은 대부분 이 형식으로 대체가 완료되었다. 현재 최신 윈도우의 주력 폰트 타입이자 ISO가 표준으로 지정한 폰트 타입이다. 애플에서 개발한 트루타입의 뒤를 잇기 위해 고안되었다.
  출처 : https://namu.wiki/w/OTF
• EOT :  Embedded OpenType 글꼴이다. IE 전용 글꼴이다. 특수한 알고리즘으로 압축되어 있으며, 원래 서체 파일로 되돌릴 수 없다. IE에서만 뜨며, 타 브라우저에서는 기본 글꼴로 뜬다.
  출처 : https://namu.wiki/w/EOT#toc
• WOFF : Web Open Font Format 글꼴이다. OTF와 TTF의 무단배포 등의 문제 등을 해결하기 위해 모질라 재단과 오페라 소프트웨어, 마이크로소프트에서 제안한 웹폰트 파일 형식이다. 기본적으로 OTF, TTF를 이용한 구조를 하고 있으며,압축된 버전이라 웹에서 다운받아가며 사용하기에 최적화되어있다. 또한 글꼴 파일내에서 라이센스 및 메타데이터 등을 따로 포함할 수 있어 저작권 문제에 도움을 준다.  W3C의 웹 폰트 작업 그룹에서 권장하는 파일 형식이다.
  출처 : https://namu.wiki/w/WOFF
• WOFF2 : 기존 WOFF에 비해 30% ~ 50% 정도 더 압축되어 훨씬 가볍다. 2018년 기준으로는 IE를 제외한 거의 모든 브라우저의 최신 버전에서 지원하고 있다.
  
  

출처 : https://www.w3schools.com/css/css3_fonts.asp

 

반응형

결론 IE 서비스가 종료 되어 W3C에서 권장 하는 파일 형식인 WOFF 그 중에서도 압축률이 좋은 WOFF2를 사용 하는게 가장 좋은 방법인것 같다.

 

 

이 글이 도움이 되었다면 ♡(공감), 광고 눌러 주세요.
큰 도움이 됩니다.