왜 우리가 ttf, eot, woff, svg,...서체로

왜 우리가 ttf, eot, woff, svg,...서체로

CSS3에서font-face, 다음과 같은 폰트 종류가 여러개 포함되어 있습니다.ttf,eot,woff,svg그리고.cff.

왜 우리는 이 모든 종류를 사용해야 합니까?

다른 브라우저에 특별한 기능을 제공하는 경우, 주요 웹 브라우저의 수보다 그 수가 더 많은 이유는 무엇입니까?

2019년 답변:

WOFF2만 사용하거나 레거시 지원이 필요한 경우 WOFF를 사용합니다.다른 형식 사용 안 함

(svg그리고.eot죽은 형식입니다.ttf그리고.otf전체 시스템 글꼴이며, 웹 용도로 사용해서는 안 됩니다.)

2012년 답변 원본:

간단히 말해서, 글꼴은 매우 오래되었지만 최근에 와서야 IE 이상에서 지원하고 있습니다.

• eotIE9보다 오래된 인터넷 탐험가에게 필요합니다. 그들은 스펙을 발명했지만 eot은 독점 솔루션이었습니다.

• ttf그리고.otf일반적인 오래된 글꼴이기 때문에 어떤 사람들은 이것이 누구나 고가에서 고가의 글꼴을 무료로 다운로드 할 수 있다는 것을 의미한다고 짜증을 냈습니다.

• 시간이 흐르면서 SVG 1.1은 SVG 마크업을 순수하게 사용하여 폰트를 모델링하는 방법을 설명하는 "폰트" 장을 추가하고 사람들은 폰트를 사용하기 시작합니다.시간이 더 흐르면 일반 폰트 형식에 비해 절대적으로 형편없다는 것이 밝혀지고 SVG 2는 다시 전체 장을 현명하게 제거합니다.

• 그리고나서,woff꽤 많은 도메인 지식을 가진 사람들에 의해 발명되어 시스템 설치에 매우 중요한 비트를 버리는 방식으로 글꼴을 호스팅할 수 있게 됩니다.그러나 웹과 무관하며(불법 복제에 대해 걱정하는 사람들을 행복하게 만든다), 웹의 요구에 더 잘 맞는 내부 압축을 허용합니다(사용자와 호스트를 행복하게 한다).이것이 기본 형식이 됩니다.

• 2019년 편집 몇 년 후에woff2초안이 작성되어 수락됨으로써 압축성이 향상되어 파일이 더욱 작아지고, 20개의 스크립트를 지원하는 글꼴을 대신 디스크에 "부분"으로 저장할 수 있으며, 브라우저는 전체 글꼴을 전송할 필요 없이 필요에 따라 "부분"으로 글꼴을 자동으로 로드할 수 있습니다.먼저, 활자 설정 경험을 더욱 향상시킵니다.

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

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

을 합니다.woffhttp://caniuse.com/woff 에서 확인할 수 있습니다.
을 합니다.woff2http://caniuse.com/woff2 에서 확인할 수 있습니다.

Woff는 TrueType - OpenType 글꼴의 압축(지핑) 형식입니다.크기가 작고 그래픽 파일처럼 네트워크를 통해 전달할 수 있습니다.가장 중요한 것은 라틴 문자만 사용하기 때문에 매우 적은 사람들이 신경 쓰는 렌더링 규칙 테이블을 포함하여 글꼴이 완전히 보존된다는 것입니다.

[dead URL이 제거됨]을 확인합니다.여러분이 보는 폰트는 복잡한 모양을 만드는 수천 개의 조합된 문자를 가진 실험적인 웹 전달 스마트 폰트(woff)입니다.기본 텍스트는 단순 라틴어로 로마자 표기된 싱할라 코드입니다. (복사하여 메모장에 붙여넣기 후 참조).

아무도 이 글꼴을 가지고 있지 않지만 어디에서나 볼 수 있기 때문에(Mac, Win, Linux, 심지어 IE를 제외한 모든 브라우저에서 스마트폰에서 볼 수 있기 때문에 woff만이 이 글꼴을 수행할 수 있습니다.IE는 Open Type)을 완벽하게 지원하지 않습니다.

WOFF 1.0을 기반으로 하는 WOFF 2.0은 Brotli 압축 알고리즘과 파일 크기를 30% 이상 줄여주는 다른 개선점을 기반으로 Chrome, Opera 및 Firefox에서 지원됩니다.

http://en.wikipedia.org/wiki/Web_Open_Font_Format http://en.wikipedia.org/wiki/Brotli

http://sth.name/2014/09/03/Speed-up-webfonts/ 에는 사용 방법에 대한 예시가 있습니다.

기본적으로 src url을 woff2 파일에 추가하고 woff2 형식을 지정합니다.브라우저가 지원하는 첫 번째 형식을 사용하므로 이 형식을 사용하지 않는 것이 중요합니다.

언급URL : https://stackoverflow.com/questions/11002820/why-should-we-include-ttf-eot-woff-svg-in-a-font-face