웹 폰트의 이해

WOFF 포멧은 웹에서 사용하기 위해 만들어지고 다른 조직과 함께 Mozilla에서 개발된 WOFF 글꼴은 OpenType(OTF) 및 TrueType(TTF) 글꼴에 사용되는 구조의 압축 버전을 사용하기 때문에 다른 형식보다 빠르게 로드되는 경우가 많습니다. 이것은 2009년에 개발되었으며 현재 W3C(World Wide Web Consortium) 권장 사항입니다. 이 형식은 글꼴 파일 내에 메타 데이터 및 라이센스 정보를 포함할 수도 있습니다. 이 형식을 모든 브라우저가 지원하는 것 같습니다.

폰트의 구조

CSS @font-face 구문

@font-face {
  font-family: 'FontName';
  src: url('webfont.eot'); /* IE9+ Compat Modes */
  src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('webfont.woff2') format('woff2'), /* Super modern browsers */
       url('webfont.woff') format('woff'), /* Modern browsers */
       url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('webfont.svg#FontName') format('svg'); /* Legacy iOS */
}

브라우저 지원

표의 숫자는 해당 형식을 완전히 지원하는 첫 번째 브라우저 버전을 지정합니다.

 

Chrome

Firefox

Opera

Safari

IE / Edge
TTF / OTF43.5103.19[1]
WOFF53.611.105.19
WOFF236392310지원되지 않음
SVG4-37[2]지원되지 않음9-24[2]3.2지원되지 않음
EOT지원되지 않음지원되지 않음지원되지 않음지원되지 않음6
[1] 글꼴은 “설치 가능”으로 설정된 경우에만 작동합니다.
[2] Chrome 38 이상은 Windows Vista 및 XP에서만 SVG 글꼴을 지원합니다.

웹폰트의 형식

트루 타입 글꼴/TrueType font (TTF)
트루 타입은 오랫동안 Mac OS 및 Windows 운영 체제 모두에서 가장 일반적인 글꼴 형식이었습니다. 형식은 가장 기본적인 유형의 디지털 권한 관리를 허용합니다. 작성자가 글꼴 파일을 PDF 파일 및 웹 사이트에 삽입할 수 있는지를 지정하는 삽입 가능 플래그입니다.

이 형식은 모든 주요 브라우저에서 지원되지만 TTF 글꼴은 IE 9 이상에서 임베디드 비트가 설치 가능으로 설정된 경우에만 작동합니다.

임베디드 오픈 타입/Embedded Open Type (EOT)
이 형식은 15년 전 Microsoft (@font-face의 최초 사용자)가 작성했습니다. 이것은 IE8 이하에서 @font-face를 사용할 때 인식할 수있는 유일한 포맷입니다.

트루 타입 글꼴은 ttf2eot (오픈 소스 유틸리티), eotfast (Windows 전용) 또는 Web Embedding Fonts Tool (Microsoft의 임베디드 웹 글꼴 생성 유틸리티) 을 사용하여 EOT로 변환 할 수 있습니다.

웹 오픈 폰트 형식/Web Open Font Format (WOFF / WOFF2)
웹에서 사용하기 위해 만들어지고 다른 조직과 함께 Mozilla에서 개발된 WOFF 글꼴은 OpenType(OTF) 및 TrueType(TTF) 글꼴에 사용되는 구조의 압축 버전을 사용하기 때문에 다른 형식보다 빠르게 로드되는 경우가 많습니다. 이것은 2009년에 개발되었으며 현재 W3C(World Wide Web Consortium) 권장 사항입니다. 이 형식은 글꼴 파일 내에 메타 데이터 및 라이센스 정보를 포함할 수도 있습니다. 이 형식을 모든 브라우저가 지원하는 것 같습니다.

WOFF 형식은 모든 주요 브라우저에서 지원되었습니다.

  • Firefox 3.6 이후 버전
  • 버전 6.0 이후의 Chrome
  • Internet Explorer 9
  • Opera 11.10 버전 이후
  • 사파리 5.1
  • 다른 WebKit 기반 브라우저는 WebKit 528을 빌드 한 이래로 사용됩니다.

TTF에서 WOFF 글꼴 파일을 가져 오는 가장 간단한 방법은 sfnt2woff 를 사용하는 것 입니다.

WOFF2는 차세대 WOFF입니다. 새로운 WOFF 2.0 Web Font 압축 형식은 WOFF 1.0보다 30% 높은 평균 이득을 제공합니다(경우에 따라 최대 50% +).

WOFF2 브라우저 지원 :

  • Google 크롬 36
  • 오페라 23
  • Firefox 35 (기본적으로 사용 중지됨)

Google은 TTF에서 WOFF2 글꼴을 만드는 특별한 도구 를 사용합니다.

SVG (Scalable Vector Graphics font)
SVG 글꼴은 SVG 이미지의 단일 벡터 객체 인 것처럼 표준 SVG 요소 및 속성으로 표현 된 글리프 윤곽선을 포함하는 텍스트 파일입니다. 그러나 이것은 또한 SVG 글꼴의 가장 큰 단점 중 하나입니다. EOT, WOFF 및 PostScript 맞춤형 OpenType은 글꼴 형식에 압축 기능이 내장되어 있지만 SVG 글꼴은 항상 압축되지 않고 일반적으로 꽤 큽니다. SVG 글꼴의 가장 큰 단점은 글꼴 힌팅을 제공하지 않는다는 것입니다.

이 형식은 iOS (iPhone, iPad) 용 Safari의 버전 4.1 이하에서만 허용되는 형식입니다. 현재 SVG 글꼴은 Firefox, IE, IE Mobile 및 Opera Mini에서 지원되지 않습니다.

트루 타입 글꼴은 FontForge로 SVG로 변환 할 수 있습니다 .

트루 타입 컬렉션/TrueType Collection (TTC)
TrueType Collection (TTC)은 여러 글꼴을 하나의 파일로 결합 할 수있는 트루 타입 형식의 확장입니다. 따라서 많은 글리프가 함께 사용되는 글꼴 집합에 상당한 공간을 절약 할 수 있습니다. 처음에는 중국어, 일본어 및 한국어 버전의 Windows에서 사용할 수 있었으며 Windows 2000 이상에서는 모든 지역에서 지원되었습니다.

Mac OS에는 Mac OS 8.5부터 TTC가 지원되었습니다.

태그

Related Posts

you're currently offline