[css] 왜 폰트 페이스에 ttf, eot, woff, svg 등을 포함시켜야합니까?

2019 년 답변 :

WOFF2 만 사용하거나 레거시 지원이 필요한 경우 WOFF를 사용하십시오. 다른 형식을 사용하지 마십시오

( svg그리고 eot죽은 형식은, ttf및 otf전체 시스템 글꼴이 있고, 웹 목적으로 사용할 수 없습니다)

2012 년의 원래 답변 :

요컨대, font-face는 매우 오래되었지만 최근에는 IE 이상에서 지원되었습니다.

• eot IE9보다 오래된 Internet Explorer에는이 사양이 발명되었지만 eot는 독점 솔루션이었습니다.

• ttf그리고 otf어떤 사람들은이 의미 누구나 무료로 비용이 드는 라이센스 글꼴을 다운로드 할 수 짜증있어, 그래서 정상적인 된 글꼴입니다.

• SVG 1.1은 SVG 마크 업을 사용하여 순전히 글꼴을 모델링하는 방법을 설명하는 “글꼴”장을 추가하여 사람들이 사용하기 시작합니다. 더 많은 시간이 흐르고 일반 글꼴 형식과 비교할 때 절대적으로 끔찍한 것으로 나타 났 으며 SVG 2는 전체 장을 다시 현명하게 제거합니다.

• 그런 다음 woff도메인 지식이 많은 사람들이 발명하여 시스템 설치에 중요하지만 웹과 관련이없는 비트를 버리는 방식으로 글꼴을 호스팅 할 수 있습니다 (해적 행위에 대해 걱정하는 사람들을 행복하게 함). 웹의 요구에 더 잘 맞도록 내부 압축이 가능합니다 (사용자와 호스트를 행복하게 함). 이것이 선호되는 형식이됩니다.

• 2019 년 편집 몇 년 후, woff2초안 작성 및 승인을 통해 압축률이 향상되어 파일 크기가 더 작아지고 단일 글꼴을 “부분으로”로드 할 수있어 20 개의 스크립트를 지원하는 글꼴을 “청크”로 저장할 수 있습니다 대신 디스크에서 글꼴을 전체 글꼴을 전송하지 않고 필요에 따라 자동으로 글꼴을 “부분으로”로드 할 수 있으므로 조판 환경이 더욱 향상됩니다.

IE 8 이하, iOS 4 이하 및 안드로이드 4.3 이하를 지원하지 않으려면 WOFF (및 더 압축 된 WOFF 인 WOFF2를 지원하는 최신 브라우저)를 사용하면됩니다.

@font-face {
  font-family: 'MyWebFont';
  src:  url('myfont.woff2') format('woff2'),
        url('myfont.woff') format('woff');
}

지원 woff은 http://caniuse.com/woff 에서 확인할 수 있습니다 .
지원 woff2은 http://caniuse.com/woff2 에서 확인할 수 있습니다 .

답변